/* assets/css/style.css SimpleFeedMaker — Phase 1 styles - Dark by default (paired with ) - Clean, minimal, “just works” - Text-only logo using Work Sans - Small helpers for result area and toasts (future-proof) */ /* ------------------------------ Base ------------------------------ */ :root { /* Subtle radius + shadows that feel modern */ --sfm-radius: 14px; --sfm-shadow: 0 6px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.12); --sfm-accent: #00adb5; --sfm-accent-soft: rgba(0, 173, 181, .16); --sfm-primary-blue: #3282b8; --sfm-bg: #222831; --sfm-surface: #2a3038; --sfm-surface-soft: #393e46; --sfm-text: #eeeeee; } html, body { height: 100%; } body { font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hero-section { position: relative; overflow: hidden; background: var(--sfm-bg); padding: clamp(2.75rem, 7vw, 4.75rem) 0 clamp(2.75rem, 8vw, 5.5rem); } .hero-section::before { content: ""; position: absolute; inset: 0; top: 10%; height: 70%; background: radial-gradient(140% 120% at 0% 0%, rgba(0, 173, 181, .18), transparent 60%), radial-gradient(120% 140% at 100% 0%, rgba(57, 62, 70, .35), transparent 65%); pointer-events: none; opacity: .85; } [data-bs-theme="light"] .hero-section::before { background: radial-gradient(140% 120% at 0% 0%, rgba(0, 173, 181, .12), transparent 60%), radial-gradient(120% 160% at 100% 0%, rgba(34, 40, 49, .08), transparent 70%); opacity: .7; } .hero-row { position: relative; z-index: 1; } .hero-section .footnote { margin-top: clamp(1.75rem, 5vw, 2.75rem); } .hero-card { backdrop-filter: blur(6px); } .hero-card .display-6 { font-size: clamp(1.85rem, 3.8vw, 2.35rem); line-height: 1.2; } #feedForm .htmx-indicator { display: none; } #feedForm.htmx-request .htmx-indicator { display: inline-flex; } .site-title { font-family: "Oswald", "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; font-weight: 700; letter-spacing: .2px; font-size: clamp(1.6rem, 3vw, 1.85rem); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Dark theme fine-tuning (Bootstrap already handles most variables) */ [data-bs-theme="dark"] { --bs-body-bg: var(--sfm-bg); --bs-body-color: var(--sfm-text); --bs-secondary-color: rgba(238, 238, 238, .65); --bs-border-color: rgba(0, 0, 0, .45); --bs-primary: var(--sfm-primary-blue); --bs-primary-rgb: 50, 130, 184; --bs-accordion-active-bg: rgba(50, 130, 184, .22); --bs-accordion-active-color: #e8f3ff; --bs-accordion-btn-focus-border-color: rgba(50, 130, 184, .55); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(50, 130, 184, .28); --bs-card-bg: var(--sfm-surface); --bs-card-border-color: rgba(0, 0, 0, .55); --bs-link-color: var(--sfm-accent); --bs-link-hover-color: #19c1c9; --sfm-bg: #222831; --sfm-surface: #2a3038; --sfm-surface-soft: #393e46; --sfm-text: #eeeeee; } [data-bs-theme="light"] { --bs-body-bg: #eeeeee; --bs-body-color: #222831; --bs-secondary-color: rgba(34, 40, 49, .7); --bs-border-color: rgba(34, 40, 49, .14); --bs-primary: var(--sfm-primary-blue); --bs-primary-rgb: 50, 130, 184; --bs-accordion-active-bg: rgba(50, 130, 184, .12); --bs-accordion-active-color: #15324a; --bs-accordion-btn-focus-border-color: rgba(50, 130, 184, .55); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(50, 130, 184, .18); --bs-card-bg: #ffffff; --bs-card-border-color: rgba(34, 40, 49, .1); --bs-link-color: #008a92; --bs-link-hover-color: #006e74; --sfm-accent: #00adb5; --sfm-accent-soft: rgba(0, 173, 181, .18); --sfm-bg: #eeeeee; --sfm-surface: #ffffff; --sfm-surface-soft: #f6f8f9; --sfm-text: #222831; } body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .muted { color: rgba(238, 238, 238, .78); } [data-bs-theme="light"] .muted { color: rgba(34, 40, 49, .62); } [data-bs-theme="light"] .muted.text-secondary, [data-bs-theme="light"] .card .muted { color: rgba(34, 40, 49, .68); } [data-bs-theme="light"] .lead { color: rgba(28, 34, 48, .78); } /* ------------------------------ Header / Brand ------------------------------ */ .navbar-brand { letter-spacing: .2px; line-height: 1; } .site-nav a { color: var(--bs-secondary-color); transition: color .15s ease; } .site-nav a:hover, .site-nav a:focus, .site-nav a.active { color: #fff; } .page-list { list-style: disc; } .page-list li { margin-bottom: .65rem; color: rgba(227, 230, 237, .82); line-height: 1.55; } [data-bs-theme="light"] .page-list li { color: rgba(28, 34, 48, .78); } .page-list li strong { color: #fff; } [data-bs-theme="light"] .page-list li strong { color: #1c2230; } .page-list + p { margin-top: 1rem; } /* Admin tweaks */ .table-sticky thead th { position: sticky; top: 0; z-index: 5; background: var(--bs-card-bg); } [data-bs-theme="light"] .table-sticky thead th { background: rgba(235, 239, 249, .98); } .admin-jobs-table { border-collapse: separate; border-spacing: 0; background-color: transparent; } .admin-jobs-table tbody tr { transition: background-color .15s ease, color .15s ease; } [data-bs-theme="dark"] .admin-jobs-table tbody tr { background-color: rgba(20, 24, 35, .96); border-color: rgba(77, 87, 110, .25); color: var(--bs-body-color); } [data-bs-theme="dark"] .admin-jobs-table tbody tr:hover { background-color: rgba(30, 36, 48, .98); } [data-bs-theme="light"] .admin-jobs-table tbody tr { background-color: #ffffff; border-color: rgba(28, 34, 48, .12); color: var(--bs-body-color); } [data-bs-theme="light"] .admin-jobs-table tbody tr:hover { background-color: rgba(28, 34, 48, .04); } .filter-chips { margin-top: .25rem; } .filter-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(99, 112, 142, .3); color: inherit; text-decoration: none; font-weight: 600; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .filter-chip .chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8rem; padding: .1rem .4rem; border-radius: 999px; font-size: .8rem; background: rgba(255, 255, 255, .1); } [data-bs-theme="light"] .filter-chip { border-color: rgba(28, 34, 48, .16); background-color: rgba(255, 255, 255, .8); } [data-bs-theme="light"] .filter-chip .chip-count { background: rgba(28, 34, 48, .08); } .filter-chip:hover, .filter-chip:focus-visible { border-color: rgba(0, 173, 181, .38); color: var(--bs-body-color); background-color: rgba(0, 173, 181, .12); } .filter-chip.is-active { border-color: rgba(0, 173, 181, .55); background: rgba(0, 173, 181, .2); color: #fff; } .filter-chip.is-active .chip-count { background: rgba(0, 0, 0, .18); } [data-bs-theme="light"] .filter-chip.is-active { background: rgba(0, 173, 181, .18); color: #1c2230; } [data-bs-theme="light"] .filter-chip.is-active .chip-count { background: rgba(0, 173, 181, .14); } .jobs-table-container { max-height: 70vh; overflow-y: auto; } .page-list li:last-child { margin-bottom: 0; } .placeholder-illustration { position: relative; width: 92px; height: 92px; border-radius: 24px; overflow: visible; display: block; } .placeholder-illustration::before { content: ""; position: absolute; inset: -32%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(0, 173, 181, .45), transparent 70%); opacity: .85; z-index: -1; animation: accentDrift 11s ease-in-out infinite alternate; } [data-bs-theme="light"] .placeholder-illustration::before { background: radial-gradient(circle at 35% 32%, rgba(0, 173, 181, .12), transparent 70%), radial-gradient(circle at 65% 65%, rgba(255, 255, 255, .9), transparent 80%); box-shadow: 0 18px 32px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .05); opacity: 1; } .placeholder-illustration .placeholder-icon { display: block; width: 100%; height: 100%; } /* ------------------------------ Cards ------------------------------ */ .card { border-radius: var(--sfm-radius); border-color: var(--bs-card-border-color); background: var(--bs-card-bg); box-shadow: var(--sfm-shadow); transition: border-color .2s ease, box-shadow .2s ease; } .card .card-body { padding: 1.25rem 1.25rem; } @media (min-width: 992px) { .card .card-body { padding: 1.5rem 1.5rem; } } /* ------------------------------ Forms ------------------------------ */ .form-label { font-weight: 600; } .floating-group { position: relative; display: flex; flex-direction: column; gap: .35rem; } .floating-group .form-label { font-weight: 600; font-size: .92rem; } .form-caption { font-size: .85rem; color: rgba(227, 230, 237, .65); } [data-bs-theme="light"] .form-caption { color: rgba(28, 34, 48, .54); } .form-text { color: rgba(227, 230, 237, .7); } [data-bs-theme="light"] .form-text { color: rgba(28, 34, 48, .55); } .form-control, .form-select { background-color: rgba(57, 62, 70, .85); border-color: rgba(238, 238, 238, .18); color: var(--bs-body-color); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; min-height: 3.1rem; } [data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select { background-color: #fff; border-color: rgba(34, 40, 49, .2); color: var(--bs-body-color); } [data-bs-theme="light"] .form-control::placeholder, [data-bs-theme="light"] .form-select::placeholder { color: rgba(28, 34, 48, .45); } [data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus { background-color: #fff; border-color: #00adb5; box-shadow: 0 0 0 .2rem rgba(0, 173, 181, .18); } .form-control:focus, .form-select:focus { border-color: var(--sfm-accent); background-color: rgba(57, 62, 70, .92); box-shadow: 0 0 0 .2rem var(--sfm-accent-soft); } [data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus { background-color: #fff; color: var(--bs-body-color); } .form-switch { padding-left: 3.25rem; min-height: 1.75rem; } .form-switch .form-check-input { width: 2.7rem; height: 1.4rem; background-color: rgba(238, 238, 238, .18); border-color: rgba(238, 238, 238, .28); margin-right: .75rem; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .form-switch .form-check-input:checked { background-color: var(--sfm-accent); border-color: var(--sfm-accent); } .form-switch .form-check-input:focus { box-shadow: 0 0 0 .2rem var(--sfm-accent-soft); } .form-switch .form-check-label { font-weight: 600; color: #fff; } [data-bs-theme="light"] .form-switch .form-check-input { background-color: rgba(34, 40, 49, .15); border-color: rgba(34, 40, 49, .25); } [data-bs-theme="light"] .form-switch .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(0, 173, 181, .18); } [data-bs-theme="light"] .form-switch .form-check-label { color: #1c2230; } /* Tighter number inputs on small screens */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } /* Buttons */ .btn { border-radius: 10px; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; } .btn.btn-primary { background-image: linear-gradient(135deg, #c98847, #e0a85d); border: none; color: #1d1b1a; box-shadow: 0 16px 36px rgba(170, 115, 50, .35); } .btn.btn-primary:hover:not(:disabled) { background-image: linear-gradient(135deg, #e0a85d, #f0bd6f); transform: translateY(-1px); box-shadow: 0 20px 42px rgba(170, 115, 50, .4); } .btn.btn-primary:active { transform: translateY(0); box-shadow: 0 12px 28px rgba(170, 115, 50, .32); } [data-bs-theme="light"] .btn.btn-primary { box-shadow: 0 14px 34px rgba(170, 115, 50, .28); } .btn-icon { width: 2.75rem; height: 2.75rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .btn-icon.btn-sm { width: 2.5rem; height: 2.5rem; } .alert { border-radius: 14px; border: 1px solid transparent; padding: 0.95rem 1.1rem; font-weight: 500; box-shadow: 0 14px 28px rgba(0, 0, 0, .18); } .alert-danger { background: linear-gradient(135deg, rgba(132, 35, 35, .28), rgba(132, 35, 35, .18)); border-color: rgba(203, 71, 63, .55); color: #f8d7d4; } .alert-warning { background: linear-gradient(135deg, rgba(170, 115, 50, .26), rgba(170, 115, 50, .18)); border-color: rgba(209, 157, 92, .55); color: #fcefdc; } .alert-success { background: linear-gradient(135deg, rgba(27, 122, 98, .24), rgba(27, 122, 98, .16)); border-color: rgba(46, 176, 144, .5); color: #d8f5ec; } .alert-info { background: linear-gradient(135deg, rgba(40, 89, 156, .24), rgba(40, 89, 156, .16)); border-color: rgba(62, 118, 196, .45); color: #d9e8ff; } [data-bs-theme="light"] .alert { box-shadow: 0 16px 32px rgba(29, 27, 26, .12); } [data-bs-theme="light"] .alert-danger { background: rgba(203, 71, 63, .12); border-color: rgba(203, 71, 63, .32); color: #702721; } [data-bs-theme="light"] .alert-warning { background: rgba(201, 136, 71, .12); border-color: rgba(201, 136, 71, .28); color: #6b461f; } [data-bs-theme="light"] .alert-success { background: rgba(27, 122, 98, .12); border-color: rgba(27, 122, 98, .25); color: #1c5949; } [data-bs-theme="light"] .alert-info { background: rgba(62, 118, 196, .12); border-color: rgba(62, 118, 196, .28); color: #294373; } .feature-belt { background: linear-gradient(180deg, rgba(29, 27, 26, .92), rgba(29, 27, 26, .85)); border-top: 1px solid rgba(219, 212, 210, .07); border-bottom: 1px solid rgba(219, 212, 210, .06); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.75rem; } .feature-card { background: rgba(255, 255, 255, .02); border: 1px solid rgba(219, 212, 210, .08); border-radius: 18px; padding: 1.75rem; box-shadow: 0 18px 35px rgba(0, 0, 0, .26); height: 100%; } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: rgba(170, 115, 50, .25); color: #eaba6b; font-size: 1.35rem; margin-bottom: .9rem; } .feature-card h3 { font-size: 1.15rem; margin-bottom: .75rem; } .feature-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; color: rgba(219, 212, 210, .78); } .feature-card ul li::before { content: '•'; color: #e0a85d; margin-right: .5rem; } .social-proof { background: rgba(29, 27, 26, .92); border-radius: 18px; padding: 2rem; border: 1px solid rgba(219, 212, 210, .08); box-shadow: 0 18px 35px rgba(0, 0, 0, .24); } .proof-grid { display: grid; gap: 1.2rem; } @media (min-width: 768px) { .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .proof-quote { background: rgba(255, 255, 255, .02); border-radius: 14px; padding: 1.2rem 1.4rem; color: rgba(219, 212, 210, .78); border: 1px solid rgba(219, 212, 210, .06); font-size: .95rem; line-height: 1.6; } .proof-quote strong { display: block; margin-top: .65rem; color: #dbd4d2; font-size: .9rem; } .admin-metrics { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; } .metrics-pill { background: rgba(29, 27, 26, .88); border: 1px solid rgba(219, 212, 210, .08); border-radius: 16px; padding: 1rem 1.25rem; min-width: 180px; box-shadow: 0 16px 32px rgba(0, 0, 0, .22); } .metrics-pill .label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(219, 212, 210, .62); display: block; margin-bottom: .35rem; } .metrics-pill .value { font-size: 1.55rem; font-weight: 700; color: #dbd4d2; } .metrics-pill.warn { border-color: rgba(203, 71, 63, .45); box-shadow: 0 18px 36px rgba(203, 71, 63, .22); } .metrics-pill.warn .value { color: #f3a49d; } [data-bs-theme="light"] .metrics-pill { background: #ffffff; border: 1px solid rgba(29, 27, 26, .08); box-shadow: 0 18px 36px rgba(29, 27, 26, .12); } [data-bs-theme="light"] .metrics-pill .label { color: rgba(29, 27, 26, .55); } [data-bs-theme="light"] .metrics-pill .value { color: #1d1b1a; } [data-bs-theme="light"] .metrics-pill.warn { border-color: rgba(203, 71, 63, .28); box-shadow: 0 18px 36px rgba(203, 71, 63, .15); } [data-bs-theme="light"] .metrics-pill.warn .value { color: #b94e44; } [data-bs-theme="light"] .feature-belt { background: linear-gradient(180deg, rgba(244, 242, 241, .95), rgba(236, 232, 229, .92)); border-top: 1px solid rgba(29, 27, 26, .08); border-bottom: 1px solid rgba(29, 27, 26, .07); } [data-bs-theme="light"] .feature-card { background: #ffffff; border: 1px solid rgba(29, 27, 26, .08); box-shadow: 0 16px 30px rgba(29, 27, 26, .12); color: rgba(29, 27, 26, .88); } [data-bs-theme="light"] .feature-card h3 { color: #1d1b1a; } [data-bs-theme="light"] .feature-card ul { color: rgba(29, 27, 26, .75); } [data-bs-theme="light"] .feature-card ul li::before { color: #c98847; } [data-bs-theme="light"] .feature-icon { background: rgba(201, 136, 71, .18); color: #c98847; } [data-bs-theme="light"] .social-proof { background: #ffffff; border: 1px solid rgba(29, 27, 26, .08); box-shadow: 0 22px 46px rgba(29, 27, 26, .12); } [data-bs-theme="light"] .proof-quote { background: rgba(201, 136, 71, .08); border: 1px solid rgba(201, 136, 71, .16); color: rgba(29, 27, 26, .78); } [data-bs-theme="light"] .proof-quote strong { color: #1d1b1a; } .btn-icon span { font-size: 1.2rem; } [data-bs-theme="dark"] .btn-outline-secondary.btn-icon { background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #e9eef9; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); } [data-bs-theme="dark"] .btn-outline-secondary.btn-icon:hover, [data-bs-theme="dark"] .btn-outline-secondary.btn-icon:focus-visible { background-color: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); color: #ffffff; } [data-bs-theme="dark"] .btn-outline-secondary.btn-icon:focus-visible { outline: 2px solid rgba(0, 173, 181, .45); outline-offset: 2px; } [data-bs-theme="dark"] .btn-outline-secondary.btn-icon:active { background-color: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .24); color: #ffffff; } [data-bs-theme="light"] .btn-outline-secondary.btn-icon { background-color: #f7f9ff; border-color: rgba(28, 34, 48, .18); color: #1c2230; } [data-bs-theme="light"] .btn-outline-secondary.btn-icon:hover { background-color: rgba(28, 34, 48, .08); border-color: rgba(28, 34, 48, .25); } [data-bs-theme="light"] .btn-outline-secondary.btn-icon:focus-visible { outline: 2px solid rgba(0, 173, 181, .35); outline-offset: 2px; } .btn-success { box-shadow: 0 6px 14px rgba(25,135,84,.18); } .btn-outline-secondary:hover { color: #fff; } .btn-outline-link { display: inline-flex; align-items: center; justify-content: center; padding: .66rem 1.1rem; border: 1px solid transparent; color: var(--sfm-accent); background-color: transparent; font-weight: 600; } .btn-outline-link:hover, .btn-outline-link:focus { border-color: rgba(0, 173, 181, .25); background-color: rgba(0, 173, 181, .08); } [data-bs-theme="light"] .btn-outline-link:hover, [data-bs-theme="light"] .btn-outline-link:focus { border-color: rgba(0, 173, 181, .25); background-color: rgba(0, 173, 181, .08); } #generateBtn { box-shadow: 0 10px 24px rgba(0, 173, 181, .24); font-weight: 700; } #generateBtn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0, 173, 181, .28); } .btn-lg-sm { font-size: 1.02rem; padding: .66rem 1.4rem; } @media (min-width: 576px) { .btn-lg-sm { font-size: 1.05rem; padding: .7rem 1.6rem; } } #clearBtn { color: rgba(238, 238, 238, .78); border-color: rgba(238, 238, 238, .18); background-color: rgba(238, 238, 238, .05); } #clearBtn:hover { border-color: rgba(238, 238, 238, .35); color: #fff; background-color: rgba(238, 238, 238, .12); } #clearBtn .label { font-weight: 600; } #clearBtn .icon { font-size: 1.1rem; } [data-bs-theme="light"] #clearBtn { color: rgba(34, 40, 49, .7); border-color: rgba(34, 40, 49, .2); background-color: rgba(34, 40, 49, .02); } [data-bs-theme="light"] #clearBtn:hover { color: #222831; border-color: rgba(34, 40, 49, .35); background-color: rgba(34, 40, 49, .08); } @media (max-width: 575.98px) { #clearBtn { width: auto; height: auto; border-radius: 999px; padding: .3rem .85rem; font-size: .95rem; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(0, 173, 181, .35); background: rgba(0, 173, 181, .1); color: var(--sfm-accent); } #clearBtn .icon { font-size: 1rem; } #clearBtn:hover, #clearBtn:focus-visible { background: rgba(0, 173, 181, .18); color: #fff; border-color: rgba(0, 173, 181, .5); box-shadow: 0 0 0 .2rem rgba(0, 173, 181, .25); } } @media (max-width: 991.98px) { .hero-section { padding: 2.25rem 0 3rem; } .hero-card .card-body { padding: 1.5rem; } } @media (max-width: 575.98px) { .form-control, .form-select { min-height: 2.85rem; } .hero-row { gap: 1.75rem; } .placeholder-illustration { width: 80px; height: 80px; } .placeholder-illustration::before { inset: -28%; } } #resultBox .btn-outline-success { color: #63ffa4; border-color: rgba(99, 255, 164, .35); background: rgba(16, 77, 57, .14); } .result-health { border: 1px solid rgba(255, 255, 255, .12); } .result-health .badge { font-size: .7rem; letter-spacing: .04em; } [data-bs-theme="light"] .result-health { border-color: rgba(34, 40, 49, .12); } /* ------------------------------ Accordion tweaks ------------------------------ */ .accordion-button:not(.collapsed) { border-color: rgba(50, 130, 184, .55); box-shadow: inset 0 -1px 0 rgba(50, 130, 184, .35); } [data-bs-theme="light"] .accordion-button:not(.collapsed) { border-color: rgba(50, 130, 184, .45); box-shadow: inset 0 -1px 0 rgba(50, 130, 184, .22); } .accordion-button:focus { border-color: rgba(50, 130, 184, .6); } [data-bs-theme="light"] #resultBox .btn-outline-success { color: #1f8d57; border-color: rgba(31, 141, 87, .35); background: rgba(31, 141, 87, .12); } #resultBox .copy-btn { color: var(--sfm-accent); border-color: rgba(0, 173, 181, .35); background: rgba(0, 173, 181, .08); transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } #resultBox .copy-btn:hover, #resultBox .copy-btn:focus, #resultBox .copy-btn:focus-visible { background: rgba(0, 173, 181, .18); border-color: rgba(0, 173, 181, .5); color: #fff; box-shadow: 0 0 0 .2rem rgba(0, 173, 181, .25); } #resultBox .copy-btn.copy-ok { background: rgba(0, 173, 181, .22); border-color: rgba(0, 173, 181, .55); color: #fff; } [data-bs-theme="light"] #resultBox .copy-btn { color: #007d85; border-color: rgba(0, 173, 181, .35); background: rgba(0, 173, 181, .1); } [data-bs-theme="light"] #resultBox .copy-btn:hover, [data-bs-theme="light"] #resultBox .copy-btn:focus, [data-bs-theme="light"] #resultBox .copy-btn:focus-visible { background: rgba(0, 173, 181, .18); border-color: rgba(0, 173, 181, .45); color: #fff; box-shadow: 0 0 0 .2rem rgba(0, 173, 181, .2); } [data-bs-theme="light"] #resultBox .copy-btn.copy-ok { background: rgba(0, 173, 181, .22); border-color: rgba(0, 173, 181, .55); color: #fff; } #resultBox .btn-outline-success:hover { background: rgba(99, 255, 164, .2); border-color: rgba(99, 255, 164, .6); } #resultBox .btn-outline-primary { color: var(--sfm-accent); border-color: rgba(0, 173, 181, .45); } #resultBox .btn-outline-primary:hover { background: var(--sfm-accent-soft); } #resultBox .btn { border-radius: 8px; } [data-bs-theme="light"] #resultBox .input-group { background: rgba(255, 255, 255, .92); border: 1px solid rgba(28, 34, 48, .08); } [data-bs-theme="light"] #resultBox .input-group .form-control { color: inherit; } #resultBox .input-group { flex-wrap: wrap; } #resultBox .input-group > .btn { border-radius: 8px; } #resultBox .input-group > .btn + .btn { margin-left: .5rem; } @media (max-width: 575.98px) { #resultBox .input-group > .btn + .btn { margin-left: 0; margin-top: .5rem; } } .recent-feeds-card { border: 1px solid rgba(255, 255, 255, .08); } [data-bs-theme="light"] .recent-feeds-card { border-color: rgba(34, 40, 49, .12); } .recent-feeds-list { margin: 0; } .recent-feeds-list .recent-feed-item:first-child { border-top: none; padding-top: 0; } .recent-feed-link { color: inherit; text-decoration: none; } .recent-feed-link:hover, .recent-feed-link:focus { text-decoration: underline; } .recent-feeds-card .btn-outline-secondary { border-radius: 999px; padding-inline: .85rem; } .recent-feeds-card .btn-refresh { position: relative; display: inline-flex; align-items: center; justify-content: center; padding-right: 2rem; min-width: 7.75rem; transition: color .2s ease, border-color .2s ease; } .recent-feeds-card .btn-refresh::after { content: ""; position: absolute; top: 50%; right: .6rem; width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; transform: translateY(-50%) scale(.55); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .recent-feeds-card .htmx-indicator { display: none; font-size: .8rem; gap: .35rem; align-items: center; } .recent-feeds-card .htmx-indicator.htmx-request { display: inline-flex; } .recent-feeds-card .htmx-indicator::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .8s linear infinite; display: inline-block; } .recent-feeds-card .btn-refresh.htmx-request, .recent-feeds-card .btn-refresh.is-busy { pointer-events: none; opacity: .8; border-color: var(--bs-primary); color: var(--bs-primary); } .recent-feeds-card .btn-refresh.htmx-request::after, .recent-feeds-card .btn-refresh.is-busy::after { animation: spin .65s linear infinite; opacity: 1; transform: translateY(-50%) scale(1); } .btn.btn-primary .btn-label { position: relative; z-index: 1; } .btn.btn-primary.is-busy { position: relative; color: rgba(255, 255, 255, .85); } .btn.btn-primary.is-busy::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at top left, rgba(255, 255, 255, .35), transparent 55%), radial-gradient(circle at bottom right, rgba(0, 0, 0, .16), transparent 60%); opacity: .9; animation: buttonPulse 1.2s ease-in-out infinite; pointer-events: none; z-index: 0; } /* Loading state helper (JS can add .is-busy on buttons) */ .btn.is-busy, .btn[aria-busy="true"] { pointer-events: none; opacity: .85; } .btn.is-busy::after { pointer-events: none; } .copy-ok { transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; box-shadow: 0 0 0 .1rem rgba(0, 173, 181, .25); } .spinner { width: 1rem; height: 1rem; border: .2rem solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: -.2rem; margin-right: .35rem; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes accentDrift { 0% { transform: scale(1) translate3d(0, 0, 0) rotate(0deg); } 50% { transform: scale(1.04) translate3d(4px, -3px, 0) rotate(2deg); } 100% { transform: scale(1.06) translate3d(-3px, 5px, 0) rotate(-2deg); } } @keyframes buttonPulse { 0% { opacity: .5; } 50% { opacity: .9; } 100% { opacity: .5; } } /* ------------------------------ Result area ------------------------------ */ #resultCard.d-none { display: none !important; } .feed-url-input { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } #resultBox .input-group { background: rgba(18, 22, 33, .72); border-radius: 12px; padding: .35rem; border: 1px solid rgba(255, 255, 255, .05); } #resultBox .input-group .form-control { background: transparent; border: none; color: inherit; box-shadow: none; } #resultBox .input-group .form-control:focus { box-shadow: none; } #resultCard .muted { color: rgba(227, 230, 237, .74); } [data-bs-theme="light"] #resultCard .muted { color: rgba(28, 34, 48, .64); } /* Small “status breadcrumb” line under the success box */ .status-crumb { color: var(--bs-secondary-color); font-size: .875rem; } /* ------------------------------ Toast / Snack (optional) If JS later calls showNote(), these styles are ready. ------------------------------ */ .snack-stack { position: fixed; top: 12px; right: 12px; z-index: 1080; display: grid; gap: 8px; } .snack { display: flex; align-items: center; gap: .6rem; border-radius: 12px; padding: .6rem .75rem; backdrop-filter: blur(6px); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); background: rgba(20, 24, 35, .9); transform: translateY(-8px); opacity: 0; transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease; box-shadow: var(--sfm-shadow); } .snack.is-in { opacity: 1; transform: translateY(0); } .snack.is-out { opacity: 0; transform: translateY(-6px); } .snack__icon { font-size: 1rem; line-height: 1; } /* Variant tints */ .snack--success { border-color: rgba(25,135,84,.35); } .snack--danger { border-color: rgba(220,53,69,.35); } .snack--warning { border-color: rgba(255,193,7,.35); } .snack--info { border-color: rgba(13,202,240,.35); } /* ------------------------------ Helpers ------------------------------ */ .text-secondary { color: var(--bs-secondary-color) !important; } .link-highlight { color: var(--bs-link-color); text-decoration: underline; } .link-highlight:hover { color: var(--bs-link-hover-color); } [data-bs-theme="light"] .link-light { color: #008a92 !important; } [data-bs-theme="light"] .link-light:hover { color: #006e74 !important; } .footnote { font-size: .85rem; line-height: 1.6; margin-top: 2.25rem; color: rgba(238, 238, 238, .85); text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; } [data-bs-theme="light"] .footnote { color: rgba(34, 40, 49, .66); } .muted strong { color: #f1f3f9; } [data-bs-theme="light"] .muted strong { color: #1c2230; } code { background: rgba(255,255,255,.04); border: 1px solid var(--bs-border-color); border-radius: 6px; padding: .15rem .35rem; } @media (max-width: 991.98px) { #resultCard { margin-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); } } @media (max-width: 575.98px) { .card { border-radius: 12px; } .card .card-body { padding: 1.1rem 1rem; } #generateBtn, #clearBtn { flex: 1 1 100%; } } /* Give the main hero a little breathing room on very small screens */ @media (max-width: 380px) { h1, .h1, .h2, .h3 { font-size: 1.05rem; } } #hintCard .muted { color: rgba(227, 230, 237, .78); } [data-bs-theme="light"] #hintCard .muted { color: rgba(28, 34, 48, .7); } [data-bs-theme="light"] #hintCard strong { color: #1c2230; } /* Ensure Bootstrap Icons display properly */ .bi { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; } /* Feature card icons enhancement */ .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.5rem; background: var(--bs-primary); color: white; font-size: 1.5rem; margin-bottom: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .feature-icon .bi { width: 1.5rem; height: 1.5rem; vertical-align: 0; } [data-bs-theme="light"] .feature-icon { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); } [data-bs-theme="dark"] .feature-icon { background: linear-gradient(135deg, #fb923c 0%, #f97316 100%); box-shadow: 0 4px 14px 0 rgba(251, 146, 60, 0.3); } .feature-card:hover .feature-icon { transform: translateY(-2px); box-shadow: 0 8px 25px 0 rgba(249, 115, 22, 0.4); } /* Animation for loading indicator */ .htmx-indicator .bi-arrow-clockwise { animation: spin 1s linear infinite; color: var(--bs-primary); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Button icon hover effects */ .btn .bi { transition: transform 0.15s ease; } .btn:hover .bi { transform: scale(1.1); } .btn-icon .bi { transition: transform 0.15s ease, color 0.15s ease; } .btn-icon:hover .bi { transform: rotate(90deg); } /* Theme toggle enhancements */ #themeToggle:hover .bi-sun-fill, #themeToggle:hover .bi-moon-fill { color: var(--bs-primary); transform: scale(1.1); } /* Success checkmarks enhancement */ .bi-check-circle-fill { animation: fadeInScale 0.3s ease-out; } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* Footer link icons */ footer .bi { transition: color 0.2s ease, transform 0.2s ease; } footer a:hover .bi { color: var(--bs-primary); transform: translateY(-1px); } /* Responsive icon adjustments */ @media (max-width: 576px) { .feature-icon { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; } .feature-icon .bi { width: 1.25rem; height: 1.25rem; } } /* Bootstrap Icons should load properly - removed fallbacks */