/* LiquidGlass backdrop. Two CSS-only mesh-gradient presets in dowdes's own palette (green #92c66c / teal #1cb1cd) plus 5 photo/render presets vendored from shomex.com.mx's LiquidGlassEffect sync (images/glassliquid/bg0-4.webp — kept as-is per explicit request, not recolored, since they're generic abstract art/photos, not shomex-branded). Applied to only when the theme is ON; the glass panels (.lg-glass elements) refract/blur against it. */ .lg-bg { background-attachment: fixed; background-size: cover; background-position: center; min-height: 100vh; } .lg-bg-aurora { background-image: radial-gradient(ellipse 60% 50% at 15% 10%, rgba(146, 198, 108, 0.55), transparent 60%), radial-gradient(ellipse 55% 45% at 85% 20%, rgba(28, 177, 205, 0.45), transparent 60%), radial-gradient(ellipse 60% 50% at 50% 90%, rgba(76, 138, 58, 0.35), transparent 65%), linear-gradient(160deg, #eef7e9 0%, #dff1ea 45%, #d7ecef 100%); } .lg-bg-midnight { background-image: radial-gradient(ellipse 55% 45% at 20% 15%, rgba(28, 177, 205, 0.45), transparent 60%), radial-gradient(ellipse 55% 45% at 80% 85%, rgba(146, 198, 108, 0.35), transparent 60%), linear-gradient(160deg, #0d1f16 0%, #123326 45%, #0c2a30 100%); } .lg-bg-silver { background-image: url('../../images/glassliquid/bg0.webp'); } .lg-bg-sunset { background-image: url('../../images/glassliquid/bg1.webp'); } .lg-bg-iris { background-image: url('../../images/glassliquid/bg2.webp'); } .lg-bg-ocean { background-image: url('../../images/glassliquid/bg3.webp'); } .lg-bg-coral { background-image: url('../../images/glassliquid/bg4.webp'); } .lg-bg-animated-gradient { background-image: linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad); background-size: 400% 400%; animation: lg-background-gradient 15s ease infinite; } @keyframes lg-background-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .lg-bg-animated-gradient { animation: none; } } /* Light/dark/auto theme layer. It deliberately works through custom properties so "auto" can swap palettes with prefers-color-scheme. */ body.dowdes-theme-light, body.dowdes-theme-auto { --dowdes-page-text: #35423d; --dowdes-heading: #26312d; --dowdes-muted: #66736d; --dowdes-surface: rgba(255, 255, 255, 0.74); --dowdes-surface-strong: rgba(255, 255, 255, 0.9); --dowdes-surface-soft: rgba(255, 255, 255, 0.56); --dowdes-border: rgba(24, 54, 45, 0.12); --dowdes-link: #118ca4; --dowdes-input-bg: rgba(255, 255, 255, 0.88); --dowdes-input-text: #26312d; --dowdes-shadow: rgba(28, 60, 48, 0.12); --dowdes-glass-bg: rgba(255, 255, 255, 0.58); color-scheme: light; } body.dowdes-theme-dark { --dowdes-page-text: #e9f3ee; --dowdes-heading: #f6fbf8; --dowdes-muted: #b8c9c0; --dowdes-surface: rgba(18, 27, 24, 0.78); --dowdes-surface-strong: rgba(14, 22, 19, 0.92); --dowdes-surface-soft: rgba(255, 255, 255, 0.08); --dowdes-border: rgba(146, 198, 108, 0.22); --dowdes-link: #8bdde2; --dowdes-input-bg: rgba(255, 255, 255, 0.1); --dowdes-input-text: #f6fbf8; --dowdes-shadow: rgba(0, 0, 0, 0.32); --dowdes-glass-bg: rgba(20, 30, 26, 0.6); background-color: #101a16; color-scheme: dark; } html[data-dowdes-theme-choice="light"] body.dowdes-theme-dark, html[data-dowdes-theme-choice="light"] body.dowdes-theme-auto { --dowdes-page-text: #35423d; --dowdes-heading: #26312d; --dowdes-muted: #66736d; --dowdes-surface: rgba(255, 255, 255, 0.74); --dowdes-surface-strong: rgba(255, 255, 255, 0.9); --dowdes-surface-soft: rgba(255, 255, 255, 0.56); --dowdes-border: rgba(24, 54, 45, 0.12); --dowdes-link: #118ca4; --dowdes-input-bg: rgba(255, 255, 255, 0.88); --dowdes-input-text: #26312d; --dowdes-shadow: rgba(28, 60, 48, 0.12); --dowdes-glass-bg: rgba(255, 255, 255, 0.58); background-color: transparent; color-scheme: light; } html[data-dowdes-theme-choice="dark"] body.dowdes-theme-light, html[data-dowdes-theme-choice="dark"] body.dowdes-theme-auto { --dowdes-page-text: #e9f3ee; --dowdes-heading: #f6fbf8; --dowdes-muted: #b8c9c0; --dowdes-surface: rgba(18, 27, 24, 0.78); --dowdes-surface-strong: rgba(14, 22, 19, 0.92); --dowdes-surface-soft: rgba(255, 255, 255, 0.08); --dowdes-border: rgba(146, 198, 108, 0.22); --dowdes-link: #8bdde2; --dowdes-input-bg: rgba(255, 255, 255, 0.1); --dowdes-input-text: #f6fbf8; --dowdes-shadow: rgba(0, 0, 0, 0.32); --dowdes-glass-bg: rgba(20, 30, 26, 0.6); background-color: #101a16; color-scheme: dark; } body.dowdes-theme-auto { color-scheme: light dark; } /* Global surface mode from Admin > Appearance > LiquidGlass. clear = neutral glass; tinted = the chosen glass tint blended into the pane. */ body.dowdes-glass-clear { --dowdes-glass-panel-bg: var(--dowdes-glass-bg); --dowdes-glass-card-bg: var(--dowdes-surface-soft); --dowdes-glass-card-image: linear-gradient(145deg, rgba(255, 255, 255, .44), rgba(255, 255, 255, .16)); } body.dowdes-glass-tinted { --dowdes-glass-panel-bg: rgba(255, 255, 255, .62); --dowdes-glass-card-bg: rgba(255, 255, 255, .58); --dowdes-glass-card-image: linear-gradient(145deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, .18)); } body.dowdes-theme-dark.dowdes-glass-clear, html[data-dowdes-theme-choice="dark"] body.dowdes-glass-clear { --dowdes-glass-card-image: radial-gradient(circle at 18% 8%, rgba(146, 198, 108, .14), transparent 40%), linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035)); } body.dowdes-theme-dark.dowdes-glass-tinted, html[data-dowdes-theme-choice="dark"] body.dowdes-glass-tinted { --dowdes-glass-panel-bg: rgba(20, 30, 26, .64); --dowdes-glass-card-bg: rgba(20, 30, 26, .50); --dowdes-glass-card-image: radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .08), transparent 40%), linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); } @supports (background: color-mix(in srgb, #fff 50%, #000)) { body.dowdes-glass-tinted { --dowdes-glass-panel-bg: color-mix(in srgb, var(--lg-tint, #92c66c) 22%, var(--dowdes-glass-bg)); --dowdes-glass-card-bg: color-mix(in srgb, var(--lg-tint, #92c66c) 18%, var(--dowdes-surface-soft)); --dowdes-glass-card-image: linear-gradient( 145deg, color-mix(in srgb, #fff 46%, var(--lg-tint, #92c66c) 12%), rgba(255, 255, 255, .16) ); } body.dowdes-theme-dark.dowdes-glass-tinted, html[data-dowdes-theme-choice="dark"] body.dowdes-glass-tinted { --dowdes-glass-panel-bg: color-mix(in srgb, var(--lg-tint, #92c66c) 22%, rgba(20, 30, 26, .68)); --dowdes-glass-card-bg: color-mix(in srgb, var(--lg-tint, #92c66c) 18%, rgba(20, 30, 26, .48)); --dowdes-glass-card-image: radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--lg-tint, #92c66c) 28%, transparent), transparent 40%), linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035)); } } @media (prefers-color-scheme: dark) { body.dowdes-theme-auto { --dowdes-page-text: #e9f3ee; --dowdes-heading: #f6fbf8; --dowdes-muted: #b8c9c0; --dowdes-surface: rgba(18, 27, 24, 0.78); --dowdes-surface-strong: rgba(14, 22, 19, 0.92); --dowdes-surface-soft: rgba(255, 255, 255, 0.08); --dowdes-border: rgba(146, 198, 108, 0.22); --dowdes-link: #8bdde2; --dowdes-input-bg: rgba(255, 255, 255, 0.1); --dowdes-input-text: #f6fbf8; --dowdes-shadow: rgba(0, 0, 0, 0.32); --dowdes-glass-bg: rgba(20, 30, 26, 0.6); background-color: #101a16; } body.dowdes-theme-auto.dowdes-glass-clear { --dowdes-glass-card-image: radial-gradient(circle at 18% 8%, rgba(146, 198, 108, .14), transparent 40%), linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035)); } body.dowdes-theme-auto.dowdes-glass-tinted { --dowdes-glass-panel-bg: rgba(20, 30, 26, .64); --dowdes-glass-card-bg: rgba(20, 30, 26, .50); --dowdes-glass-card-image: radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .08), transparent 40%), linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); } @supports (background: color-mix(in srgb, #fff 50%, #000)) { body.dowdes-theme-auto.dowdes-glass-tinted { --dowdes-glass-panel-bg: color-mix(in srgb, var(--lg-tint, #92c66c) 22%, rgba(20, 30, 26, .68)); --dowdes-glass-card-bg: color-mix(in srgb, var(--lg-tint, #92c66c) 18%, rgba(20, 30, 26, .48)); --dowdes-glass-card-image: radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--lg-tint, #92c66c) 28%, transparent), transparent 40%), linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035)); } } } body.dowdes-theme-light, body.dowdes-theme-dark, body.dowdes-theme-auto { color: var(--dowdes-page-text); } body.dowdes-theme-light #dowdes-main .bg-white, body.dowdes-theme-dark #dowdes-main .bg-white, body.dowdes-theme-auto #dowdes-main .bg-white, body.dowdes-theme-light .navbar.bg-white, body.dowdes-theme-dark .navbar.bg-white, body.dowdes-theme-auto .navbar.bg-white, body.dowdes-theme-light .offcanvas-collapse.bg-white, body.dowdes-theme-dark .offcanvas-collapse.bg-white, body.dowdes-theme-auto .offcanvas-collapse.bg-white, body.dowdes-theme-light .footer-container, body.dowdes-theme-dark .footer-container, body.dowdes-theme-auto .footer-container { background-color: var(--dowdes-surface) !important; border-color: var(--dowdes-border); color: var(--dowdes-page-text); box-shadow: 0 12px 32px var(--dowdes-shadow); } body.dowdes-theme-light .lg-glass, body.dowdes-theme-dark .lg-glass, body.dowdes-theme-auto .lg-glass { background: var(--dowdes-glass-panel-bg, var(--dowdes-glass-bg)) !important; color: var(--dowdes-page-text); } body.dowdes-theme-light h1, body.dowdes-theme-light h2, body.dowdes-theme-light h3, body.dowdes-theme-light h4, body.dowdes-theme-light h5, body.dowdes-theme-light b, body.dowdes-theme-light .app-list .title, body.dowdes-theme-light .top-apps .app-title, body.dowdes-theme-light .navbar-light .navbar-nav .nav-link, body.dowdes-theme-light .nav-link, body.dowdes-theme-dark h1, body.dowdes-theme-dark h2, body.dowdes-theme-dark h3, body.dowdes-theme-dark h4, body.dowdes-theme-dark h5, body.dowdes-theme-dark b, body.dowdes-theme-dark .app-list .title, body.dowdes-theme-dark .top-apps .app-title, body.dowdes-theme-dark .navbar-light .navbar-nav .nav-link, body.dowdes-theme-dark .nav-link, body.dowdes-theme-auto h1, body.dowdes-theme-auto h2, body.dowdes-theme-auto h3, body.dowdes-theme-auto h4, body.dowdes-theme-auto h5, body.dowdes-theme-auto b, body.dowdes-theme-auto .app-list .title, body.dowdes-theme-auto .top-apps .app-title, body.dowdes-theme-auto .navbar-light .navbar-nav .nav-link, body.dowdes-theme-auto .nav-link { color: var(--dowdes-heading) !important; } body.dowdes-theme-dark .app-list .title, body.dowdes-theme-dark .top-apps .app-title, body.dowdes-theme-dark .navbar-light .navbar-nav .nav-link, body.dowdes-theme-dark .nav-link, html[data-dowdes-theme-choice="dark"] body .app-list .title, html[data-dowdes-theme-choice="dark"] body .top-apps .app-title, html[data-dowdes-theme-choice="dark"] body .navbar-light .navbar-nav .nav-link, html[data-dowdes-theme-choice="dark"] body .nav-link { color: #fff !important; text-shadow: 0 0 10px rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .55); } body.dowdes-theme-light a:not(.datsbutton):not(.header__btn):not(.btn):not(.avsec-btn):not(.avsec-legend), body.dowdes-theme-dark a:not(.datsbutton):not(.header__btn):not(.btn):not(.avsec-btn):not(.avsec-legend), body.dowdes-theme-auto a:not(.datsbutton):not(.header__btn):not(.btn):not(.avsec-btn):not(.avsec-legend) { color: var(--dowdes-link); } body.dowdes-theme-light .text-muted, body.dowdes-theme-light .developer, body.dowdes-theme-light .date, body.dowdes-theme-light .app-list .developer, body.dowdes-theme-light .app-list .date, body.dowdes-theme-light .top-apps .developer, body.dowdes-theme-light .version, body.dowdes-theme-light .appficha-metric-label, body.dowdes-theme-light .avxapk-note, body.dowdes-theme-dark .text-muted, body.dowdes-theme-dark .developer, body.dowdes-theme-dark .date, body.dowdes-theme-dark .app-list .developer, body.dowdes-theme-dark .app-list .date, body.dowdes-theme-dark .top-apps .developer, body.dowdes-theme-dark .version, body.dowdes-theme-dark .appficha-metric-label, body.dowdes-theme-dark .avxapk-note, body.dowdes-theme-auto .text-muted, body.dowdes-theme-auto .developer, body.dowdes-theme-auto .date, body.dowdes-theme-auto .app-list .developer, body.dowdes-theme-auto .app-list .date, body.dowdes-theme-auto .top-apps .developer, body.dowdes-theme-auto .version, body.dowdes-theme-auto .appficha-metric-label, body.dowdes-theme-auto .avxapk-note { color: var(--dowdes-muted) !important; } body.dowdes-theme-light .appficha-metric-value, body.dowdes-theme-light .avsec-title, body.dowdes-theme-light .avsec-hashes b, body.dowdes-theme-dark .appficha-metric-value, body.dowdes-theme-dark .avsec-title, body.dowdes-theme-dark .avsec-hashes b, body.dowdes-theme-auto .appficha-metric-value, body.dowdes-theme-auto .avsec-title, body.dowdes-theme-auto .avsec-hashes b { color: var(--dowdes-heading) !important; } body.dowdes-theme-light .form-control, body.dowdes-theme-light .form-select, body.dowdes-theme-dark .form-control, body.dowdes-theme-dark .form-select, body.dowdes-theme-auto .form-control, body.dowdes-theme-auto .form-select { background-color: var(--dowdes-input-bg); border-color: var(--dowdes-border); color: var(--dowdes-input-text); } body.dowdes-theme-light .form-control::placeholder, body.dowdes-theme-dark .form-control::placeholder, body.dowdes-theme-auto .form-control::placeholder { color: var(--dowdes-muted); } body.dowdes-theme-light .dropdown-menu, body.dowdes-theme-dark .dropdown-menu, body.dowdes-theme-auto .dropdown-menu { background-color: var(--dowdes-surface-strong); border-color: var(--dowdes-border); } body.dowdes-theme-light .dropdown-item, body.dowdes-theme-dark .dropdown-item, body.dowdes-theme-auto .dropdown-item { color: var(--dowdes-page-text); } body.dowdes-theme-light .dropdown-item:hover, body.dowdes-theme-light .dropdown-item:focus, body.dowdes-theme-dark .dropdown-item:hover, body.dowdes-theme-dark .dropdown-item:focus, body.dowdes-theme-auto .dropdown-item:hover, body.dowdes-theme-auto .dropdown-item:focus { background-color: var(--dowdes-surface-soft); color: var(--dowdes-heading); } body.dowdes-theme-light .appficha-metric, body.dowdes-theme-dark .appficha-metric, body.dowdes-theme-auto .appficha-metric, body.dowdes-theme-light .avsec-pop, body.dowdes-theme-dark .avsec-pop, body.dowdes-theme-auto .avsec-pop, body.dowdes-theme-light .avsec-toggle, body.dowdes-theme-dark .avsec-toggle, body.dowdes-theme-auto .avsec-toggle, body.dowdes-theme-light .avsec-hashes, body.dowdes-theme-dark .avsec-hashes, body.dowdes-theme-auto .avsec-hashes, body.dowdes-theme-light .avxapk-help, body.dowdes-theme-dark .avxapk-help, body.dowdes-theme-auto .avxapk-help { background: var(--dowdes-glass-card-bg, var(--dowdes-surface-soft)); border-color: var(--dowdes-border); color: var(--dowdes-page-text); } body.dowdes-glass-no-cards .appficha-metric { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } body.dowdes-theme-light .avsec-checks li, body.dowdes-theme-light .avsec-sub, body.dowdes-theme-dark .avsec-checks li, body.dowdes-theme-dark .avsec-sub, body.dowdes-theme-auto .avsec-checks li, body.dowdes-theme-auto .avsec-sub { color: var(--dowdes-muted); } body.dowdes-theme-light .qr-code, body.dowdes-theme-dark .qr-code, body.dowdes-theme-auto .qr-code { background-color: #fff !important; } body.dowdes-theme-light .badge.badge-success, body.dowdes-theme-auto .badge.badge-success, html[data-dowdes-theme-choice="light"] body .badge.badge-success { color: #111 !important; } body.dowdes-theme-dark .badge.badge-success, html[data-dowdes-theme-choice="dark"] body .badge.badge-success { color: #fff !important; } body.dowdes-theme-light .dowdes-theme-toggle, body.dowdes-theme-dark .dowdes-theme-toggle, body.dowdes-theme-auto .dowdes-theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--dowdes-border); border-radius: 999px; background: var(--dowdes-surface-soft); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } .dowdes-theme-choice { min-width: 52px; border: 0; border-radius: 999px; background: transparent; color: var(--dowdes-muted, #66736d); cursor: pointer; font-size: .76rem; font-weight: 400; line-height: 1; padding: .46rem .62rem; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .dowdes-theme-choice.is-active { background-color: rgba(255, 255, 255, .38); background: color-mix(in srgb, var(--lg-accent, #92c66c) 26%, rgba(255, 255, 255, .7)); color: var(--dowdes-heading, #26312d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 14px var(--dowdes-shadow, rgba(28, 60, 48, .12)); } body.dowdes-theme-dark .dowdes-theme-choice.is-active, html[data-dowdes-theme-choice="dark"] body .dowdes-theme-choice.is-active { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .18); } @media (max-width: 991.98px) { .dowdes-theme-toggle { align-self: flex-start; margin-top: .65rem; } } body.dowdes-content-bg-white-off #dowdes-main .bg-white:not(.qr-code):not(.lg-glass) { background-color: transparent !important; box-shadow: none !important; } /* .lg-glass has no padding of its own (it's a generic modifier); the homepage slider title bar needs some so the frosted panel isn't flush against the text. */ .swiper-main h3.lg-glass { padding: 10px 16px; } /* The vendored liquid-glass-effects.css never reads --lg-accent (its border/ shadow tokens are fixed neutral grays) — without this, the admin's accent color picker would visibly do nothing. color-mix() degrades safely: browsers that don't support it just ignore this rule and keep the neutral default. */ .lg-glass { border-color: color-mix(in srgb, var(--lg-accent, #92c66c) 35%, transparent); box-shadow: 0 4px 16px color-mix(in srgb, var(--lg-accent, #92c66c) 22%, transparent), inset 0 1px 0 var(--lg-glass-highlight); } /* The mobile menu lives inside