/* ======================== FeelCovered.com CSS Base (Optimized) ======================== */ /* ---------- Root Variables ---------- */ :root { --color-primary: #1F3B4D; --color-secondary: #3C7A6F; --color-accent: #F59E0B; --color-accent-hover: #D97706; --color-accent-dark: #B45309; --color-bg: #FAFAF7; --color-text: #4A4A4A; --color-heading: #212529; --space-0: 0rem; --space-1: 1rem; --space-2: 2rem; --space-3: 3rem; --radius: 4px; } /* ---------- Resets ---------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font: inherit; margin: 0; padding: 0; vertical-align: baseline; } * { margin: 0; padding: 0; box-sizing: border-box; } /* ---------- Font Setup ---------- */ @font-face { font-family: "96 Sans"; font-display: swap; font-weight: 300; src: url("/assets/fonts/96sans/96Sans-Light.woff2") format("woff2"), url("/assets/fonts/96sans/96Sans-Light.woff") format("woff"); } @font-face { font-family: "96 Sans Icons"; src: url("/assets/fonts/96sans/96Sans.woff2") format("woff2"), url("/assets/fonts/96sans/96Sans.woff") format("woff"); } @font-face { font-family: "96 Sans"; font-display: swap; font-weight: 400; src: url("/assets/fonts/96sans/96Sans.woff2") format("woff2"), url("/assets/fonts/96sans/96Sans.woff") format("woff"); } @font-face { font-family: "96 Sans"; font-display: swap; font-weight: 600; src: url("/assets/fonts/96sans/96Sans-Medium.woff2") format("woff2"), url("/assets/fonts/96sans/96Sans-Medium.woff") format("woff"); } @font-face { font-family: "96 Sans"; font-display: swap; font-weight: 700; src: url("/assets/fonts/96sans/96Sans-Bold.woff2") format("woff2"), url("/assets/fonts/96sans/96Sans-Bold.woff") format("woff"); } @font-face { font-family: "96 Sans Condensed"; font-display: swap; font-weight: 700; src: url("/assets/fonts/96sans/96Sans-BoldCondensed.woff2") format("woff2"), url("/assets/fonts/96sans/96Sans-BoldCondensed.woff") format("woff"); } @font-face { font-family: "96 Sans Monospaced"; font-display: swap; font-weight: 400; src: url("/assets/fonts/96sans/96Sans-Monospaced.woff2") format("woff2"), url("/assets/fonts/96sans/96Sans-Monospaced.woff") format("woff"); } /* ---------- Base ---------- */ html, body { font-family: "96 Sans", Arial, 'Segoe UI', Tahoma, sans-serif; background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; } a { color: var(--color-secondary); text-decoration: none; transition: color 0.3s ease; } a:hover { color: #0d6efd; /* unify hover color */ text-decoration: underline; } /* ---------- Layout Containers ---------- */ .container { max-width: 1140px; margin: 0 auto; padding: var(--space-0); } .section { padding: var(--space-2) var(--space-1); } .section.hero { padding-top: var(--space-2); padding-bottom: var(--space-2); } /* ---------- Header & Footer ---------- */ header { padding-top: .5rem; } .header { background-color: var(--color-primary); color: #fff; padding: 1.5rem var(--space-1); } footer { padding-bottom: .5rem; padding-top: .5rem; } .footer { background-color: var(--color-primary); color: #fff; padding: 1.5rem var(--space-1); text-align: center; font-size: 0.9rem; } /* ---------- Headings ---------- */ h1, h2, h3 { color: var(--color-heading); font-weight: 600; margin-bottom: var(--space-1); } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } /* ---------- Light Text Utility (for dark backgrounds) ---------- */ .light-text-mode h1, .light-text-mode h2, .light-text-mode h3, .light-text-mode p, .light-text-mode .lead { color: #ffffff !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); } .light-text-mode .container { padding-left: 2rem; padding-right: 2rem; } .light-text-mode a:not(.btn) { color: #ffc107; } .light-text-mode a:not(.btn):hover { color: #ffdd57; } /* ---------- Buttons ---------- */ .button, .btn { background-color: var(--color-accent); color: #000; padding: 0.6rem 1.25rem; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .button:hover, .btn:hover { background-color: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); } .btn-outline { background-color: transparent; color: var(--color-accent); border: 2px solid var(--color-accent); } .btn-outline:hover { background-color: var(--color-accent); color: #000; } .btn-light { background-color: #fff; color: #000; border: 2px solid #ddd; } .btn-warning { background-color: var(--color-accent); color: #000; border-color: var(--color-accent); font-weight: 700; } .btn-warning:hover { background-color: var(--color-accent-hover); color: #000; border-color: var(--color-accent-hover); } .btn-warning:focus { background-color: var(--color-accent-dark); color: #fff; border-color: var(--color-accent-dark); } /* ---------- Forms ---------- */ form { margin-bottom: var(--space-1); } input[type="text"], input[type="email"], select, textarea { width: 100%; padding: 0.75rem; margin-bottom: var(--space-1); border: 1px solid var(--color-secondary); border-radius: var(--radius); font-size: 1rem; } input:focus, select:focus, textarea:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2); } label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--color-heading); } /* Bootstrap-aligned form tweaks */ .form-control, .form-select { font-size: 1rem; padding: 0.75rem; border: 1px solid #ccc; border-radius: var(--radius); background-color: #fff; box-shadow: none; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .form-control:focus, .form-select:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2); } .form-label { font-weight: 500; margin-bottom: 0.5rem; color: var(--color-heading); } .form-check-input { border-color: #ccc; margin-top: 0.3rem; transition: all 0.2s ease; } .form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); } .form-check-label { margin-left: 0.5rem; color: var(--color-text); } fieldset { border: none; padding: 0; margin: 0; } legend { font-weight: 600; font-size: 1rem; color: var(--color-heading); } button[type="submit"].btn-lg { font-size: 1.1rem; padding: 0.75rem 1.25rem; font-weight: 600; border-radius: var(--radius); background: linear-gradient(135deg, #f5a623, #f38700); } /* WebKit autofill */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #212529 !important; box-shadow: 0 0 0px 1000px #fff inset !important; border-color: #ced4da !important; } input.form-control, select.form-select { border-radius: 6px; border: 1px solid #ccc; padding: 0.65rem 0.75rem; font-size: 1rem; } input.form-control:focus, select.form-select:focus { border-color: #f5a623; box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.25); } /* ---------- Cards ---------- */ .card { background: #fff; border-radius: 8px; border: none; padding: 1.5rem; box-shadow: 0 4px 8px rgba(31, 59, 77, 0.08); margin-bottom: 1rem !important; /* consolidated spacing */ } .card.equal-height { min-height: 480px; max-height: 480px; display: flex; flex-direction: column; overflow: hidden; } .card.highlight { background: linear-gradient(to bottom right, #fffdf8, #fff); border: 1px solid #f5a62333; box-shadow: 0 2px 8px rgba(245, 166, 35, 0.1); border-radius: 10px; } /* ---------- Utilities ---------- */ .bg-light { background-color: var(--color-bg); } .bg-primary { background-color: var(--color-primary); color: #fff; } .text-center { text-align: center; } .text-muted { color: #888; } .mt-1 { margin-top: var(--space-1); } .mb-1 { margin-bottom: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mb-2 { margin-bottom: var(--space-2); } .vertical-align-top { align-items: flex-start; } .user-widget .btn { font-weight: 500; border-radius: var(--radius); } .trusted-form-badge { width: 180px; margin-inline-start: 40px; } /* ---------- Navigation ---------- */ .navbar-nav .nav-link { padding: 0.75rem 1rem; font-weight: 500; transition: all 0.2s ease; } .navbar-nav .nav-link:hover { color: var(--color-accent) !important; } .navbar-nav .dropdown { position: relative; } .dropdown-menu { border: none; border-radius: 8px; padding: 0.5rem; margin-top: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .dropdown-header { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.5rem 1rem; margin-bottom: 0.25rem; } .dropdown-item { border-radius: 6px; transition: all 0.2s ease; font-size: 0.95rem; } .dropdown-item:hover { background-color: #FFF7ED; transform: translateX(4px); padding-left: 1.25rem; } .dropdown-item i { width: 20px; text-align: center; } /* Ensure dropdown stays open when hovering over menu */ .navbar-nav .dropdown:hover .dropdown-menu { display: block; } /* Remove transform on nav-link hover to prevent gap */ .navbar-nav .dropdown:hover .nav-link { color: var(--color-accent) !important; } .nav-link-hover { position: relative; } .nav-link-hover::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0%; height: 2px; background-color: var(--color-accent); transition: width 0.3s ease; } .nav-link-hover:hover::after { width: 100%; } .nav-link-hover:hover { color: var(--color-accent) !important; } /* Sidebar */ .sidebar { width: 220px; background: #f8f9fa; height: 100vh; position: fixed; top: 0; left: 0; padding-top: 70px; border-right: 1px solid #dee2e6; overflow-y: auto; } .sidebar .nav-link { color: #333; padding: 0.75rem 1rem; display: block; text-decoration: none; } .sidebar .dropdown-menu { position: static; float: none; border: none; box-shadow: none; padding-left: 1rem; background: none; } .sidebar .dropdown-item { padding: 0.3rem 1rem; color: #666; text-decoration: none; } .sidebar .nav-link:hover, .sidebar .dropdown-item:hover { background-color: #e9ecef; color: #000; } /* ---------- Hero ---------- */ .hero-image { max-width: 90%; height: auto; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); animation: fadeIn 1s ease-in-out; } .hero-row { min-height: auto !important; align-items: start !important; } .hero-section { padding-top: 2rem; padding-bottom: 2rem; } .hero-overlay .overlay { padding: 2.25rem 1rem; min-height: 340px; } .hero-overlay h1, .hero-overlay p { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75); } .hero-overlay h1 { font-size: 2rem; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.6); color: whitesmoke; } /* ---------- Animations ---------- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Lists / Related ---------- */ .list-group-item { border-left: 4px solid transparent; /* prevents shift on hover */ transition: all 0.2s ease-in-out; } .list-group-item:hover { background-color: #fff9f1; border-left-color: var(--color-accent); color: var(--color-accent); text-decoration: none; } .related-articles .object-fit-cover { object-fit: cover; } .related-article-listing { border-radius: 10px; background: linear-gradient(to bottom right, #e4d4ad, var(--color-accent)); } /* Related scroll pane: desktop/tablet only */ @media (min-width: 768px) { .related-articles .list-group-item { padding-left: 0; padding-right: 0; } .related-articles .list-group { max-height: 80vh; overflow-y: auto; } .related-articles .related-scroll-pane { position: relative; max-height: calc(100vh - 260px); overflow: auto; padding-right: 2px; padding-bottom: 14px; /* space before bottom cap */ } } /* Bottom cap */ .related-articles .related-bottom-bar { position: sticky; bottom: 0; height: 14px; border-top: 1px solid #dee2e6; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 1) 100%), linear-gradient(90deg, #f1f3f5, #e9ecef); border-radius: 0 0 .5rem .5rem; box-shadow: 0 -2px 6px rgba(0, 0, 0, .04); margin: 0 -8px -8px; } /* Dark scheme for the cap */ @media (prefers-color-scheme: dark) { .related-articles .related-bottom-bar { background: linear-gradient(to bottom, rgba(16, 18, 20, 0), rgba(16, 18, 20, .85) 60%, rgba(16, 18, 20, 1) 100%), linear-gradient(90deg, #2a2e33, #24282d); border-top-color: rgba(255, 255, 255, .08); } } /* ---------- Framed Layout ---------- */ body.framed-layout { background-color: #f5f5f5; } .framed-background { display: flex; justify-content: center; background-color: #f5f5f5; padding-left: 0; padding-right: 0; } .framed-content { background-color: #fff; max-width: 1140px; width: 100%; padding-top: 0 !important; margin-top: 0 !important; padding-left: 1rem; padding-right: 1rem; box-shadow: 0 0 0 100vmax #f5f5f5; clip-path: inset(0 -100vmax); } .framed-content.container { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-left: 20px !important; padding-right: 20px !important; } /* ---------- Sections (final unified rules) ---------- */ section { padding-top: 2rem; padding-bottom: 2rem; } /* unified */ section.container { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .row.g-4 > .col-md-6 { display: flex; flex-direction: column; } /* ---------- Trust/Thank-you Bars ---------- */ .trust-bar { display: inline-block; background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); text-shadow: none; } .thank-you-bar { background-color: var(--color-accent); color: #fff; display: inline-block; padding: 0.4rem 1rem; margin: 1rem 1rem; border-radius: 999px; font-size: 1.5rem; font-weight: 500; text-align: center; text-shadow: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* ---------- Newspaper look ---------- */ .newspaper { font-size: 1rem !important; padding: 20px; margin: 0; background: #FAF0E6; border-radius: 10px; } .synopsis { font-size: 1rem !important; padding: 20px; margin: 0; color: whitesmoke; background: #262826; border-radius: 10px; border-width: 4px; border-color: #957B5B; } .synopsis h2 { font-size: 1.5rem; color: whitesmoke; } .spotlight { font-size: 1rem !important; padding: 20px; margin: 0; background: #fafae3; color: #d0d3d0; border-radius: 10px; border-color: #957B5B; } /* ---------- Navbar collapse color on mobile ---------- */ @media (max-width: 768px) { .navbar-collapse { background-color: #1F3B4D; } .hero-image { margin-top: var(--space-1); } /* Ads (mobile tweaks) */ .ad-card { gap: 0; } .ad-img { max-width: 100%; width: 100%; } .ad-cta { min-height: 48px; } /* Compact header for mobile */ header { padding-top: 0; padding-bottom: 0; } header .navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; min-height: auto; } header .navbar-brand { padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 1rem; } header .navbar-brand img { width: 32px !important; height: 32px !important; } /* Reduce container top margin/padding */ .container.mt-4 { margin-top: 0.5rem !important; } /* Remove clip-path on mobile to allow position:fixed elements */ .framed-content { clip-path: none; box-shadow: none; } } /* ---------- Other responsive tweaks ---------- */ @media (min-width: 768px) { .section { padding: var(--space-3) var(--space-2); } .nav-item.dropdown:hover .dropdown-menu { display: block; } .section.hero { padding-top: var(--space-3); padding-bottom: var(--space-3); } .hero-overlay .overlay { min-height: 420px; padding: 4rem 2rem; } .hero-overlay h1 { font-size: 2.75rem; } } @media (max-width: 576px) { .hide-mobile { display: none !important; } .text-center-mobile { text-align: center !important; } .user-widget { width: 100%; text-align: left; } } @media (max-width: 991px) { .info-box { order: -1; margin-bottom: var(--space-2); } } /* Spotlight polish */ .spotlight-card { border: 1px solid #f1f3f5; background: #fffefc; } .spotlight-media img { transition: transform .25s ease; } .spotlight-media:hover img { transform: scale(1.03); } /* gentle lift on hover */ .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; /* clamp title to 3 lines */ -webkit-box-orient: vertical; overflow: hidden; } /* Mobile: remove sticky so it flows naturally */ @media (max-width: 768px) { .sticky-md-top { position: static !important; } } /* Light column separators only on md+ */ @media (min-width: 768px) { .border-end-md { border-right: 1px solid #eef0f2; } } /* Make the panel’s background subtly different on the spotlight side */ .bg-body-tertiary { background-color: #f8f9fb; } /* When Spotlight sits inside the panel, soften its card */ .spotlight-inset .spotlight-card { box-shadow: none; border: 1px solid #eef0f2; background: #fff; } /* Big rounded corners for the unified panel */ .rounded-4 { border-radius: 1rem !important; } /* Submenu positioning */ .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -0.125rem; display: none; /* Hidden by default */ } .dropdown-submenu:hover > .dropdown-menu { display: block; /* Show on hover */ } .dropdown-submenu > .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid transparent; border-right: 0; border-bottom: 0.3em solid transparent; border-left: 0.3em solid; float: right; margin-top: 0.5rem; } /* Verticals dropdown scroll for tall list */ #verticalsDropdown + .dropdown-menu { max-height: 80vh; overflow-y: auto; } /* ---------- Form Validation Improvements ---------- */ .was-validated .form-control:valid, .form-control.is-valid { border-color: #28a745; background-image: none; padding-right: calc(1.5em + 0.75rem); } .was-validated .form-control:invalid, .form-control.is-invalid { border-color: #dc3545; background-image: none; padding-right: calc(1.5em + 0.75rem); } .invalid-feedback { display: block; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; } .valid-feedback { display: block; color: #28a745; font-size: 0.875rem; margin-top: 0.25rem; } .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25); border-color: var(--color-accent); } .form-select:focus { box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25); border-color: var(--color-accent); } /* ---------- Accessibility Improvements ---------- */ .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .btn, .dropdown-item, .nav-link, .testimonial-card { transition: none !important; transform: none !important; } } /* Skip to main content link for screen readers */ .skip-to-main { position: absolute; left: -9999px; z-index: 999; padding: 1em; background-color: var(--color-accent); color: #000; text-decoration: none; font-weight: bold; } .skip-to-main:focus { left: 50%; transform: translateX(-50%); top: 1em; } /* ---------- Image Optimization ---------- */ img { max-width: 100%; height: auto; } img[loading="lazy"] { opacity: 0; transition: opacity 0.3s ease-in; } img[loading="lazy"].loaded, img[loading="lazy"]:not([src=""]) { opacity: 1; } .img-fade-in { animation: fadeIn 0.6s ease-in; } picture { display: block; } picture img { width: 100%; height: auto; display: block; } /* Hero background image optimization */ .hero-overlay .bg-image { background-attachment: scroll; will-change: transform; } @media (min-width: 768px) { .hero-overlay .bg-image { background-attachment: fixed; } } /* Prevent layout shift during image load */ .aspect-ratio-box { position: relative; width: 100%; } .aspect-ratio-box::before { content: ""; display: block; padding-top: 56.25%; } .aspect-ratio-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }