/* ========================================================================== Heb4You — Consolidated Stylesheet ========================================================================== */ /* Web fonts loaded via in HTML for faster rendering */ /* --- Custom Properties --- */ :root { --color-primary: #2E7D32; --color-primary-dark: #1B5E20; --color-secondary: #E65100; --color-secondary-dark: #BF360C; --color-text: #2D3436; --color-text-light: #636E72; --color-bg: #fff; --color-bg-light: #F5F3F1; --color-bg-dark: #D5CFCA; --color-success: #27ae60; --color-error: #e74c3c; --color-success-bg: #e8f5e0; --color-error-bg: #fdeaea; --max-width: 1200px; --font-main: 'Figtree', Arial, Helvetica, sans-serif; --font-heading: 'Figtree', Arial, Helvetica, sans-serif; --font-hebrew: 'Heebo', Arial, sans-serif; --radius: 10px; --shadow: 0 2px 12px rgba(0,0,0,0.08); --shadow-hover: 0 4px 20px rgba(0,0,0,0.13); --transition: 0.25s ease; --card-bg: #fff; --card-border: 1px solid rgba(0,0,0,0.06); --header-bg: var(--color-primary); --nav-bg: var(--color-primary-dark); --footer-bg: #f5f5f5; --footer-text: #666; --overlay-bg: rgba(0,0,0,0.9); --color-surface-muted: #F7F5F3; --color-text-muted: #8C9196; --color-border-light: rgba(0,0,0,0.08); } html, body { overflow-x: hidden; } /* --- Skip Link (accessibility) --- */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 10000; background: var(--color-primary); color: #fff; padding: 0.75em 1.5em; font-weight: 700; text-decoration: none; border-radius: 0 0 var(--radius) var(--radius); } .skip-link:focus { position: fixed; left: 1rem; top: 0; width: auto; height: auto; } /* --- Dark Mode --- */ [data-theme="dark"] { --color-text: #e0e0e0; --color-text-light: #b5b5b5; --color-bg: #1C1C1C; --color-bg-light: #2A2A2A; --color-bg-dark: #3A3A3A; --color-success: #2ecc71; --color-error: #e74c3c; --color-success-bg: rgba(46,204,113,0.15); --color-error-bg: rgba(231,76,60,0.15); --shadow: 0 2px 12px rgba(0,0,0,0.3); --shadow-hover: 0 4px 20px rgba(0,0,0,0.4); --card-bg: #2A2A2A; --card-border: 1px solid rgba(255,255,255,0.08); --header-bg: #243318; --nav-bg: #1A2612; --footer-bg: #1A2612; --footer-text: #8bb870; --overlay-bg: rgba(0,0,0,0.95); --color-surface-muted: #242424; --color-text-muted: #8a8a8a; --color-border-light: rgba(255,255,255,0.06); } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: var(--font-main); font-size: 16.5px; line-height: 1.7; color: var(--color-text); background: var(--color-bg); transition: background 0.3s ease, color 0.3s ease; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-secondary); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } button:disabled, .btn:disabled { background: var(--color-bg-dark); color: var(--color-text-light); cursor: not-allowed; opacity: 0.6; } .btn { display: inline-block; padding: 0.6rem 1.5rem; font-size: 1rem; font-weight: 700; border: none; border-radius: 100px; cursor: pointer; text-decoration: none; transition: background var(--transition), color var(--transition); } .btn-primary { background: var(--color-secondary-dark); color: #fff; } .btn-primary:hover { background: var(--color-secondary); color: #fff; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0 0 0.5em; line-height: 1.25; } h1 { font-size: 2.2rem; color: var(--color-text); } h2 { font-size: 1.7rem; color: var(--color-text); } h3 { font-size: 1.15rem; color: var(--color-text); } /* Prevent FOUC for data-include elements */ [data-include] { min-height: 40px; } /* --- Layout --- */ .page-wrapper { display: flex; flex-direction: column; min-height: 100vh; } .content-area { flex: 1; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 1.5rem clamp(1.25rem, 4vw, 3rem); } .content-area:not(:has(.vocab-sidebar)) { display: block !important; } /* --- Header + Nav (SPI-style clean bar) --- */ .site-header { background: #fff; position: relative; z-index: 200; transition: background 0.3s ease; } .header-inner { display: flex; align-items: center; max-width: var(--max-width); margin: 0 auto; padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 3rem) clamp(1rem, 2.5vw, 1.25rem); } .header-logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; } .logo-text { font-family: 'Poppins', var(--font-heading); font-size: 2.2rem; font-weight: 900; color: var(--color-primary); letter-spacing: -0.03em; } .logo-accent { color: var(--color-secondary); } .logo-slogan { font-size: 0.75rem; color: var(--color-text-light); font-weight: 400; } /* Nav sits in same row as header */ .site-nav { background: transparent; margin-left: auto; padding: 0; } .site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.5rem); } .site-nav li a { display: block; padding: 0.5rem 0; color: var(--color-text); font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.227), 16px); font-weight: 500; border-radius: var(--radius); text-decoration: none; transition: opacity var(--transition); } .site-nav li a:hover { opacity: 0.7; text-decoration: none; background: none; } .site-nav li a.active { font-weight: 600; background: none; } /* Hamburger button */ .nav-toggle { display: none; background: none; border: none; color: var(--color-text); font-size: 1.5rem; cursor: pointer; padding: 0.5rem; margin-left: auto; } .nav-toggle::before { content: "\2630"; } .nav-toggle.open::before { content: "\2715"; } /* Mobile */ @media (max-width: 767px) { .header-inner { flex-wrap: wrap; } .site-nav { margin-left: auto; } .site-nav > ul { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg, #fff); padding: 0.5rem clamp(1.25rem, 4vw, 3rem); border-top: 1px solid var(--color-bg-light); box-shadow: 0 4px 8px rgba(0,0,0,0.08); z-index: 99; } .site-nav li a { padding: 0.75rem 0; border-radius: 0; } .nav-toggle { display: block; } } /* --- Main Content --- */ .main-content { padding: 1rem 0; } /* --- Vocab Page Header --- */ .vocab-header { display: flex; align-items: center; justify-content: space-between; background: none; padding: 0; margin: 0; } .vocab-header h1 { color: #fff; margin: 0; font-size: 1.5rem; } .vocab-nav { display: flex; gap: 0.5rem; } .vocab-nav a { color: #fff; background: rgba(255,255,255,0.2); padding: 0.4rem 0.8rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: bold; } .vocab-nav a:hover { background: rgba(255,255,255,0.3); color: #fff; } .vocab-nav-link { color: var(--color-primary); background: none; padding: 0; font-size: 0.9rem; font-weight: 500; text-decoration: none; } .vocab-nav-link:hover { opacity: 0.7; background: none; color: var(--color-primary); } /* --- Vocab Table Header --- */ .vocab-table-header { display: grid; grid-template-columns: 1fr 100px 1fr 50px; background: var(--color-secondary); color: #fff; font-weight: bold; font-size: 0.85rem; padding: 0.5rem; border-radius: var(--radius) var(--radius) 0 0; text-align: center; } /* --- Vocab Grid --- */ .vocab-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 0.75rem; } /* --- Vocab Entry Card --- */ .vocab-entry { display: grid; grid-template-columns: 1fr auto 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 0.75rem 1rem; padding: 1.25rem 1.5rem; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); transition: box-shadow var(--transition), transform var(--transition); animation: cardFadeIn 0.4s ease both; } .vocab-entry:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .vocab-entry.has-tabs { padding-top: 2.75rem; } .vocab-entry { padding-bottom: 2.25rem; } @keyframes cardFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Stagger card entrance */ .vocab-entry:nth-child(1) { animation-delay: 0s; } .vocab-entry:nth-child(2) { animation-delay: 0.03s; } .vocab-entry:nth-child(3) { animation-delay: 0.06s; } .vocab-entry:nth-child(4) { animation-delay: 0.09s; } .vocab-entry:nth-child(5) { animation-delay: 0.12s; } .vocab-entry:nth-child(6) { animation-delay: 0.15s; } .vocab-entry:nth-child(7) { animation-delay: 0.18s; } .vocab-entry:nth-child(8) { animation-delay: 0.21s; } .vocab-entry:nth-child(9) { animation-delay: 0.24s; } .vocab-entry:nth-child(10) { animation-delay: 0.27s; } .vocab-english { font-weight: bold; font-size: 1rem; justify-self: end; overflow-wrap: break-word; word-break: break-word; min-width: 0; } .vocab-image { width: clamp(50px, 15vw, 80px); height: clamp(50px, 15vw, 80px); object-fit: contain; border-radius: var(--radius); transition: transform var(--transition); } .vocab-entry:hover .vocab-image { transform: scale(1.08); } .vocab-text { display: contents; } .vocab-hebrew { font-family: var(--font-hebrew); font-size: 1.5rem; font-weight: 700; direction: rtl; text-align: left; color: var(--color-text); line-height: 1.3; grid-column: 3; grid-row: 1; justify-self: start; overflow-wrap: break-word; word-break: break-word; min-width: 0; } .ktiv-maleh { font-size: 0.85em; font-weight: 400; color: var(--color-text-light); } .vocab-transliteration { font-style: italic; color: var(--color-text-light); font-size: 0.85rem; grid-column: 2; grid-row: 2; text-align: center; } /* --- Gender Badges --- */ .gender-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 3px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.02em; } .gender-m { background: #dbeafe; color: #1e40af; } .gender-f { background: #fce7f3; color: #9d174d; } .gender-mf { background: #e0e7ff; color: #4338ca; } [data-theme="dark"] .gender-m { background: #1e3a5f; color: #93c5fd; } [data-theme="dark"] .gender-f { background: #4a1942; color: #f9a8d4; } [data-theme="dark"] .gender-mf { background: #312e81; color: #a5b4fc; } /* --- Singular/Plural Tabs --- */ .vocab-tabs { display: flex; gap: 0; position: absolute; top: 0.75rem; left: 1rem; z-index: 1; } .vocab-tab { background: none; border: 1px solid var(--color-bg-light); padding: 0.2rem 0.6rem; font-size: 0.7rem; font-weight: 600; cursor: pointer; color: var(--color-text-light); transition: all var(--transition); } .vocab-tab:first-child { border-radius: 4px 0 0 4px; } .vocab-tab:last-child { border-radius: 0 4px 4px 0; border-left: none; } .vocab-tab-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .vocab-tab:hover:not(.vocab-tab-active) { background: rgba(106, 168, 71, 0.08); } /* --- Male/Female Gender Tabs --- */ .vocab-gender-tabs { display: flex; gap: 0; position: absolute; top: 0.75rem; right: 1rem; z-index: 1; } .vocab-gender-tab { background: none; border: 1px solid #f0c8a0; padding: 0.2rem 0.6rem; font-size: 0.7rem; font-weight: 600; cursor: pointer; color: var(--color-text-light); transition: all var(--transition); } .vocab-gender-tab:first-child { border-radius: 4px 0 0 4px; } .vocab-gender-tab:last-child { border-radius: 0 4px 4px 0; border-left: none; } .vocab-gender-tab-active { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; } .vocab-gender-tab:hover:not(.vocab-gender-tab-active) { background: rgba(230, 81, 0, 0.08); } /* --- Audio Button --- */ .audio-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--color-primary); color: #fff; border: none; border-radius: 50%; cursor: pointer; transition: background var(--transition), transform var(--transition); flex-shrink: 0; } .audio-btn:hover { background: var(--color-primary-dark); transform: scale(1.1); } .audio-btn:active { transform: scale(0.95); } .audio-btn.playing { background: var(--color-secondary); } .audio-btn svg { width: 20px; height: 20px; fill: currentColor; } /* --- Transliteration + Audio Pill --- */ .translit-audio-pill { display: inline-flex; align-items: stretch; grid-column: 1 / -1; grid-row: 2; justify-self: center; border-radius: 20px; overflow: hidden; border: 1px solid #ddd; } .grammar-example-card .translit-audio-pill { align-self: flex-start; } .translit-audio-pill .vocab-transliteration, .translit-audio-pill .ge-translit { padding: 0.4rem 0.85rem; font-style: italic; color: var(--color-text); font-size: 0.85rem; background: var(--color-bg); display: flex; align-items: center; text-align: center; cursor: default; user-select: text; } .translit-audio-pill .audio-btn { border-radius: 0; width: auto; height: auto; padding: 0.4rem 0.7rem; border: none; border-left: 1px solid rgba(255,255,255,0.2); } .translit-audio-pill .audio-btn svg { width: 16px; height: 16px; } [data-theme="dark"] .translit-audio-pill { border-color: #444; } [data-theme="dark"] .translit-audio-pill .vocab-transliteration, [data-theme="dark"] .translit-audio-pill .ge-translit { background: var(--card-bg); } /* --- Footer --- */ .site-footer { background: var(--footer-bg); color: var(--footer-text); text-align: center; padding: 1.5rem 1rem; margin-top: auto; border-top: 1px solid #ddd; font-size: 0.85rem; transition: background 0.3s ease; } .site-footer a { color: var(--color-text); } .site-footer a:hover { color: var(--color-primary); } .footer-links { margin-bottom: 0.5rem; } .footer-links a { margin: 0 0.5rem; } /* --- Homepage Specific --- */ .hero { background: var(--color-bg); color: var(--color-text); padding: clamp(3rem, 10vw, 7.5rem) 2rem; margin-bottom: 1.5rem; text-align: center; } .hero h1 { color: var(--color-text); font-size: clamp(2.5rem, 2.5rem + 4.545 * (1vw - 0.2rem), 5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.25rem; } .hero h1 .text-primary { color: var(--color-primary); } .hero p { font-size: clamp(1.125rem, 1.125rem + 0.682 * (1vw - 0.2rem), 1.5rem); color: var(--color-text); max-width: 640px; margin: 0 auto; line-height: 1.6; letter-spacing: -0.03em; font-weight: 500; } .hero-eyebrow { display: inline-block; background: rgba(106, 168, 71, 0.12); color: var(--color-primary); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 100px; padding: 5px 14px; margin-bottom: 1rem; } [data-theme="dark"] .hero-eyebrow { background: rgba(106, 168, 71, 0.18); } .hero-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; } .btn-hero-ghost { display: inline-block; padding: 1.1rem 3rem; font-size: 1.15rem; background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); border-radius: 100px; font-weight: 700; transition: background 0.2s, color 0.2s; } .btn-hero-ghost:hover { background: var(--color-primary); color: #fff; } .section-divider { height: 5px; background: var(--color-secondary); border: none; border-radius: 3px; margin: 0.75rem 0 2rem; } .feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; } .feature-card { display: flex; gap: 1.25rem; padding: 1.75rem; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); transition: box-shadow var(--transition), transform var(--transition); } .feature-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .feature-card img { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; transition: transform var(--transition); } .feature-card:hover img { transform: scale(1.06); } .feature-card h3 { margin-bottom: 0.3rem; color: var(--color-primary); } .feature-card p { color: var(--color-text-light); margin: 0 0 0.5rem; font-size: 0.9rem; } .feature-card .btn { display: inline-block; background: var(--color-secondary-dark); color: #fff; padding: 0.5rem 1.25rem; border-radius: 100px; font-size: 0.85rem; font-weight: bold; } .feature-card .btn:hover { background: var(--color-secondary); color: #fff; } /* --- Homepage Section Title --- */ .home-section-title { color: var(--color-primary); font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 1rem; } /* --- Category Grid (Popular Categories) --- */ .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; } .category-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem 1rem; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); } .category-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); color: var(--color-primary); } .category-card img { width: 80px; height: 80px; object-fit: contain; border-radius: var(--radius); transition: transform var(--transition); } .category-card:hover img { transform: scale(1.12); } .category-card span { font-weight: 700; font-size: 0.9rem; color: var(--color-text); text-align: center; } .category-card:hover span { color: var(--color-primary); } .category-card.admin-only { position: relative; outline: 2px dashed #E65100; outline-offset: -4px; } .category-card.admin-only::before { content: "DRAFT"; position: absolute; top: 6px; right: 6px; background: #E65100; color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; z-index: 1; } .home-browse-all { text-align: center; margin: 0.5rem 0 1.5rem; } .home-browse-all a { font-weight: 600; font-size: 0.95rem; } /* --- Trust Strip --- */ .trust-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 2.5rem; padding: 1rem 1.5rem; background: var(--color-surface-muted); border-radius: var(--radius); margin-bottom: 1.5rem; text-align: center; } .trust-strip .trust-item { font-weight: 700; font-size: 0.9rem; color: var(--color-text-muted); white-space: nowrap; } .trust-strip .trust-item + .trust-item { border-left: 2px solid var(--color-bg-dark); padding-left: 2rem; } @media (max-width: 767px) { .trust-strip .trust-item + .trust-item { border-left: none; padding-left: 0; } } /* --- Welcome Strip (new visitors) --- */ .welcome-strip { background: var(--color-success-bg); border: 1px solid var(--color-success); border-radius: var(--radius); padding: 1rem 1.5rem; margin-bottom: 1rem; } .welcome-strip p { margin: 0; font-size: 0.95rem; } /* --- How It Works --- */ .how-it-works { margin: 2.5rem 0; counter-reset: step-counter; } .steps { display: flex; gap: 1.5rem; } .step { flex: 1; text-align: center; padding: 1.5rem 1rem; counter-increment: step-counter; } .step-number::before { content: counter(step-counter); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--color-primary); color: #fff; border-radius: 50%; font-size: 1.4rem; font-weight: 700; margin-bottom: 0.75rem; } .step h3 { margin-bottom: 0.3rem; } .step p { font-size: 0.9rem; color: var(--color-text-light); margin: 0; } @media (max-width: 767px) { .steps { flex-direction: column; gap: 1rem; } .step { display: flex; align-items: center; text-align: left; gap: 1rem; padding: 1rem; } .step-number { flex-shrink: 0; } } /* --- Try It Now Cards --- */ .try-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .try-card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.2rem 0.75rem; background: var(--card-bg); border: 2px solid var(--color-bg-dark); border-radius: var(--radius); cursor: pointer; font-family: inherit; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); } .try-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--color-secondary); } .try-card img { width: 64px; height: 64px; object-fit: contain; } .try-card-hebrew { font-family: var(--font-hebrew); font-size: 1.4rem; font-weight: 700; direction: rtl; color: var(--color-text); } .try-card-translit { font-style: italic; font-size: 0.8rem; color: var(--color-text-light); } .try-card-english { font-weight: 700; font-size: 0.9rem; color: var(--color-text); } .try-card-play { font-size: 0.75rem; font-weight: 700; color: var(--color-secondary); margin-top: 0.3rem; } /* --- Hero Layout --- */ .hero-inner { margin: 0 auto; text-align: center; } /* --- Utility Pages --- */ .page-content { max-width: 800px; } .page-content h1 { color: var(--color-primary); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-bg-light); } /* --- Top of page link --- */ .top-link { display: inline-block; background: var(--color-secondary); color: #fff; padding: 0.5rem 1rem; border-radius: var(--radius); font-weight: bold; font-size: 0.85rem; margin-top: 1rem; } .top-link:hover { background: var(--color-secondary-dark); color: #fff; } /* --- Photo Credits --- */ .photo-credits { margin-top: 2rem; padding: 1rem; background: var(--color-bg-light); border-radius: var(--radius); font-size: 0.8rem; color: var(--color-text-light); } .photo-credits strong { display: block; margin-bottom: 0.3rem; } /* --- Alphabet Table --- */ .alphabet-table-wrapper { overflow-x: auto; } /* --- Grammar Table --- */ .grammar-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .grammar-table th, .grammar-table td { white-space: nowrap; } .alphabet-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; } .alphabet-table th, .alphabet-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-bg-light); } .alphabet-table th { background: var(--color-primary); color: #fff; font-size: 0.85rem; } .alphabet-table tr:hover { background: var(--color-bg-light); } .alphabet-download { background: var(--color-bg-light); padding: 1rem; border-radius: var(--radius); margin: 1rem 0; } .hebrew-letter { font-family: var(--font-hebrew); font-weight: 700; direction: rtl; text-align: center; } /* --- Words Index --- */ .alpha-nav { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1.5rem; } .alpha-nav a { display: inline-block; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; background: var(--color-bg-light); border-radius: var(--radius); font-weight: bold; font-size: 0.9rem; } .alpha-nav a:hover { background: var(--color-primary); color: #fff; } .word-section h2 { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: 0.3rem; margin-top: 1.5rem; } .word-list { list-style: none; padding: 0; columns: 2; gap: 1rem; } .word-list li { padding: 0.3rem 0; } .word-list a { color: var(--color-text); } .word-list a:hover { color: var(--color-primary); } /* --- Tips & Tricks --- */ .tip { margin-bottom: 1.5rem; padding: 1rem; background: var(--color-bg-light); border-radius: var(--radius); border-left: 4px solid var(--color-primary); } .tip h2 { font-size: 1.1rem; color: var(--color-primary); margin-bottom: 0.5rem; } /* ========================================================================== Vocab Sidebar (Practice Activities) ========================================================================== */ .content-area.vocab-layout { display: grid; grid-template-columns: 1fr 200px; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 1rem clamp(1.25rem, 4vw, 3rem); } .vocab-sidebar { position: sticky; top: 1rem; align-self: start; margin-top: 4.5rem; border-left: 2px solid var(--color-bg-dark); padding-left: 1.5rem; } .vocab-activity-buttons h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); margin: 0 0 0.75rem; } .vocab-activity-btn { display: block; width: 100%; padding: 0.65rem 1rem; margin-bottom: 0.5rem; border: 1px solid var(--color-bg-dark); border-radius: var(--radius); background: var(--card-bg); color: var(--color-text); font-family: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.4; cursor: pointer; text-align: left; text-decoration: none; box-sizing: border-box; transition: border-color var(--transition), background var(--transition); } .vocab-activity-btn:hover { border-color: var(--color-primary); background: var(--color-bg-light); } /* Highlight the primary "Flashcards" CTA */ .vocab-activity-btn.flashcard-trigger { position: relative; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: #fff; border: none; font-size: 1rem; font-weight: 700; padding: 0.85rem 2.25rem 0.85rem 1rem; box-shadow: 0 4px 14px rgba(46, 125, 50, 0.35); animation: flashcard-pulse 2.6s ease-in-out infinite; } .vocab-activity-btn.flashcard-trigger::after { content: "\2192"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.15rem; font-weight: 700; transition: transform 0.25s ease; } .vocab-activity-btn.flashcard-trigger:hover { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary-dark) 100%); border: none; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(230, 81, 0, 0.45); } .vocab-activity-btn.flashcard-trigger:hover::after { transform: translateY(-50%) translateX(4px); } @keyframes flashcard-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(46, 125, 50, 0.35); } 50% { box-shadow: 0 4px 22px rgba(230, 81, 0, 0.5); } } @media (prefers-reduced-motion: reduce) { .vocab-activity-btn.flashcard-trigger { animation: none; } } /* Hide JS-injected flashcard/quiz buttons in bottom nav — sidebar has them */ .vocab-header .flashcard-header-group, .vocab-header .quiz-header-group { display: none; } @media (max-width: 767px) { .content-area.vocab-layout { display: flex; flex-direction: column; grid-template-columns: none; } .vocab-layout > main { order: 1; } .vocab-sidebar { order: 2; position: static; border-left: none; padding-left: 0; margin-top: 1.5rem; margin-bottom: 0; } .vocab-activity-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .vocab-activity-buttons h3 { width: 100%; font-size: 0.85rem; margin: 0 0 0.25rem; } .vocab-activity-btn { flex: 1 1 auto; min-width: 0; text-align: center; margin-bottom: 0; font-size: 0.8rem; padding: 0.5rem 0.4rem; } .vocab-entry { gap: 0.5rem 0.5rem; padding: 0.75rem 0.75rem; } .vocab-english { font-size: 0.8rem; } .vocab-hebrew { font-size: 1.15rem; } .vocab-transliteration { font-size: 0.75rem; } } /* ========================================================================== Flashcard Mode ========================================================================== */ /* Start button in vocab header */ .flashcard-header-group { display: flex; align-items: center; gap: 0.5rem; } .flashcard-start-btn { background: #fff; color: var(--color-primary); border: none; padding: 0.4rem 1rem; border-radius: var(--radius); font-weight: bold; font-size: 0.85rem; cursor: pointer; transition: background var(--transition), color var(--transition); } .flashcard-start-btn:hover { background: var(--color-secondary); color: #fff; } .progress-badge { background: rgba(255,255,255,0.25); color: #fff; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: bold; white-space: nowrap; } /* Fullscreen overlay */ .flashcard-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay-bg); z-index: 10000; display: flex; align-items: center; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch; } .flashcard-container { width: 100%; max-width: 420px; padding: 1rem; position: relative; } /* Top bar */ .flashcard-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .flashcard-counter { color: #c0c0c0; font-size: 0.9rem; font-weight: bold; } .flashcard-close { background: none; border: none; color: #c0c0c0; font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 0 0.3rem; } .flashcard-close:hover { color: #fff; } .flashcard-top-actions { display: flex; align-items: center; gap: 0.3rem; } .flashcard-mute-btn { background: none; border: none; color: #c0c0c0; cursor: pointer; padding: 0.2rem; display: flex; align-items: center; justify-content: center; position: relative; } .flashcard-mute-btn .audio-icon { width: 20px; height: 20px; } .flashcard-mute-btn:hover { color: #fff; } .flashcard-mute-btn.muted { color: #777; } .flashcard-mute-btn.muted::after { content: ''; position: absolute; width: 2px; height: 22px; background: #e74c3c; transform: rotate(45deg); border-radius: 1px; } /* Help button (shared style for flashcard + quiz) */ .flashcard-help-btn, .quiz-help-btn { background: none; border: 1.5px solid #666; color: #c0c0c0; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .flashcard-help-btn:hover, .quiz-help-btn:hover { color: #fff; border-color: #aaa; } /* Help popup (shared style for flashcard + quiz) */ .flashcard-help-popup, .quiz-help-popup { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #2a2a2a; border-radius: 12px; padding: 1.5rem; z-index: 1010; color: #e0e0e0; text-align: left; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; } .flashcard-help-popup h3, .quiz-help-popup h3 { color: var(--color-secondary); font-size: 1rem; margin: 0 0 0.5rem 0; } .flashcard-help-popup h3 + h3, .quiz-help-popup h3 + h3 { margin-top: 1rem; } .flashcard-help-popup p, .quiz-help-popup p { font-size: 0.85rem; margin: 0 0 0.3rem 0; line-height: 1.4; } .flashcard-help-popup ul, .quiz-help-popup ul { list-style: none; padding: 0; margin: 0 0 0.5rem 0; } .flashcard-help-popup li, .quiz-help-popup li { font-size: 0.85rem; padding: 0.2rem 0; } .flashcard-help-popup kbd, .quiz-help-popup kbd { background: #444; border: 1px solid #666; border-radius: 3px; padding: 0.1rem 0.4rem; font-size: 0.8rem; font-family: inherit; } .flashcard-help-close, .quiz-help-close { display: block; margin: 1rem auto 0; background: var(--color-secondary); color: #fff; border: none; border-radius: 8px; padding: 0.5rem 1.5rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; } .flashcard-help-close:hover, .quiz-help-close:hover { opacity: 0.9; } /* Progress bar */ .flashcard-progress-bar { height: 4px; background: #444; border-radius: 2px; margin-bottom: 1.5rem; overflow: hidden; } .flashcard-progress-fill { height: 100%; background: var(--color-primary); border-radius: 2px; transition: width 0.3s ease; } /* Card — image on top, slide-up reveal from bottom */ .flashcard-card { background: #fff; border-radius: 12px; min-height: 360px; cursor: pointer; position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .flashcard-front { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1.25rem 1.25rem; min-height: 360px; } /* English label pinned at the top of the card */ .flashcard-english-front { font-weight: bold; font-size: 1.3rem; color: var(--color-primary); text-align: center; margin-bottom: 0.5rem; } /* Card front image */ .flashcard-img { width: 140px; height: 140px; object-fit: contain; margin-top: 0.25rem; margin-bottom: 1rem; } .flashcard-hint { color: var(--color-text-light); font-size: 0.9rem; margin: auto 0 0.25rem; transition: opacity 0.25s ease; } .flashcard-card.flipped .flashcard-hint { opacity: 0; } /* Sliding reveal panel */ .flashcard-back { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 1.25rem 1.25rem 1.5rem; gap: 0.3rem; background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.35s ease; pointer-events: none; } .flashcard-card.flipped .flashcard-back { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Card back */ .flashcard-hebrew { font-family: var(--font-hebrew); font-size: 2.5rem; font-weight: 700; direction: rtl; color: var(--color-text); margin-bottom: 0.3rem; line-height: 1.3; } .flashcard-translit { font-style: italic; color: var(--color-text-light); font-size: 1rem; margin-bottom: 0.3rem; } .flashcard-audio-btn { width: 44px; height: 44px; background: var(--color-primary); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition); } .flashcard-audio-btn:hover { background: var(--color-primary-dark); } .flashcard-audio-btn svg { width: 22px; height: 22px; fill: currentColor; } /* Action buttons — always reserve their space so the card doesn't shift */ .flashcard-actions { display: flex; gap: 1rem; margin-top: 1.5rem; justify-content: center; min-height: 48px; } .flashcard-btn { padding: 0.75rem 1.5rem; border: none; border-radius: var(--radius); font-size: 1rem; font-weight: bold; cursor: pointer; transition: background var(--transition), transform var(--transition); } .flashcard-btn:hover { transform: scale(1.05); } .flashcard-btn-again { background: var(--color-secondary); color: #fff; } .flashcard-btn-again:hover { background: var(--color-secondary-dark); } .flashcard-btn-got-it { background: var(--color-primary); color: #fff; } .flashcard-btn-got-it:hover { background: var(--color-primary-dark); } .flashcard-btn-icon { font-size: 1.1em; } /* Summary screen */ .flashcard-summary { text-align: center; color: #fff; } .flashcard-summary h2 { color: #fff; margin-bottom: 1.5rem; font-size: 1.6rem; } .summary-stats { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; } .summary-stat { display: flex; flex-direction: column; align-items: center; } .summary-number { font-size: 2rem; font-weight: bold; color: var(--color-primary); } .summary-label { font-size: 0.8rem; color: #c0c0c0; text-transform: uppercase; } .summary-streak { font-size: 1.1rem; color: var(--color-secondary); margin-bottom: 1.5rem; } .flashcard-btn-review { background: var(--color-secondary); color: #fff; margin-bottom: 0.75rem; display: block; width: 100%; max-width: 280px; margin-left: auto; margin-right: auto; } .flashcard-btn-done { display: block; width: 100%; max-width: 280px; margin-left: auto; margin-right: auto; } /* Next-round button in mini-summary */ .flashcard-btn-next { display: block; width: 100%; max-width: 280px; margin: 0 auto 0.75rem; } /* Mobile flashcard adjustments */ @media (max-width: 480px) { .flashcard-overlay { align-items: flex-start; padding-top: env(safe-area-inset-top, 0); } .flashcard-container { padding: 0.5rem; } .flashcard-card { min-height: 0; } .flashcard-front { min-height: 0; padding: 1rem 1rem 0.75rem; } .flashcard-img { width: 100px; height: 100px; margin-bottom: 0.5rem; } .flashcard-english-front { font-size: 1.1rem; margin-bottom: 0.25rem; } .flashcard-hebrew { font-size: 2rem; } .flashcard-back { padding: 1rem 1rem 1.25rem; } .flashcard-actions { margin-top: 1rem; gap: 0.5rem; } .flashcard-btn { padding: 0.6rem 1rem; font-size: 0.9rem; } .flashcard-progress-bar { margin-bottom: 0.75rem; } .summary-stats { gap: 1rem; } } /* ========================================================================== Quiz Mode ========================================================================== */ .quiz-header-group { display: flex; align-items: center; gap: 0.4rem; } .quiz-start-btn { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.4); padding: 0.35rem 0.8rem; border-radius: var(--radius); font-weight: bold; font-size: 0.8rem; cursor: pointer; transition: background var(--transition); } .quiz-start-btn:hover { background: rgba(255,255,255,0.35); } /* ========================================================================== Quiz System — 3-Level Design ========================================================================== */ .quiz-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay-bg); z-index: 10000; display: flex; align-items: center; justify-content: center; overflow-y: auto; } .quiz-container { width: 100%; max-width: 520px; padding: 1rem; position: relative; } /* --- Top Bar --- */ .quiz-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; } .quiz-counter { color: #c0c0c0; font-size: 0.9rem; font-weight: bold; } .quiz-level-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.6rem; border-radius: 20px; } .quiz-level-badge-beginner { background: #2E7D32; color: #fff; } .quiz-level-badge-intermediate { background: #E65100; color: #fff; } .quiz-level-badge-advanced { background: #b71c1c; color: #fff; } .quiz-timer { color: var(--color-secondary); font-size: 0.9rem; font-weight: bold; font-variant-numeric: tabular-nums; } .quiz-top-actions { display: flex; align-items: center; gap: 0.3rem; } .quiz-close { background: none; border: none; color: #c0c0c0; font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 0 0.3rem; } .quiz-close:hover { color: #fff; } /* --- Progress Bars --- */ .quiz-progress-bar { height: 4px; background: #444; border-radius: 2px; margin-bottom: 1rem; overflow: hidden; } .quiz-progress-fill { height: 100%; background: var(--color-primary); border-radius: 2px; transition: width 0.3s ease; } .quiz-question-timer-bar { height: 4px; background: #444; border-radius: 2px; margin-bottom: 1.5rem; overflow: hidden; } .quiz-question-timer-fill { height: 100%; background: var(--color-secondary); border-radius: 2px; width: 100%; } /* ========================================================================== Level Selector ========================================================================== */ .quiz-level-selector { max-width: 560px; } .quiz-level-subtitle { color: #ccc; text-align: center; font-size: 1rem; margin: 0 0 1.5rem; } .quiz-level-subtitle strong { color: #fff; } .quiz-levels { display: flex; flex-direction: column; gap: 0.75rem; } .quiz-level-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 0 0.75rem; padding: 1rem 1.25rem; background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.12); border-radius: var(--radius); color: #fff; text-align: left; cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition); font-family: var(--font-main); } .quiz-level-card:hover { border-color: var(--color-primary); background: rgba(255,255,255,0.1); transform: scale(1.02); } .quiz-level-icon { grid-row: 1 / 4; font-size: 2rem; align-self: center; } .quiz-level-name { font-size: 1.15rem; font-weight: 700; } .quiz-level-tag { font-size: 0.8rem; color: var(--color-secondary); font-weight: 600; } .quiz-level-desc { font-size: 0.8rem; color: #aaa; line-height: 1.4; margin-top: 0.2rem; } /* ========================================================================== Question Area ========================================================================== */ .quiz-question-area { text-align: center; margin-bottom: 1.5rem; } .quiz-hebrew-prompt { display: block; font-family: var(--font-hebrew); font-size: 2.5rem; font-weight: 700; color: #fff; direction: rtl; line-height: 1.3; margin-bottom: 0.2rem; } .quiz-english-prompt { display: block; font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 0.5rem; } .quiz-translit-prompt { display: block; font-style: italic; color: #c0c0c0; font-size: 1rem; margin-bottom: 0.75rem; } .quiz-instruction { color: #ccc; font-size: 0.9rem; margin: 0; } /* Prompt image (for English->Hebrew, type-hebrew) */ .quiz-prompt-image { margin-bottom: 0.75rem; text-align: center; } .quiz-prompt-img { width: 100px; height: 100px; object-fit: contain; border-radius: var(--radius); display: block; margin: 0 auto; } /* ========================================================================== Image Choices (2x2 grid) ========================================================================== */ .quiz-choices-images { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; max-width: 400px; margin: 0 auto; } .quiz-choice-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.75rem; background: #fff; border: 3px solid transparent; border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition), transform var(--transition), background var(--transition); } .quiz-choice-btn:hover { border-color: var(--color-primary); transform: scale(1.03); } .quiz-choice-btn.quiz-correct { border-color: var(--color-success); background: var(--color-success-bg); } .quiz-choice-btn.quiz-wrong { border-color: var(--color-error); background: var(--color-error-bg); } .quiz-choice-img { width: 80px; height: 80px; object-fit: contain; } .quiz-choice-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); } .quiz-key-hint { position: absolute; top: 4px; left: 6px; font-size: 0.7rem; color: #888; font-weight: bold; } /* ========================================================================== Text Choices (stacked list) ========================================================================== */ .quiz-choices-text { display: flex; flex-direction: column; gap: 0.5rem; max-width: 400px; margin: 0 auto; } .quiz-choices-text .quiz-choice-btn { flex-direction: row; justify-content: flex-start; padding: 0.85rem 1rem 0.85rem 2.2rem; gap: 0.75rem; } .quiz-choice-hebrew-text { font-family: var(--font-hebrew); font-size: 1.3rem; font-weight: 700; color: var(--color-text); } .quiz-choice-english-text { font-size: 1rem; font-weight: 600; color: var(--color-text); } /* ========================================================================== True/False ========================================================================== */ .quiz-choices-tf { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .quiz-tf-image { margin-bottom: 0.75rem; text-align: center; } .quiz-tf-img { width: 120px; height: 120px; object-fit: contain; border-radius: var(--radius); border: 2px solid rgba(255,255,255,0.15); display: block; margin: 0 auto; } .quiz-tf-btn { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1rem; border: 3px solid transparent; border-radius: var(--radius); font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: border-color var(--transition), transform var(--transition), background var(--transition); font-family: var(--font-main); } .quiz-tf-btn:hover { transform: scale(1.05); } .quiz-tf-yes { background: #e8f5e0; color: #1B5E20; } .quiz-tf-yes:hover { border-color: var(--color-success); } .quiz-tf-no { background: #fdeaea; color: #b71c1c; } .quiz-tf-no:hover { border-color: var(--color-error); } .quiz-tf-icon { font-size: 1.5rem; } .quiz-tf-btn.quiz-correct { border-color: var(--color-success); background: var(--color-success-bg); } .quiz-tf-btn.quiz-wrong { border-color: var(--color-error); background: var(--color-error-bg); } /* ========================================================================== Type Hebrew Input ========================================================================== */ .quiz-choices-type { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .quiz-type-input-wrap { display: flex; gap: 0.5rem; width: 100%; max-width: 350px; } .quiz-type-input { flex: 1; padding: 0.75rem 1rem; font-family: var(--font-hebrew); font-size: 1.4rem; font-weight: 700; border: 2px solid #555; border-radius: var(--radius); background: rgba(255,255,255,0.1); color: #fff; text-align: center; transition: border-color var(--transition); } .quiz-type-input:focus { outline: none; border-color: var(--color-primary); } .quiz-type-input.quiz-type-correct { border-color: var(--color-success); background: rgba(46,204,113,0.15); } .quiz-type-input.quiz-type-wrong { border-color: var(--color-error); background: rgba(231,76,60,0.15); } .quiz-type-submit { padding: 0.75rem 1.25rem; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 700; cursor: pointer; transition: background var(--transition); } .quiz-type-submit:hover { background: var(--color-primary-dark); } .quiz-type-hint { color: #888; font-size: 0.85rem; margin: 0; } /* ========================================================================== Fill the Blank ========================================================================== */ .quiz-fill-blank-prompt { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0.75rem; } .quiz-fill-english { font-size: 1.6rem; font-weight: 700; color: #fff; } .quiz-fill-arrow { font-size: 1.4rem; color: var(--color-secondary); } .quiz-fill-blank { font-size: 2rem; font-weight: 700; color: var(--color-secondary); font-family: var(--font-hebrew); min-width: 2rem; text-align: center; } /* ========================================================================== Feedback ========================================================================== */ .quiz-feedback { text-align: center; font-weight: bold; font-size: 1rem; margin-top: 1rem; min-height: 1.5em; } .quiz-feedback-correct { color: var(--color-success); } .quiz-feedback-wrong { color: var(--color-error); } .quiz-feedback-hebrew { font-family: var(--font-hebrew); font-size: 1.2rem; font-weight: 700; } /* ========================================================================== Summary Screen ========================================================================== */ .quiz-summary { text-align: center; color: #fff; } .quiz-summary h2 { color: #fff; margin-bottom: 0.5rem; font-size: 1.6rem; } /* Star Rating */ .quiz-stars { font-size: 2.5rem; margin-bottom: 1rem; display: flex; justify-content: center; gap: 0.25rem; } .quiz-star-earned { color: #FFD700; } .quiz-star-empty { color: #555; } @keyframes starPop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .quiz-star-earned { animation: starPop 0.4s ease forwards; } .quiz-star-earned:nth-child(2) { animation-delay: 0.15s; } .quiz-star-earned:nth-child(3) { animation-delay: 0.3s; } .summary-message { font-size: 1.1rem; margin: 0.75rem 0 1.5rem; } .summary-perfect { color: #FFD700; } .summary-great { color: var(--color-success); } .summary-good { color: var(--color-secondary); } .summary-try { color: #ccc; } /* Missed Words Review */ .quiz-missed-review { background: rgba(255,255,255,0.06); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.25rem; text-align: left; } .quiz-missed-review h3 { color: var(--color-secondary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.75rem; text-align: center; } .quiz-missed-list { display: flex; flex-direction: column; gap: 0.4rem; } .quiz-missed-word { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; align-items: center; padding: 0.4rem 0.6rem; background: rgba(255,255,255,0.04); border-radius: 6px; } .quiz-missed-hebrew { font-family: var(--font-hebrew); font-size: 1.1rem; font-weight: 700; color: #fff; text-align: right; } .quiz-missed-translit { font-style: italic; color: #aaa; font-size: 0.8rem; text-align: center; } .quiz-missed-english { color: #ccc; font-size: 0.9rem; font-weight: 600; } /* Summary Action Buttons */ .quiz-summary-actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .quiz-btn { padding: 0.75rem 1.5rem; border: none; border-radius: var(--radius); font-size: 1rem; font-weight: bold; cursor: pointer; transition: background var(--transition), transform var(--transition); display: block; width: 100%; max-width: 280px; } .quiz-btn:hover { transform: scale(1.05); } .quiz-btn-retry { background: var(--color-secondary); color: #fff; } .quiz-btn-retry:hover { background: var(--color-secondary-dark); } .quiz-btn-next { background: #1565C0; color: #fff; } .quiz-btn-next:hover { background: #0D47A1; } .quiz-btn-done { background: rgba(255,255,255,0.15); color: #ccc; border: 1px solid rgba(255,255,255,0.2); } .quiz-btn-done:hover { background: rgba(255,255,255,0.25); color: #fff; } .quiz-btn-save-basket { background: #8B5CF6; color: #fff; border: none; border-radius: 6px; padding: 0.5rem 1.2rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; margin-top: 0.75rem; transition: background 0.2s; width: 100%; } .quiz-btn-save-basket:hover { background: #7C3AED; } .quiz-btn-save-basket.quiz-btn-saved { background: var(--color-primary); cursor: default; } /* ========================================================================== Matching Game (Intermediate round) ========================================================================== */ .match-area { margin-top: 0.5rem; } .match-instruction { color: #ccc; text-align: center; font-size: 0.95rem; margin: 0 0 1rem; } .match-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .match-column { display: flex; flex-direction: column; gap: 0.5rem; } .match-tile { padding: 0.7rem 0.75rem; border: 2px solid #555; border-radius: var(--radius); background: rgba(255,255,255,0.08); color: #fff; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: center; transition: border-color var(--transition), background var(--transition), transform var(--transition); } .match-tile:hover { border-color: #888; background: rgba(255,255,255,0.15); } .match-tile-hebrew { font-family: var(--font-hebrew); font-size: 1.3rem; direction: rtl; } .match-tile.match-selected { border-color: var(--color-primary); background: rgba(106,168,71,0.25); transform: scale(1.03); } .match-tile.match-matched { border-color: var(--color-primary); background: rgba(106,168,71,0.3); opacity: 0.6; pointer-events: none; } .match-tile.match-wrong { border-color: var(--color-error); background: rgba(231,76,60,0.25); animation: matchShake 0.4s ease; } @keyframes matchShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } /* ========================================================================== Quiz — Responsive ========================================================================== */ @media (max-width: 480px) { .quiz-container { padding: 0.75rem; } .quiz-hebrew-prompt { font-size: 2rem; } .quiz-english-prompt { font-size: 1.4rem; } .quiz-choice-img { width: 60px; height: 60px; } .quiz-tf-img { width: 90px; height: 90px; } .quiz-prompt-img { width: 80px; height: 80px; } .quiz-fill-english { font-size: 1.2rem; } .quiz-fill-blank { font-size: 1.5rem; } .quiz-level-card { padding: 0.75rem 1rem; } .quiz-level-icon { font-size: 1.6rem; } .quiz-stars { font-size: 2rem; } .quiz-missed-word { grid-template-columns: 1fr; text-align: center; gap: 0.15rem; } .quiz-missed-hebrew { text-align: center; } } /* ========================================================================== Quiz — Dark Mode Overrides ========================================================================== */ [data-theme="dark"] .quiz-tf-yes { background: rgba(46,204,113,0.15); color: #81c784; } [data-theme="dark"] .quiz-tf-no { background: rgba(231,76,60,0.15); color: #ef9a9a; } /* ========================================================================== Progress Dashboard (Homepage) ========================================================================== */ .progress-dashboard { display: none; background: #fff; border: 1px solid var(--color-bg-light); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; } .progress-dashboard h2 { color: var(--color-primary); margin-bottom: 1rem; font-size: 1.3rem; } .dash-stats { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .dash-stat { display: flex; flex-direction: column; align-items: center; min-width: 80px; } .dash-stat-number { font-size: 2rem; font-weight: bold; color: var(--color-primary); line-height: 1; } .dash-stat-label { font-size: 0.8rem; color: var(--color-text-light); text-transform: uppercase; margin-top: 0.25rem; } .dash-stat-sub { font-size: 0.7rem; color: var(--color-text-light); } .dash-category-list { display: flex; flex-direction: column; gap: 0.5rem; } .dash-category-item { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 0.75rem; font-size: 0.85rem; } .dash-cat-name { font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-cat-bar { height: 8px; background: var(--color-bg-light); border-radius: 4px; overflow: hidden; } .dash-cat-fill { height: 100%; background: var(--color-primary); border-radius: 4px; transition: width 0.3s ease; } .dash-cat-count { color: var(--color-text-light); font-size: 0.8rem; white-space: nowrap; } /* ========================================================================== Search Page ========================================================================== */ /* --- Search Page --- */ .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; } .search-input-wrapper { position: relative; display: flex; align-items: center; } .search-input-icon { position: absolute; left: 0.85rem; color: var(--color-text-light); pointer-events: none; } .search-form input[type="search"] { width: 100%; padding: 0.75rem 2.5rem 0.75rem 2.8rem; font-size: 1rem; border: 2px solid var(--color-bg-dark); border-radius: var(--radius); font-family: var(--font-main); transition: border-color var(--transition); background: var(--color-bg); } .search-form input[type="search"]::-webkit-search-cancel-button, .search-form input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .search-form input[type="search"]:focus { outline: none; border-color: var(--color-primary); } .search-clear { position: absolute; right: 0.5rem; background: none; border: none; font-size: 1.3rem; color: var(--color-text-light); cursor: pointer; padding: 0.2rem 0.4rem; line-height: 1; border-radius: 50%; } .search-clear:hover { color: var(--color-text); background: var(--color-bg-light); } /* Filters */ .search-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0; } .search-type-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; } .filter-chip { padding: 0.3rem 0.75rem; border: 1px solid var(--color-bg-dark); border-radius: 20px; background: var(--color-bg); color: var(--color-text); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all var(--transition); font-family: var(--font-main); } .filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .filter-chip.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .search-category-filter select { padding: 0.3rem 0.6rem; border: 1px solid var(--color-bg-dark); border-radius: var(--radius); font-size: 0.8rem; font-family: var(--font-main); background: var(--color-bg); color: var(--color-text); } /* Status */ .search-status { color: var(--color-text-light); font-size: 0.85rem; margin: 0.5rem 0; } .search-empty { color: var(--color-text-light); font-size: 0.9rem; text-align: center; padding: 2rem 0; } /* Results */ .search-results-list { display: flex; flex-direction: column; gap: 0.5rem; } .search-result-card { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding: 0.75rem 1rem; padding-left: 1.25rem; background: var(--color-bg-light); border-radius: var(--radius); text-decoration: none; transition: box-shadow var(--transition); border-left: 4px solid transparent; } .search-result-card:hover { box-shadow: var(--shadow); } .search-result-card[data-type="word"] { border-left-color: var(--color-primary); } .search-result-card[data-type="phrase"] { border-left-color: #1976d2; } .search-result-card[data-type="letter"] { border-left-color: var(--color-secondary); } .search-result-card[data-type="niqqud"] { border-left-color: #7b1fa2; } /* Type badge */ .sr-badge { font-size: 0.6rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.03em; grid-column: 1; justify-self: start; } .badge-word { background: #e8f5e0; color: #1B5E20; } .badge-phrase { background: #e3f2fd; color: #0d47a1; } .badge-letter { background: #fff3e0; color: #bf360c; } .badge-niqqud { background: #f3e5f5; color: #4a148c; } /* Card content */ .sr-english { font-weight: bold; color: var(--color-text); font-size: 1rem; grid-column: 1; } .sr-hebrew { font-family: var(--font-hebrew); font-size: 1.25rem; font-weight: 700; color: var(--color-text); grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; } .sr-translit { font-style: italic; color: var(--color-text-light); font-size: 0.82rem; grid-column: 1; } .sr-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.75rem; color: var(--color-text-light); margin-top: 0.15rem; } .sr-plural, .sr-fem { font-family: var(--font-hebrew); } .sr-note { font-style: italic; font-size: 0.78rem; } .sr-sound, .sr-gem, .sr-ntype { font-size: 0.75rem; } .sr-ntype { text-transform: capitalize; padding: 0.05rem 0.35rem; background: #f3e5f5; border-radius: 3px; color: #4a148c; } .sr-topic { grid-column: 1 / -1; font-size: 0.7rem; color: var(--color-primary); font-weight: 600; margin-top: 0.1rem; } /* Large display character for letters/niqqud */ .search-result-card[data-type="letter"], .search-result-card[data-type="niqqud"] { grid-template-columns: 1fr auto auto; } .sr-display-char { grid-column: 3; grid-row: 1 / 5; align-self: center; justify-self: end; font-family: var(--font-hebrew); font-size: 2.2rem; font-weight: 700; color: var(--color-text); line-height: 1; padding-left: 1rem; } .search-result-card[data-type="letter"] .sr-hebrew, .search-result-card[data-type="niqqud"] .sr-hebrew { display: none; } .search-result-card[data-type="letter"] .sr-badge, .search-result-card[data-type="niqqud"] .sr-badge { grid-column: 3; grid-row: -1; align-self: end; justify-self: end; } /* Highlight */ .search-hl { background: rgba(46, 125, 50, 0.15); color: inherit; border-radius: 2px; padding: 0 1px; } .search-more { text-align: center; color: var(--color-text-light); font-size: 0.85rem; margin-top: 1rem; } /* Responsive */ @media (max-width: 600px) { .search-result-card { grid-template-columns: 1fr; gap: 0.2rem; } .sr-hebrew, .sr-display-char { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; font-size: 1.15rem; } .sr-display-char { font-size: 1.8rem; } .search-result-card[data-type="letter"] .sr-hebrew, .search-result-card[data-type="niqqud"] .sr-hebrew { display: none; } .sr-badge { margin-bottom: 0.15rem; } } /* --- Phrase Cards --- */ .phrase-section { margin-bottom: 2rem; } .phrase-section h2 { color: var(--color-primary); font-size: 1.2rem; margin-bottom: 0.75rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--color-primary); } .phrase-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; } .phrase-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.1rem 1.5rem; padding: 0.75rem 1rem; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); transition: box-shadow var(--transition); } .phrase-card:hover { box-shadow: var(--shadow); } .phrase-english { font-weight: 700; font-size: 0.95rem; color: var(--color-text); } .phrase-hebrew { font-family: var(--font-hebrew); font-size: 1.4rem; font-weight: 700; direction: rtl; color: var(--color-text); grid-row: 1 / 3; grid-column: 2; align-self: center; line-height: 1.3; } .phrase-translit { font-style: italic; color: var(--color-text-light); font-size: 0.85rem; grid-column: 1; } .phrase-note { grid-column: 1 / -1; font-size: 0.8rem; color: var(--color-primary); font-style: italic; margin-top: 0.2rem; } /* --- Words Index enhancements --- */ .word-index-hebrew { font-family: var(--font-hebrew); font-weight: 700; direction: rtl; unicode-bidi: isolate; font-size: 1rem; color: var(--color-text); } .word-index-translit { font-style: italic; color: var(--color-text-light); font-size: 0.85rem; } .word-list li { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } /* ========================================================================== Dark Mode Toggle ========================================================================== */ .theme-toggle { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--color-primary); color: #fff; font-size: 1.3rem; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.2); transition: background var(--transition), transform var(--transition); display: flex; align-items: center; justify-content: center; } @media (max-width: 600px) { .theme-toggle { width: 36px; height: 36px; bottom: 0.75rem; right: 0.75rem; font-size: 1rem; } } .theme-toggle:hover { background: var(--color-primary-dark); transform: scale(1.1); } /* Button pulse on first visit */ @keyframes themePulse { 0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.2); } 50% { box-shadow: 0 2px 20px rgba(106,168,71,0.5); } } .theme-toggle--pulse { animation: themePulse 2s ease 2; } /* --- Dark mode adjustments for specific elements --- */ [data-theme="dark"] .vocab-header { background: var(--color-primary-dark); } [data-theme="dark"] .site-header { background: var(--color-bg); } [data-theme="dark"] .site-nav { background: transparent; } [data-theme="dark"] .hero { background: var(--color-bg); } [data-theme="dark"] .alphabet-table th { background: var(--color-primary-dark); } [data-theme="dark"] .search-result-card, [data-theme="dark"] .quiz-choice-btn { background: var(--card-bg); color: var(--color-text); } [data-theme="dark"] .search-form input[type="search"] { background: var(--card-bg); color: var(--color-text); border-color: var(--color-bg-dark); } [data-theme="dark"] .filter-chip { background: var(--card-bg); border-color: var(--color-bg-dark); color: var(--color-text); } [data-theme="dark"] .filter-chip.active { background: var(--color-primary); color: #fff; } [data-theme="dark"] .search-category-filter select { background: var(--card-bg); color: var(--color-text); border-color: var(--color-bg-dark); } [data-theme="dark"] .search-hl { background: rgba(117, 165, 75, 0.25); } [data-theme="dark"] .badge-word { background: #1B5E2033; color: #81c784; } [data-theme="dark"] .badge-phrase { background: #0d47a133; color: #64b5f6; } [data-theme="dark"] .badge-letter { background: #bf360c33; color: #ffab91; } [data-theme="dark"] .badge-niqqud { background: #4a148c33; color: #ce93d8; } [data-theme="dark"] .sr-ntype { background: #4a148c33; color: #ce93d8; } [data-theme="dark"] .progress-dashboard { background: var(--card-bg); border-color: var(--color-bg-dark); } [data-theme="dark"] .tip { background: var(--color-bg-light); } [data-theme="dark"] .category-card, [data-theme="dark"] .vocab-entry, [data-theme="dark"] .vocab-activity-btn { background: var(--card-bg); border: var(--card-border); } [data-theme="dark"] .vocab-activity-btn.flashcard-trigger { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); } /* ========================================================================== Responsive Breakpoints ========================================================================== */ /* Mobile — category grid 2 columns */ @media (max-width: 767px) { .category-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .feature-grid { grid-template-columns: 1fr; } } /* Tablet (768px+) */ @media (min-width: 768px) { .phrase-grid { grid-template-columns: 1fr 1fr; } .nav-toggle { display: none; } .site-nav > ul { display: flex !important; } .content-area { padding: 2rem clamp(1.25rem, 4vw, 3rem); } .vocab-grid { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr 1fr; } .feature-card:first-child { grid-column: 1 / -1; padding: 2rem; } .feature-card:first-child img { width: 140px; height: 140px; } .feature-card:first-child h3 { font-size: 1.3rem; } .feature-card:first-child .btn { font-size: 1rem; padding: 0.6rem 1.5rem; } .category-grid { grid-template-columns: repeat(4, 1fr); } } /* Desktop (1024px+) */ @media (min-width: 1024px) { .content-area { padding: 2.5rem clamp(1.25rem, 4vw, 3rem); } .hero { padding: clamp(2rem, 10vw, 6rem) 2.5rem; } } /* ===== Hero CTA Button ===== */ .btn-hero { display: inline-block; padding: 1.1rem 3rem; font-size: 1.15rem; background: var(--color-primary); color: #fff; border: none; border-radius: 100px; font-weight: 700; transition: background 0.2s, color 0.2s, transform 0.2s; } .btn-hero:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-1px); } /* ===== Dark mode overrides for hero button ===== */ [data-theme="dark"] .btn-hero { background: var(--color-primary); color: #fff; } [data-theme="dark"] .btn-hero:hover { background: var(--color-primary-dark); color: #fff; } /* ========================================================================== Homepage Conversion Optimization (Psychology Agent Recommendations) Items 1-7: sidebar removal, dashboard hide, try-section expand, word counts, persistent CTA, social proof, sidebar intact on interior ========================================================================== */ .is-homepage .content-area { display: block !important; max-width: var(--max-width); margin: 0 auto; } @media (min-width: 768px) { .is-homepage .content-area { grid-template-columns: 1fr !important; padding: 2rem clamp(1.25rem, 4vw, 3rem); } } @media (min-width: 1024px) { .is-homepage .content-area { padding: 2.5rem clamp(1.25rem, 4vw, 3rem); } } /* --- Item 2: Hide progress dashboard for new visitors --- */ /* Dashboard is already display:none by default and only shown via JS when user has activity. The welcome-strip is shown for new visitors. No additional CSS needed — handled in includes.js initDashboard(). */ /* --- Item 3: Expand "Try It Now" section to full width --- */ .try-section { background: var(--color-bg-light); border-radius: var(--radius); padding: 2rem 1.5rem; margin: 1.5rem 0; } .try-section .home-section-title { margin-top: 0; text-align: center; } .try-section .try-cards { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; } .try-section-cta { text-align: center; margin-top: 0.5rem; } @media (max-width: 767px) { .try-section .try-cards { grid-template-columns: repeat(2, 1fr); } .try-section { padding: 1.5rem 1rem; } } @media (min-width: 768px) and (max-width: 1023px) { .try-section .try-cards { grid-template-columns: repeat(3, 1fr); } } /* --- Item 4: Word counts on category cards --- */ .category-count { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); margin-top: -0.25rem; } .category-card:hover .category-count { color: var(--color-primary); } /* --- Item 5: Persistent CTA bar --- */ .home-cta-bar { text-align: center; margin: 1.5rem 0 2rem; } .btn-cta { font-size: 1.1rem; padding: 0.8rem 2rem; } /* ========================================================================== Review Weak Words ========================================================================== */ #review-section { margin-bottom: 2rem; } .review-subtitle { text-align: center; color: var(--color-text-light); margin: 0 0 1rem; font-size: 1rem; } .review-word-list { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.5rem 0 1rem; -webkit-overflow-scrolling: touch; } .review-word-card { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; background: var(--card-bg, #fff); border: var(--card-border, 1px solid #e0e0e0); border-radius: 10px; padding: 0.75rem 1rem; min-width: 110px; text-align: center; } .review-word-img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; } .review-word-hebrew { font-family: 'Heebo', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--color-text); } .review-word-english { font-size: 0.85rem; color: var(--color-text-light); } .review-word-accuracy { font-size: 0.75rem; font-weight: 600; color: #e74c3c; } .review-trigger { background: var(--color-secondary) !important; color: #fff !important; } /* --- Save to My Words button on vocab entries --- */ .save-word-btn { position: absolute; bottom: 0.75rem; left: 1rem; background: none; border: none; color: var(--color-text); font-size: 0.7rem; font-weight: 600; padding: 0; cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s; z-index: 2; white-space: nowrap; } .vocab-entry:hover .save-word-btn { opacity: 1; } .save-word-btn:hover { color: var(--color-text); } .save-word-btn.saved { opacity: 1; color: var(--color-text); } .save-word-btn.saved:hover { color: #e74c3c; } .vocab-entry { position: relative; } /* --- Nav basket count badge --- */ @keyframes badgeBounce { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 50% { transform: scale(0.9); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } } .nav-basket-count { display: inline-flex; align-items: center; justify-content: center; background: var(--color-secondary, #F9864D); color: #fff; font-size: 0.6rem; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; line-height: 1; vertical-align: text-bottom; position: relative; top: -1px; } .nav-basket-count.bounce { animation: badgeBounce 0.5s ease; } /* --- My Words: Homepage section --- */ .my-words-subtitle { text-align: center; color: var(--color-text-light); margin: 0 0 1rem; font-size: 1rem; } /* --- My Words: Dedicated page --- */ .my-words-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .my-words-entry { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--card-bg, #fff); border: var(--card-border, 1px solid #e0e0e0); border-radius: 12px; padding: 1.25rem 0.75rem 1rem; transition: opacity 0.3s, box-shadow 0.2s, transform 0.2s; } .my-words-entry:hover { box-shadow: var(--shadow-hover, 0 4px 16px rgba(0,0,0,0.1)); transform: translateY(-2px); } .my-words-entry-img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; margin-bottom: 0.5rem; } .my-words-entry-text { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 100%; } .my-words-entry-hebrew { font-family: 'Heebo', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--color-text); } .my-words-entry-translit { font-size: 0.8rem; color: var(--color-text-light); font-style: italic; } .my-words-entry-english { font-size: 0.9rem; font-weight: 600; color: var(--color-primary); margin-top: 0.15rem; } .my-words-entry-category { font-size: 0.7rem; color: var(--color-text-light); background: var(--color-bg-light, #f5f5f5); padding: 0.15rem 0.5rem; border-radius: 20px; margin-top: 0.3rem; text-decoration: none; transition: background 0.2s, color 0.2s; } .my-words-entry-category:hover { background: var(--color-primary); color: #fff; } .my-words-entry .audio-btn { margin-top: 0.5rem; } .my-words-remove-btn { position: absolute; top: 0.3rem; right: 0.3rem; background: none; border: none; cursor: pointer; padding: 0.2rem; color: var(--color-text-light); opacity: 0; transition: opacity 0.2s, color 0.2s; z-index: 2; } .my-words-entry:hover .my-words-remove-btn { opacity: 0.5; } .my-words-remove-btn:hover { opacity: 1 !important; color: #e74c3c; } @keyframes undoFadeIn { from { opacity: 0; } to { opacity: 1; } } .my-words-undo-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: var(--card-bg, #fff); border: 2px dashed var(--color-text-light); border-radius: 12px; padding: 1.25rem 0.75rem; transition: opacity 1.5s ease; animation: undoFadeIn 0.5s ease; } .my-words-undo-text { font-size: 0.85rem; color: var(--color-text-light); } .my-words-undo { background: var(--color-primary); color: #fff; border: none; border-radius: 6px; padding: 0.35rem 1rem; font-size: 0.85rem; cursor: pointer; transition: background 0.2s; } .my-words-undo:hover { background: var(--color-primary-dark); } /* --- Item 6: Social proof in trust strip (HTML updated, styled via existing .trust-strip) --- */ /* --- Item 7: Sidebar on interior pages is unchanged — default CSS applies --- */ /* ========================================================================== Daily Challenge ========================================================================== */ .dc-hero { text-align: center; padding: 3rem 1rem 2rem; } .dc-title { font-size: 2.4rem; color: var(--color-text); margin: 0 0 0.5rem; } .dc-subtitle { color: var(--color-text-light); font-size: 1.1rem; max-width: 480px; margin: 0 auto 1rem; line-height: 1.5; } .dc-date { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 1.5rem; } .dc-start-btn { font-size: 1.15rem; padding: 0.85rem 2.5rem; } /* --- Quiz area --- */ .dc-quiz-area { max-width: 560px; margin: 0 auto; padding: 0 1rem; } .dc-progress-bar { height: 6px; background: var(--color-bg-dark); border-radius: 3px; overflow: hidden; margin-bottom: 1rem; } .dc-progress-fill { height: 100%; background: var(--color-primary); border-radius: 3px; transition: width 0.4s ease; } .dc-counter { text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--color-text-light); margin-bottom: 0.25rem; } .dc-topic-badge { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--color-primary); background: var(--color-success-bg); padding: 0.15rem 0.75rem; border-radius: 12px; margin: 0 auto 1.5rem; width: fit-content; } .dc-question { text-align: center; } .dc-prompt { margin-bottom: 1.5rem; } .dc-prompt-img { width: 100px; height: 100px; object-fit: contain; margin-bottom: 0.75rem; border-radius: var(--radius); } .dc-prompt-hebrew { font-family: var(--font-hebrew); font-size: 2.4rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; } .dc-prompt-translit { font-size: 1rem; color: var(--color-text-light); } /* --- Choices --- */ .dc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; } .dc-choice-btn { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem; font-size: 1.05rem; font-family: var(--font-main); background: var(--card-bg); border: 2px solid var(--color-bg-dark); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition), background var(--transition); text-align: left; } .dc-choice-btn:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-success-bg); } .dc-choice-btn:disabled { cursor: default; opacity: 0.85; } .dc-choice-btn.dc-correct { border-color: var(--color-success); background: var(--color-success-bg); opacity: 1; } .dc-choice-btn.dc-wrong { border-color: var(--color-error); background: var(--color-error-bg); opacity: 1; } .dc-key-hint { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 0.75rem; font-weight: 700; color: var(--color-text-light); background: var(--color-bg-light); border-radius: 4px; flex-shrink: 0; } /* --- Feedback --- */ .dc-feedback { text-align: center; font-size: 1.1rem; padding: 0.75rem; margin-bottom: 1rem; border-radius: var(--radius); background: var(--color-bg-light); } .dc-fb-correct { color: var(--color-success); font-weight: 700; } .dc-fb-wrong { color: var(--color-error); font-weight: 700; } /* --- Summary --- */ .dc-summary { text-align: center; padding: 2rem 1rem; max-width: 560px; margin: 0 auto; } .dc-score-circle { width: 130px; height: 130px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 1.5rem; border: 5px solid; } .dc-score-num { font-size: 3rem; font-weight: 900; line-height: 1; } .dc-score-label { font-size: 0.8rem; } .dc-score-great { border-color: var(--color-success); color: var(--color-success); } .dc-score-good { border-color: #2196F3; color: #2196F3; } .dc-score-ok { border-color: #FF9800; color: #FF9800; } .dc-score-low { border-color: var(--color-error); color: var(--color-error); } .dc-score-circle .dc-score-label { color: inherit; opacity: 0.7; } .dc-result-title { font-size: 1.5rem; margin: 0 0 1.5rem; color: var(--color-text); } /* --- Missed words review --- */ .dc-missed-list h3 { font-size: 1rem; color: var(--color-text-light); margin: 0 0 0.75rem; } .dc-missed-word { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 0.5rem; align-items: center; padding: 0.6rem 0.75rem; background: var(--color-bg-light); border-radius: var(--radius); margin-bottom: 0.5rem; font-size: 0.95rem; } .dc-missed-hebrew { font-family: var(--font-hebrew); font-weight: 700; font-size: 1.1rem; } .dc-missed-translit { color: var(--color-text-light); font-size: 0.85rem; } .dc-missed-english { font-weight: 600; text-align: right; } .dc-missed-topic { font-size: 0.7rem; font-weight: 600; color: var(--color-primary); background: var(--color-success-bg); padding: 0.1rem 0.5rem; border-radius: 8px; white-space: nowrap; } /* --- Summary actions --- */ .dc-summary-actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; } .dc-btn { padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: var(--radius); } .dc-btn-secondary { background: var(--color-bg-light); color: var(--color-text); border: 2px solid var(--color-bg-dark); text-decoration: none; } .dc-btn-secondary:hover { border-color: var(--color-primary); } /* --- Mobile --- */ @media (max-width: 600px) { .dc-title { font-size: 1.8rem; } .dc-subtitle { font-size: 0.95rem; } .dc-prompt-hebrew { font-size: 2rem; } .dc-prompt-img { width: 80px; height: 80px; } .dc-choices { grid-template-columns: 1fr; } .dc-missed-word { grid-template-columns: 1fr 1fr; gap: 0.25rem; } .dc-missed-topic { grid-column: 1 / -1; justify-self: start; } }