/* ========================================================================== LANGUAGES-PAGE.CSS — scoped styles for languages-page.html. .card/.card-badge/.language-selection-wrapper/.languages-bubbly-grid/ .lang-bubble-card/.lang-flag-circle/.status-pill are all inherited from see-test.css (this page previously had no dedicated stylesheet at all, just an inline style="" on ). This file carries the "modern Bauhaus" redesign applied to a1-start.html/german-a1-stories-path-story-1.html/german-a1-practice-story-lesson.html/german-a1-1000-most-common-words.html: it redeclares the shared design tokens (--bg/--surface/--ink/--accent/ --gold/--line/--serif/--color-*) with the same values those pages use, plus the same redesigned navbar. Since this stylesheet only ever loads on this one page, every shared component that reads those tokens (.card, .status-pill, .lang-bubble-card) picks up the new palette here only — no other page is affected. See german-a1-stories-path-story-1.css for the fuller rationale (same pattern). ========================================================================== */ :root { --bg: #f7f2e7; --surface: #ffffff; --surface-2: #fbf7ee; --ink: #191726; --ink-soft: #5a5470; --ink-faint: #9089a3; --accent: #e0432b; --accent-2: #c23621; --accent-soft: rgba(224, 67, 43, 0.12); --gold: #b4870a; --gold-soft: rgba(239, 176, 0, 0.18); --line: #e7dec7; --shadow-sm: 0 1px 2px rgba(25, 23, 38, 0.06), 0 1px 1px rgba(25, 23, 38, 0.04); --shadow-md: 0 10px 24px -8px rgba(25, 23, 38, 0.16), 0 2px 8px -2px rgba(25, 23, 38, 0.06); --shadow-lg: 0 0 0 1px rgba(25, 23, 38, 0.04), 0 16px 40px -16px rgba(224, 67, 43, 0.28); --serif: "Futura", "Avenir Next", Avenir, "Century Gothic", system-ui, sans-serif; --line-strong: #d8cba8; /* --- A1 six-topic palette (Bauhaus retint, matches the other redesigned pages) --- */ --color-nom: #1d5fa6; --color-nom-bg: #e5eef8; --color-acc: #e0432b; --color-acc-bg: #fbe7e3; --color-irr: #b4870a; --color-irr-bg: #faf1d6; --color-coo: #0f7168; --color-coo-bg: #e2f2f0; --color-sub: #6c4ba6; --color-sub-bg: #eee8f7; --color-neg: #b8355f; --color-neg-bg: #f8e5eb; } @media (prefers-color-scheme: dark) { :root { --bg: #131220; --surface: #1c1a2c; --surface-2: #211f34; --ink: #f3eee1; --ink-soft: #b3abc9; --ink-faint: #867f9c; --accent: #ff5b41; --accent-2: #ff7b62; --accent-soft: rgba(255, 91, 65, 0.16); --gold: #ffcb3d; --gold-soft: rgba(255, 203, 61, 0.18); --line: #33304a; --line-strong: #413c5c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.55); --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 44px -16px rgba(255, 91, 65, 0.35); --color-nom: #5b98e8; --color-nom-bg: rgba(91, 152, 232, 0.16); --color-acc: #ff5b41; --color-acc-bg: rgba(255, 91, 65, 0.16); --color-irr: #ffcb3d; --color-irr-bg: rgba(255, 203, 61, 0.18); --color-coo: #2fb6a8; --color-coo-bg: rgba(47, 182, 168, 0.16); --color-sub: #9a7bd6; --color-sub-bg: rgba(154, 123, 214, 0.18); --color-neg: #e06a94; --color-neg-bg: rgba(224, 106, 148, 0.18); } } /* Replaces the old inline style="background-color:#e9f3fd;display:flex;..." on — same layout, but themed and easy to find/change. */ .languages-page-body { background-color: var(--bg); display: flex; flex-direction: column; min-height: 100vh; } /* ================= NAVBAR (redesigned, scoped to this page only) ================= Identical to the other redesigned pages' navbar — see-test.css's shared .navbar/.brand-box/.dropdown-item rules still exist and are used by every other page unchanged; these selectors only apply here because this file is only ever linked from languages-page.html. */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 999; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand-mark { width: 34px; height: 34px; flex: 0 0 auto; } .brand-word { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--ink); } .brand-word b { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-links > a { font-family: var(--mono); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; padding: 9px 14px; border-radius: 8px; color: var(--ink-soft); transition: background 0.15s ease, color 0.15s ease; } .nav-links > a:hover { background: var(--surface-2); color: var(--ink); } .nav-links > a.active { color: var(--accent); } .navbar .dropdown-item { position: relative; } .navbar .dropdown-trigger { display: flex; align-items: center; gap: 5px; cursor: pointer; font-family: var(--mono); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 9px 14px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; border: none; background: none; transition: background 0.15s ease, color 0.15s ease; } .navbar .dropdown-trigger:hover, .navbar .dropdown-item.open .dropdown-trigger { background: var(--surface-2); color: var(--ink); } .navbar .dropdown-trigger.active { color: var(--accent); } .navbar .caret { transition: transform 0.18s ease; font-size: 0.7em; } .navbar .dropdown-item.open .caret { transform: rotate(180deg); } .navbar .dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } .navbar .dropdown-item.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .navbar .dropdown-menu a { padding: 8px 12px; border-radius: 8px; font-size: 0.86rem; text-decoration: none; color: var(--ink-soft); display: block; transition: background 0.12s ease, color 0.12s ease; } .navbar .dropdown-menu a:hover { background: var(--surface-2); color: var(--ink); } .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } @media (max-width: 860px) { .nav-links { position: fixed; inset: 60px 0 auto 0; background: var(--surface); flex-direction: column; align-items: stretch; padding: 10px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; gap: 2px; } .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; } .nav-links > a, .navbar .dropdown-trigger { width: 100%; } .navbar .dropdown-menu { position: static; box-shadow: none; border: none; padding-left: 14px; margin-top: 0; opacity: 1; visibility: visible; transform: none; display: none; } .navbar .dropdown-item.open .dropdown-menu { display: flex; } .nav-toggle { display: flex; } } /* ================= PAGE ================= */ .language-selection-wrapper { padding-top: 88px; } /* --- Title card: same left-aligned Bauhaus treatment as the other pages' hero cards — this page's version previously centered everything via see-test.css's shared rule (text-align:center; flex column centered), the same pattern found and fixed on a1-start.html/german-a1-1000-most-common-words.html. --- */ .card.platform-title-card { display: block; text-align: left; position: relative; isolation: isolate; overflow: hidden; padding: 44px 32px; border-radius: 26px; box-shadow: var(--shadow-lg); } .card.platform-title-card::before, .card.platform-title-card::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; } .card.platform-title-card::before { width: 220px; height: 220px; right: -80px; top: -90px; background: radial-gradient(circle at 30% 30%, var(--gold), transparent 70%); opacity: 0.5; } .card.platform-title-card::after { width: 140px; height: 140px; right: 50px; top: 90px; border: 20px solid var(--color-nom); opacity: 0.14; } .card-badge.platform-badge { position: static; display: inline-flex; margin: 0 0 14px; } .card.platform-title-card h2 { font-weight: 800 !important; letter-spacing: -0.01em !important; margin: 0 0 8px !important; } .card.platform-title-card p { max-width: 640px; } /* --- Language bubble cards: same shape language as the site's other cards (rounded, soft-glow shadow on hover), flags are left completely untouched — they're real national flag colors, not decorative brand colors, so they don't get retinted. --- */ .lang-bubble-card { border-radius: 18px; } .lang-bubble-card.track-active:hover { border-color: var(--accent); } .lang-card-details h3 { font-weight: 800; letter-spacing: -0.005em; } .status-pill { letter-spacing: 0.03em; } .lang-arrow-action { font-family: var(--serif); } /* --- Responsive --- */ @media (max-width: 640px) { .card.platform-title-card { padding: 32px 22px; } }