/* Menu links */ .menu__link { color: var(--menu-color, var(--accent-color)); } [data-theme='light'] .menu__link { color: var(--menu-color); } [data-theme='dark'] .menu__link { color: var(--accent-color); } font-size: 0.9rem; margin-bottom: 1rem; font-weight: bold; } .breadcrumbs a { color: #3498db; text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .term-list { display: block; margin-top: 1rem; } .term-list__item { margin-bottom: 0.5rem; } .term-list__link { color: inherit; text-decoration: none; } .term-list__link:hover { text-decoration: underline; } .posts-list { margin-top: 2rem; } /* Brand actions */ .brand__actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: nowrap; } .brand__auth { display: flex; align-items: center; gap: 0.3rem; position: relative; } /* RSS Subscribe button */ .rss-subscribe__link { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.4rem; border-radius: 3px; border: 1px solid #ff3d3d; background-color: transparent; color: #ff3d3d !important; font-size: 0.7rem; font-weight: 340; text-decoration: none !important; line-height: 1.4; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } @media (prefers-color-scheme: dark) { .rss-subscribe__link { background-color: var(--foreground-color); border-color: currentColor; color: var(--background-color) !important; } .rss-subscribe__link:hover, .rss-subscribe__link:focus { background-color: transparent; border-color: var(--foreground-color); color: var(--foreground-color) !important; } } [data-theme='dark'] .rss-subscribe__link { background-color: var(--foreground-color); border-color: currentColor; color: var(--background-color) !important; } [data-theme='dark'] .rss-subscribe__link:hover, [data-theme='dark'] .rss-subscribe__link:focus { background-color: transparent; border-color: var(--foreground-color); color: var(--foreground-color) !important; } [data-theme='light'] .rss-subscribe__link { background-color: transparent; border-color: #ff3d3d; color: #ff3d3d !important; } [data-theme='light'] .rss-subscribe__link:hover, [data-theme='light'] .rss-subscribe__link:focus { background-color: transparent; border-color: #89808092; color: #000000bc !important; } .rss-subscribe__link:hover, .rss-subscribe__link:focus { background-color: transparent; border-color: #89808092; color: #000000bc !important; } .rss-subscribe__link svg { width: 10px; height: 10px; } /* Auth links base */ .auth-link { display: inline-flex; align-items: center; padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 340; text-decoration: none !important; line-height: 1.4; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Dropdown toggle — visible on ALL screens */ .brand__auth-check { display: none; } .brand__auth-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.355rem 0.5rem; border-radius: 3px; border: 1px solid #f26522; background-color: #f26522; color: #fff; cursor: pointer; font-size: 0.7rem; font-weight: 340; line-height: 1.4; user-select: none; outline: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .brand__auth-toggle:hover { background-color: transparent; border-color: #f26522; color: #f26522; } @media (prefers-color-scheme: dark) { .brand__auth-toggle { background-color: transparent; border-color: currentColor; color: var(--foreground-color); } .brand__auth-toggle:hover, .brand__auth:focus-within .brand__auth-toggle { background-color: var(--foreground-color) !important; border-color: var(--foreground-color) !important; color: var(--background-color) !important; } } /* Dropdown panel — hidden by default, shown on focus-within */ .brand__auth-links { display: none; position: absolute; top: calc(100% + 0.4rem); right: 0; flex-direction: column; gap: 0; background-color: var(--background-color); border: 1px solid var(--background-color1); border-radius: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); z-index: 100; min-width: 110px; } .brand__auth:focus-within .brand__auth-links { display: flex; } .brand__auth-links .auth-link { border: none; border-radius: 0; padding: 0.55rem 1rem; font-size: 0.78rem; width: 100%; justify-content: center; background-color: transparent; color: var(--foreground-color) !important; } .brand__auth-links .auth-link:not(:last-child) { border-bottom: 1px solid var(--background-color1); } .brand__auth-links .auth-link:hover { background-color: var(--background-color1); color: var(--foreground-color) !important; } /* Mobile */ @media (max-width: 600px) { .brand__actions { gap: 0.16rem; } /* Hide desktop-only elements on mobile */ .brand__auth--desktop, .rss-subscribe__link--desktop { display: none !important; } .brand__auth-text { display: none; } } /* Hide mobile menu on desktop, show on mobile */ .brand__mobile-menu { display: none; position: relative; } @media (max-width: 600px) { .brand__mobile-menu { display: block; } } /* Mobile menu checkbox */ .brand__mobile-check { display: none; } /* Mobile toggle button — same color scheme as account button */ .brand__mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; box-sizing: border-box; border-radius: 3px; border: 1px solid #ff3d3d; background-color: transparent; color: #ff3d3d; cursor: pointer; user-select: none; transition: background-color 0.2s ease, color 0.2s ease; } .brand__mobile-toggle:hover { background-color: transparent; border-color: #89808092; color: #000000bc; } /* Mobile dropdown panel */ .brand__mobile-links { display: none; position: absolute; right: 0; top: calc(100% + 0.3rem); background-color: var(--background-color); border: 1px solid var(--foreground-color3); border-radius: 4px; min-width: 130px; z-index: 100; flex-direction: column; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .brand__mobile-check:checked ~ .brand__mobile-links { display: flex; } [data-theme='light'] .brand__mobile-check:checked ~ .brand__mobile-toggle { background-color: transparent; border-color: #89808092; color: #000000bc; } @media (prefers-color-scheme: light) { .brand__mobile-check:checked ~ .brand__mobile-toggle { background-color: transparent; border-color: #89808092; color: #000000bc; } } .mobile-link { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; color: var(--foreground-color); text-decoration: none; font-size: 0.8rem; white-space: nowrap; transition: background-color 0.15s ease; } .mobile-link:hover { background-color: var(--background-color1); } .mobile-link:not(:last-child) { border-bottom: 1px solid var(--foreground-color3); } /* Mobile toggle dark mode colors */ @media (prefers-color-scheme: dark) { .brand__mobile-toggle { background-color: transparent; border-color: currentColor; color: var(--foreground-color); } .brand__mobile-toggle:hover { background-color: var(--foreground-color); color: var(--background-color); } } [data-theme='light'] .brand__mobile-toggle { background-color: transparent; border-color: #ff3d3d; color: #ff3d3d; } [data-theme='light'] .brand__mobile-toggle:hover { background-color: transparent; border-color: #89808092; color: #000000bc; } [data-theme='dark'] .brand__mobile-toggle { background-color: transparent; border-color: currentColor; color: var(--foreground-color); } [data-theme='dark'] .brand__mobile-toggle:hover { background-color: var(--foreground-color); color: var(--background-color); } /* ── Mobile auth toggle colors ── */ /* Default (system light): orange filled */ @media (max-width: 600px) { .brand__auth-toggle { background-color: #f26522 !important; border-color: #f26522 !important; color: #fff !important; } .brand__auth:focus-within .brand__auth-toggle { background-color: transparent !important; border-color: #f26522 !important; color: #f26522 !important; } } /* System dark: outline */ @media (max-width: 600px) and (prefers-color-scheme: dark) { .brand__auth-toggle { background-color: transparent !important; border-color: currentColor !important; color: var(--foreground-color) !important; } .brand__auth:focus-within .brand__auth-toggle { background-color: var(--foreground-color) !important; border-color: var(--foreground-color) !important; color: var(--background-color) !important; } } /* Manual light override */ @media (max-width: 600px) { [data-theme='light'] .brand__auth-toggle { background-color: #f26522 !important; border-color: #f26522 !important; color: #fff !important; } [data-theme='light'] .brand__auth:focus-within .brand__auth-toggle { background-color: transparent !important; border-color: #f26522 !important; color: #f26522 !important; } /* Manual dark override */ [data-theme='dark'] .brand__auth-toggle { background-color: transparent !important; border-color: currentColor !important; color: var(--foreground-color) !important; } [data-theme='dark'] .brand__auth:focus-within .brand__auth-toggle { background-color: var(--foreground-color) !important; border-color: var(--foreground-color) !important; color: var(--background-color) !important; } } /* ── Theme switcher ── */ /* Force light theme */ [data-theme='light'] { --background-color: #fff; --background-color1: #ff3d3d; --foreground-color: #000000e1; --foreground-color3: #665c54; --accent-color: #1133e9c5; --menu-color: #000000cf; } /* Force dark theme */ [data-theme='dark'] { --background-color: #171414; --background-color1: #fff; --foreground-color: #e3e1db; --foreground-color3: #ccc3b3; --accent-color: #fff; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem; border: none; background: none; color: var(--foreground-color); cursor: pointer; line-height: 1; transition: opacity 0.2s ease; } .theme-toggle:hover { opacity: 0.6; } .theme-toggle__text--light, .theme-toggle__text--dark { display: none !important; } /* Default (system light): moon icon + "Dark" label */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } /* Desktop icon size */ .theme-toggle svg { width: 16.5px; height: 16.5px; } .theme-toggle__text--light { display: none; } .theme-toggle__text--dark { display: inline; } /* System dark (no data-theme): sun icon + "Light" label */ @media (prefers-color-scheme: dark) { .theme-toggle__sun { display: block; } .theme-toggle__moon { display: none; } .theme-toggle__text--light { display: inline; } .theme-toggle__text--dark { display: none; } } /* Manual dark: sun icon + "Light" label */ [data-theme='dark'] .theme-toggle__sun { display: block; } [data-theme='dark'] .theme-toggle__moon { display: none; } [data-theme='dark'] .theme-toggle__text--light { display: inline; } [data-theme='dark'] .theme-toggle__text--dark { display: none; } /* Manual light: moon icon + "Dark" label */ [data-theme='light'] .theme-toggle__sun { display: none; } [data-theme='light'] .theme-toggle__moon { display: block; } [data-theme='light'] .theme-toggle__text--light { display: none; } [data-theme='light'] .theme-toggle__text--dark { display: inline; } /* Match size to other buttons on mobile */ @media (max-width: 600px) { .theme-toggle { width: 2.3rem; height: 2.3rem; box-sizing: border-box; padding: 0; } .theme-toggle svg { width: 16.5px; height: 16.5px; } .theme-toggle__text--light, .theme-toggle__text--dark { display: none !important; } }