/* ═══════════════════════════════════════════════════════════════════ BABEL FREE — Brand Design System One source of truth for the marketing + reference surfaces: index.html, dictionary-word.php, dictionary-conjugation.php, dictionary-conjugation-index.php, dictionary-landing.php ═══════════════════════════════════════════════════════════════════ */ /* ─── Design tokens, pulled from the logo + OG card ──────────────── */ :root { /* Core palette — the cobalt + cream + ink chord */ --bf-paper: #FAF6EE; /* OG-card cream */ --bf-paper-2: #F2EBDC; /* slight depth on alternating panels */ --bf-ink: #1A1815; /* warm near-black */ --bf-ink-2: #45403A; /* secondary text */ --bf-mute: #7A7268; /* tertiary, IPA, captions */ --bf-hair: #E5DECC; /* hairline rules */ --bf-cobalt: #1E3FA8; /* icon background, primary brand */ --bf-cobalt-deep: #15287A; /* gradient depth */ --bf-cobalt-soft: #4A6BD3; /* hover/lift state on cobalt elements */ /* Three swooshes — the product pillars */ --bf-orange: #F47C2A; /* DICTIONARY pillar */ --bf-orange-deep: #D86617; --bf-lime: #6FCF4A; /* CONJUGATIONS pillar */ --bf-lime-deep: #4FA82F; --bf-magenta: #E94B7C; /* COURSE pillar */ --bf-magenta-deep: #C8305C; /* Default pillar — overridden by .pillar-* classes on the body or container */ --pillar: var(--bf-orange); --pillar-deep: var(--bf-orange-deep); --pillar-soft: #FCE8D6; /* very light orange for hover bands */ /* Typography */ --bf-display: 'Fraunces', 'Iowan Old Style', 'Palatino', Georgia, serif; --bf-body: 'Fraunces', 'Iowan Old Style', 'Palatino', Georgia, serif; --bf-ui: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Shadow stack — warm, not blue-black */ --bf-shadow-1: 0 1px 2px rgba(26,24,21,0.05), 0 2px 6px rgba(26,24,21,0.04); --bf-shadow-2: 0 2px 6px rgba(26,24,21,0.06), 0 12px 32px rgba(26,24,21,0.08); --bf-shadow-3: 0 12px 40px rgba(21,40,122,0.18), 0 4px 12px rgba(26,24,21,0.06); /* Motion */ --bf-ease: cubic-bezier(0.23, 1, 0.32, 1); --bf-fast: 0.18s; --bf-medium: 0.32s; /* Spacing rhythm */ --bf-radius-sm: 6px; --bf-radius: 12px; --bf-radius-lg: 20px; } /* Pillar overrides — apply to or any wrapper */ .pillar-dictionary { --pillar: var(--bf-orange); --pillar-deep: var(--bf-orange-deep); --pillar-soft: #FCE8D6; } .pillar-conjugations { --pillar: var(--bf-lime); --pillar-deep: var(--bf-lime-deep); --pillar-soft: #E1F5D6; } .pillar-course { --pillar: var(--bf-magenta); --pillar-deep: var(--bf-magenta-deep); --pillar-soft: #FBDDE6; } /* ─── Reset & body baseline ──────────────────────────────────────── */ .bf-scope, .bf-scope * { box-sizing: border-box; } body { font-family: var(--bf-ui); font-size: 17px; line-height: 1.65; color: var(--bf-ink); background: var(--bf-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; } ::selection { background: var(--pillar); color: #fff; } ::-moz-selection { background: var(--pillar); color: #fff; } /* Soft warm scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bf-paper-2); } ::-webkit-scrollbar-thumb { background: var(--bf-hair); border-radius: 6px; border: 2px solid var(--bf-paper-2); } ::-webkit-scrollbar-thumb:hover { background: var(--bf-mute); } /* ─── Global header & navigation ─────────────────────────────────── */ .header { position: fixed; top: 0; left: 0; right: 0; width: 100%; background: rgba(250, 246, 238, 0.92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--bf-hair); box-shadow: none; z-index: 1000; transition: background var(--bf-fast) var(--bf-ease); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; height: 72px; display: flex; align-items: center; justify-content: space-between; } .logo-brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--bf-ink); } .main-logo { width: auto; height: 48px; border-radius: 0; overflow: visible; box-shadow: none; border: none; display: flex; align-items: center; flex-shrink: 0; } .main-logo img { height: 48px; width: auto; object-fit: contain; object-position: left center; max-width: none; } .brand-name { font-family: var(--bf-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; color: var(--bf-ink); } .nav-menu { display: flex; gap: 1.75rem; list-style: none; align-items: center; margin: 0; padding: 0; } .nav-link { font-family: var(--bf-ui); font-size: 0.94rem; font-weight: 500; color: var(--bf-ink); text-decoration: none; position: relative; padding: 0.4rem 0; transition: color var(--bf-fast) var(--bf-ease); } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--pillar); transform: scaleX(0); transform-origin: left; transition: transform var(--bf-medium) var(--bf-ease); } .nav-link:hover, .nav-link.active { color: var(--bf-cobalt); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .cta-nav { background: var(--bf-cobalt); color: #fff; font-family: var(--bf-ui); font-weight: 700; font-size: 0.92rem; padding: 0.7rem 1.4rem; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 18px rgba(30, 63, 168, 0.22); transition: transform var(--bf-fast) var(--bf-ease), box-shadow var(--bf-fast) var(--bf-ease), background var(--bf-fast) var(--bf-ease); } .cta-nav:hover { background: var(--bf-cobalt-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30, 63, 168, 0.32); } /* Mobile menu */ .mobile-menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.5rem; } .menu-bar { width: 24px; height: 2px; background: var(--bf-ink); border-radius: 2px; transition: transform var(--bf-fast) var(--bf-ease); } .mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; background: var(--bf-paper); border-bottom: 1px solid var(--bf-hair); box-shadow: 0 12px 24px rgba(26,24,21,0.08); padding: 0.5rem 0; z-index: 999; } .mobile-menu.active { display: flex; flex-direction: column; } .mobile-menu a { display: block; padding: 0.85rem 2rem; color: var(--bf-ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--bf-hair); } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu a:hover { background: var(--pillar-soft); color: var(--bf-cobalt); } /* ─── Breadcrumb ─────────────────────────────────────────────────── */ .breadcrumb { max-width: 980px; margin: 0 auto; padding: 6.5rem 2rem 0; font-family: var(--bf-ui); font-size: 0.86rem; color: var(--bf-mute); letter-spacing: 0.01em; } .breadcrumb a { color: var(--bf-cobalt); text-decoration: none; transition: color var(--bf-fast) var(--bf-ease); } .breadcrumb a:hover { color: var(--pillar-deep); text-decoration: underline; text-underline-offset: 3px; } /* ─── Reusable typography utilities ──────────────────────────────── */ .bf-smcp { font-family: var(--bf-ui); font-feature-settings: "smcp" 1, "c2sc" 1; text-transform: lowercase; letter-spacing: 0.08em; font-weight: 600; color: var(--bf-mute); } .bf-smcp-strong { color: var(--bf-cobalt); } .bf-onum { font-feature-settings: "onum" 1, "kern" 1; } .bf-rule { border: 0; height: 1px; background: var(--bf-hair); margin: 2.5rem 0; } .bf-rule-pillar { border: 0; height: 2px; background: var(--pillar); width: 80px; margin: 1rem 0 1.5rem; } /* ─── Hero treatments ────────────────────────────────────────────── */ /* Cream-paper hero — for dictionary entries, conjugations */ .bf-hero-paper { background: var(--bf-paper); padding: 2.5rem 0 1.25rem; border-bottom: 1px solid var(--bf-hair); margin-bottom: 2rem; } .bf-hero-paper .bf-hero-headword { font-family: var(--bf-display); font-weight: 600; font-size: clamp(3rem, 8vw, 5.6rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--bf-ink); margin: 0; font-variation-settings: "opsz" 144; } .bf-hero-paper .bf-hero-rule { display: block; width: 84px; height: 4px; background: var(--pillar); margin: 1rem 0 1.25rem; border-radius: 2px; } .bf-hero-paper .bf-hero-meta { font-family: var(--bf-ui); font-size: 0.92rem; color: var(--bf-mute); display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; } .bf-hero-paper .bf-hero-meta > span:not(:last-child)::after { content: '·'; margin-left: 0.55rem; color: var(--bf-hair); } .bf-hero-paper .bf-hero-ipa { font-family: var(--bf-display); font-style: italic; font-size: 1.4rem; color: var(--bf-mute); margin: 0.4rem 0 0.85rem; display: block; } .bf-hero-paper .bf-hero-ipa::before { content: '/'; opacity: 0.55; margin-right: 2px; } .bf-hero-paper .bf-hero-ipa::after { content: '/'; opacity: 0.55; margin-left: 2px; } .bf-hero-paper .bf-hero-gloss { font-family: var(--bf-display); font-size: 1.35rem; color: var(--bf-ink-2); margin-top: 0.5rem; font-weight: 400; } /* Cobalt-sky hero — for landing + dictionary landing */ .bf-hero-sky { background: linear-gradient(165deg, var(--bf-cobalt) 0%, var(--bf-cobalt-deep) 100%); color: #fff; position: relative; overflow: hidden; padding: 7rem 2rem 4rem; text-align: center; } .bf-hero-sky::before, .bf-hero-sky::after { content: ''; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: 0.55; } /* The three swooshes drift behind the hero */ .bf-hero-sky::before { top: -120px; left: -80px; width: 380px; height: 380px; background: radial-gradient(circle, var(--bf-orange) 0%, transparent 70%); } .bf-hero-sky::after { bottom: -140px; right: -60px; width: 420px; height: 420px; background: radial-gradient(circle, var(--bf-magenta) 0%, transparent 70%); } .bf-hero-sky .bf-hero-swoosh-lime { position: absolute; top: 30%; left: 50%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--bf-lime) 0%, transparent 70%); filter: blur(60px); opacity: 0.35; transform: translate(-50%, -50%); pointer-events: none; } .bf-hero-sky-content { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; } /* ─── Pillar buttons ─────────────────────────────────────────────── */ .btn-primary, .bf-btn { display: inline-block; background: var(--pillar); color: #fff; font-family: var(--bf-ui); font-weight: 700; font-size: 1rem; text-decoration: none; padding: 0.95rem 1.85rem; border: none; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); cursor: pointer; transition: transform var(--bf-fast) var(--bf-ease), box-shadow var(--bf-fast) var(--bf-ease), background var(--bf-fast) var(--bf-ease); } .btn-primary:hover, .bf-btn:hover { background: var(--pillar-deep); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); } .btn-secondary, .bf-btn-ghost { display: inline-block; background: transparent; color: var(--bf-cobalt); font-family: var(--bf-ui); font-weight: 600; font-size: 1rem; text-decoration: none; padding: 0.9rem 1.8rem; border: 1.5px solid var(--bf-cobalt); border-radius: 999px; transition: all var(--bf-fast) var(--bf-ease); } .btn-secondary:hover, .bf-btn-ghost:hover { background: var(--bf-cobalt); color: #fff; transform: translateY(-2px); } /* Back link / inline links */ .back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--bf-cobalt); font-family: var(--bf-ui); font-weight: 600; font-size: 0.92rem; text-decoration: none; margin-bottom: 1.25rem; } .back-link:hover { color: var(--pillar-deep); text-decoration: underline; text-underline-offset: 3px; } /* ─── Search box (cream paper variant) ───────────────────────────── */ .bf-search { display: flex; align-items: stretch; width: 100%; max-width: 600px; margin: 0 auto; background: #fff; border: 1.5px solid var(--bf-hair); border-radius: 14px; box-shadow: var(--bf-shadow-1); overflow: hidden; transition: border-color var(--bf-fast) var(--bf-ease), box-shadow var(--bf-fast) var(--bf-ease); } .bf-search:focus-within { border-color: var(--bf-cobalt); box-shadow: 0 0 0 4px rgba(30, 63, 168, 0.12), var(--bf-shadow-2); } .bf-search input[type="text"] { flex: 1; border: none; background: transparent; padding: 1rem 1.2rem; font-family: var(--bf-ui); font-size: 1.05rem; color: var(--bf-ink); outline: none; min-width: 0; } .bf-search input::placeholder { color: var(--bf-mute); } .bf-search select { border: none; background: var(--bf-paper-2); padding: 0 0.85rem; font-family: var(--bf-ui); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bf-ink); cursor: pointer; border-right: 1px solid var(--bf-hair); outline: none; } .bf-search button { border: none; background: var(--bf-cobalt); color: #fff; padding: 0 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--bf-fast) var(--bf-ease); } .bf-search button:hover { background: var(--bf-cobalt-deep); } .bf-search button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; } /* Cobalt-sky variant — for hero search */ .bf-hero-sky .bf-search { background: rgba(255, 255, 255, 0.96); border-color: rgba(255, 255, 255, 0.4); } /* ─── Inline meta (POS · gender · CEFR) ──────────────────────────── */ .bf-pos { font-family: var(--bf-ui); font-feature-settings: "smcp" 1; text-transform: lowercase; letter-spacing: 0.08em; font-weight: 600; font-size: 0.95rem; color: var(--bf-cobalt); } .bf-gender { color: var(--bf-mute); font-style: italic; } .bf-cefr { font-family: var(--bf-ui); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--pillar-deep); background: var(--pillar-soft); padding: 0.15rem 0.55rem; border-radius: 4px; } .bf-freq { color: var(--bf-mute); font-style: italic; font-size: 0.92rem; } .bf-irr { color: var(--bf-magenta); font-style: italic; font-weight: 600; } /* ─── Section card (paper, restrained) ───────────────────────────── */ .bf-section { background: transparent; border: 0; padding: 0; margin: 0 0 2.5rem; } .bf-section h2, .bf-section .bf-section-title { font-family: var(--bf-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.005em; color: var(--bf-ink); margin: 0 0 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--bf-hair); display: flex; align-items: baseline; gap: 0.6rem; } .bf-section h2::before, .bf-section .bf-section-title::before { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--pillar); border-radius: 50%; transform: translateY(-2px); flex-shrink: 0; } /* ─── Definition list ────────────────────────────────────────────── */ .bf-def { font-family: var(--bf-body); font-size: 1.18rem; line-height: 1.65; color: var(--bf-ink); margin: 0; } ol.bf-def-list { list-style: none; padding-left: 0; counter-reset: def-counter; margin: 0; } ol.bf-def-list li { position: relative; padding-left: 2.5rem; margin-bottom: 1.1rem; font-family: var(--bf-body); font-size: 1.12rem; line-height: 1.65; color: var(--bf-ink); } ol.bf-def-list li::before { counter-increment: def-counter; content: counter(def-counter); position: absolute; left: 0; top: 0.05rem; font-family: var(--bf-display); font-feature-settings: "onum" 1; font-weight: 600; font-size: 1.3rem; color: var(--pillar); width: 1.8rem; } .bf-def-note { margin-top: 0.4rem; color: var(--bf-mute); font-style: italic; font-size: 0.95rem; line-height: 1.55; } .def-word-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(30, 63, 168, 0.4); transition: color var(--bf-fast) var(--bf-ease), border-color var(--bf-fast) var(--bf-ease); } .def-word-link:hover { color: var(--bf-cobalt); border-bottom-color: var(--bf-cobalt); } /* ─── Examples (italic, gold-rule indent) ────────────────────────── */ .bf-example { font-family: var(--bf-body); font-style: italic; font-size: 1.1rem; line-height: 1.6; color: var(--bf-ink-2); margin: 0.85rem 0 0.4rem; padding: 0.1rem 0 0.1rem 1.2rem; border-left: 3px solid var(--pillar); background: transparent; border-radius: 0; } .bf-example-trans { font-family: var(--bf-ui); font-style: normal; font-size: 0.94rem; color: var(--bf-mute); margin: 0 0 1.2rem 1.2rem; line-height: 1.55; } /* ─── Equivalents (bilingual table) ──────────────────────────────── */ .bf-equiv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem 2rem; } .bf-equiv-group { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.4rem 0; border-top: 1px solid var(--bf-hair); } .bf-equiv-lang { font-family: var(--bf-ui); font-feature-settings: "smcp" 1, "c2sc" 1; text-transform: lowercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 700; color: var(--bf-mute); margin-bottom: 0.2rem; } .bf-equiv-word { font-family: var(--bf-body); font-size: 1.05rem; color: var(--bf-cobalt); text-decoration: none; line-height: 1.4; transition: color var(--bf-fast) var(--bf-ease); } .bf-equiv-word:hover { color: var(--pillar-deep); text-decoration: underline; text-underline-offset: 3px; } .bf-equiv-toggle { background: none; border: none; color: var(--bf-mute); font-family: var(--bf-ui); font-size: 0.8rem; cursor: pointer; padding: 0.1rem 0; text-align: left; margin-top: 0.2rem; } .bf-equiv-toggle:hover { color: var(--bf-cobalt); } .bf-equiv-more { display: none; } .bf-equiv-more.open { display: contents; } /* ─── See also (printed-dictionary cross-references) ─────────────── */ .bf-see-also-list { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; } .bf-see-also-list a { font-family: var(--bf-body); font-size: 1.05rem; color: var(--bf-cobalt); text-decoration: none; transition: color var(--bf-fast) var(--bf-ease); } .bf-see-also-list a:hover { color: var(--pillar-deep); text-decoration: underline; text-underline-offset: 3px; } .bf-see-also-list a:not(:last-child)::after { content: '·'; margin-left: 1rem; color: var(--bf-hair); text-decoration: none; display: inline-block; } /* ─── Closing CTA banner ─────────────────────────────────────────── */ .bf-closing { margin-top: 3rem; padding: 3rem 2rem; background: linear-gradient(165deg, var(--bf-cobalt) 0%, var(--bf-cobalt-deep) 100%); color: #fff; border-radius: var(--bf-radius-lg); text-align: center; position: relative; overflow: hidden; } .bf-closing::before { content: ''; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, var(--bf-magenta) 0%, transparent 70%); opacity: 0.5; filter: blur(40px); pointer-events: none; } .bf-closing h2 { font-family: var(--bf-display); font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; margin: 0 0 0.8rem; position: relative; } .bf-closing p { max-width: 540px; margin: 0 auto 1.5rem; color: rgba(255, 255, 255, 0.78); font-size: 1.05rem; position: relative; } .bf-closing .btn-primary, .bf-closing .bf-btn { background: #fff; color: var(--bf-cobalt-deep); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); position: relative; } .bf-closing .btn-primary:hover, .bf-closing .bf-btn:hover { background: var(--bf-paper); color: var(--pillar-deep); } /* ─── Footer (light, paper) ──────────────────────────────────────── */ .site-footer, .site-footer.light { background: var(--bf-paper-2); border-top: 1px solid var(--bf-hair); color: var(--bf-ink-2); font-family: var(--bf-ui); font-size: 0.94rem; line-height: 1.65; padding: 0; margin-top: 2rem; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .site-footer .footer-grid { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem 2rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } .site-footer .footer-grid-4 { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .site-footer .footer-logo { margin: 0 0 0.85rem; } .site-footer .footer-logo img { height: 52px; width: auto; display: block; } .site-footer .footer-desc { color: var(--bf-mute); font-size: 0.9rem; line-height: 1.7; margin: 0 0 1rem; max-width: 32rem; } .site-footer .footer-heading, .site-footer.light .footer-heading { font-family: var(--bf-ui); font-feature-settings: "smcp" 1, "c2sc" 1; text-transform: lowercase; letter-spacing: 0.1em; font-weight: 700; font-size: 0.78rem; color: var(--bf-cobalt); margin: 0 0 0.7rem; } .site-footer .footer-links { display: flex; flex-direction: column; gap: 0.45rem; } .site-footer .footer-links a, .site-footer.light .footer-links a { color: var(--bf-ink-2); text-decoration: none; font-size: 0.92rem; transition: color var(--bf-fast) var(--bf-ease); } .site-footer .footer-links a:hover, .site-footer.light .footer-links a:hover { color: var(--bf-cobalt); text-shadow: none; } .site-footer .footer-contact { display: flex; flex-direction: column; gap: 0.55rem; } .site-footer .footer-cta, .site-footer.light .footer-cta { display: inline-block; background: var(--bf-cobalt); color: #fff; font-weight: 600; text-decoration: none; padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 0.88rem; text-align: center; transition: transform var(--bf-fast) var(--bf-ease), background var(--bf-fast) var(--bf-ease), box-shadow var(--bf-fast) var(--bf-ease); } .site-footer .footer-cta:hover, .site-footer.light .footer-cta:hover { background: var(--bf-cobalt-deep); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30, 63, 168, 0.24); } .site-footer .footer-cta-secondary, .site-footer.light .footer-cta-secondary { display: inline-block; background: transparent; color: var(--bf-ink-2); font-weight: 600; text-decoration: none; padding: 0.55rem 1.1rem; border: 1px solid var(--bf-hair); border-radius: 999px; font-size: 0.88rem; text-align: center; transition: border-color var(--bf-fast) var(--bf-ease), color var(--bf-fast) var(--bf-ease); } .site-footer .footer-cta-secondary:hover, .site-footer.light .footer-cta-secondary:hover { border-color: var(--bf-cobalt); color: var(--bf-cobalt); box-shadow: none; } .site-footer .footer-social { display: flex; gap: 0.85rem; margin-top: 0.85rem; } .site-footer .footer-social a { color: var(--bf-mute); transition: color var(--bf-fast) var(--bf-ease), transform var(--bf-fast) var(--bf-ease); } .site-footer .footer-social a:hover, .site-footer.light .footer-social a:hover { color: var(--bf-cobalt); transform: translateY(-2px); } .site-footer .footer-bottom { border-top: 1px solid var(--bf-hair); text-align: center; padding: 1.2rem 2rem; } .site-footer .footer-bottom p { margin: 0; font-size: 0.82rem; color: var(--bf-mute); } .site-footer .footer-bottom a { color: var(--bf-mute); text-decoration: none; transition: color var(--bf-fast) var(--bf-ease); } .site-footer .footer-bottom a:hover { color: var(--bf-cobalt); } /* ─── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 900px) { .nav-menu { display: none; } .mobile-menu-toggle { display: flex; } .nav-container { padding: 0 1.25rem; height: 64px; } .breadcrumb { padding: 5.5rem 1.25rem 0; } .bf-hero-paper { padding: 1.5rem 0 1rem; } .bf-hero-sky { padding: 6rem 1.25rem 3rem; } .site-footer .footer-grid, .site-footer .footer-grid-4 { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2rem 1.5rem; } .bf-equiv-grid { grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; } } @media (max-width: 600px) { body { font-size: 16px; } .site-footer .footer-grid, .site-footer .footer-grid-4 { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; } .site-footer .footer-logo img { margin: 0 auto; } .site-footer .footer-links, .site-footer .footer-contact { align-items: center; } .site-footer .footer-social { justify-content: center; } .bf-hero-paper .bf-hero-headword { font-size: 2.6rem; } .bf-hero-paper .bf-hero-ipa { font-size: 1.15rem; } .bf-equiv-grid { grid-template-columns: 1fr; } .bf-closing { padding: 2.25rem 1.25rem; } .bf-closing h2 { font-size: 1.5rem; } } /* ─── RTL adjustments ────────────────────────────────────────────── */ [dir="rtl"] .breadcrumb, [dir="rtl"] .bf-hero-paper, [dir="rtl"] .bf-section { text-align: right; } [dir="rtl"] ol.bf-def-list li { padding-left: 0; padding-right: 2.5rem; } [dir="rtl"] ol.bf-def-list li::before { left: auto; right: 0; } [dir="rtl"] .bf-example { border-left: none; border-right: 3px solid var(--pillar); padding: 0.1rem 1.2rem 0.1rem 0; }