/*
* RealUseAI Bootstrap 5 Theme Override
* =====================================
* Replicates the visual identity of the RealUseAI Tailwind CSS template.
* Load this file AFTER bootstrap.min.css (and before your own styles).
*
* Required in your :
*
*
*
*
*/
body,
html {
background-color: #f9fafb;
}
.intl-tel-input {
width: 100%;
}
.iti {
width: 100%;
}
.my-indicator {
display: none;
}
.htmx-request .my-indicator {
display: inline;
}
.htmx-request.my-indicator {
display: inline;
}
.spinner {
display: inline-block;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ============================================================
1. CSS CUSTOM PROPERTIES (Design Tokens)
============================================================ */
:root {
/* --- Brand Colors --- */
--rai-indigo-50: #eef2ff;
--rai-indigo-100: #e0e7ff;
--rai-indigo-500: #6366f1;
--rai-indigo-600: #4f46e5;
--rai-indigo-700: #4338ca;
--rai-purple-500: #a855f7;
--rai-purple-600: #9333ea;
--rai-pink-600: #db2777;
--rai-amber-100: #fef3c7;
--rai-amber-400: #fbbf24;
--rai-amber-500: #f59e0b;
--rai-amber-800: #92400e;
--rai-green-50: #f0fdf4;
--rai-green-200: #bbf7d0;
--rai-green-500: #22c55e;
--rai-green-600: #16a34a;
--rai-orange-50: #fff7ed;
--rai-orange-500: #f97316;
--rai-blue-500: #3b82f6;
--rai-red-400: #f87171;
/* --- Neutrals --- */
--rai-gray-50: #f9fafb;
--rai-gray-100: #f3f4f6;
--rai-gray-200: #e5e7eb;
--rai-gray-300: #d1d5db;
--rai-gray-400: #9ca3af;
--rai-gray-500: #6b7280;
--rai-gray-600: #4b5563;
--rai-gray-700: #374151;
--rai-gray-800: #1f2937;
--rai-gray-900: #111827;
/* --- Bootstrap overrides via CSS vars --- */
--bs-primary: var(--rai-indigo-600);
--bs-primary-rgb: 79, 70, 229;
--bs-secondary-rgb: 107, 114, 128;
--bs-body-bg: var(--rai-gray-50);
--bs-body-color: var(--rai-gray-900);
--bs-body-font-family: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
--bs-body-font-size: 0.9375rem;
/* ~15px */
--bs-body-line-height: 1.6;
--bs-border-color: var(--rai-gray-200);
--bs-border-radius: 0.5rem;
/* 8px */
--bs-border-radius-sm: 0.375rem;
/* 6px */
--bs-border-radius-lg: 0.75rem;
/* 12px */
--bs-border-radius-xl: 1rem;
/* 16px */
--bs-border-radius-xxl: 1.25rem;
/* 20px */
--bs-link-color: var(--rai-indigo-600);
--bs-link-hover-color: var(--rai-indigo-700);
--bs-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
--bs-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
--bs-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
/* ============================================================
2. BASE / RESET
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: var(--bs-body-font-family);
background-color: var(--rai-gray-50);
color: var(--rai-gray-900);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--rai-indigo-600);
text-decoration: none;
transition: color .15s ease;
}
a:hover {
color: var(--rai-indigo-700);
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: 'Poppins', 'Inter', sans-serif;
font-weight: 700;
color: var(--rai-gray-900);
line-height: 1.25;
}
/* Brand gradient title (matches .text-xl.font-bold.bg-gradient-to-r) */
.brand-title {
font-weight: 700;
background: linear-gradient(to right, var(--rai-indigo-600), #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-muted {
color: var(--rai-gray-500) !important;
}
.text-secondary {
color: var(--rai-gray-600) !important;
}
/* Small helper text */
small,
.small {
font-size: 0.8125rem;
}
/* ============================================================
4. NAVBAR (matches the white top bar)
============================================================ */
.navbar {
background-color: #fff !important;
border-bottom: 1px solid var(--rai-gray-200);
padding-top: 1rem;
padding-bottom: 1rem;
box-shadow: none;
}
.navbar-brand {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 1.25rem;
display: flex;
align-items: center;
gap: .5rem;
}
.navbar-brand img {
height: 2rem;
width: 2rem;
}
.navbar-nav .nav-link {
color: var(--rai-gray-700);
font-size: .9375rem;
font-weight: 400;
padding-left: .5rem;
padding-right: .5rem;
transition: color .15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--rai-indigo-600);
}
.navbar-nav .nav-link.active {
font-weight: 500;
}
/* Avatar pill (like the "JD" circle button) */
.navbar-avatar {
width: 2rem;
height: 2rem;
border-radius: 9999px;
background-color: var(--rai-indigo-500);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .875rem;
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color .15s ease;
}
.navbar-avatar:hover {
background-color: var(--rai-indigo-600);
}
/* Search bar inside navbar */
.navbar-search {
position: relative;
}
.navbar-search .form-control {
background-color: var(--rai-gray-100);
border: none;
border-radius: 9999px;
padding: .5rem 1rem .5rem 2.5rem;
font-size: .875rem;
width: 16rem;
transition: box-shadow .15s ease;
}
.navbar-search .form-control:focus {
background-color: var(--rai-gray-100);
box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .25);
}
.navbar-search .search-icon {
position: absolute;
left: .75rem;
top: 50%;
transform: translateY(-50%);
color: var(--rai-gray-400);
pointer-events: none;
font-size: 1rem;
}
/* ============================================================
5. SIDEBAR (matches the white left nav)
============================================================ */
.sidebar {
width: 16rem;
/* 256px = w-64 */
background-color: #fff;
border-right: 1px solid var(--rai-gray-200);
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.sidebar .nav-link {
display: flex;
align-items: center;
gap: .75rem;
padding: .75rem 1rem;
border-radius: .5rem;
color: var(--rai-gray-700);
font-weight: 500;
font-size: .9375rem;
transition: background-color .15s ease, color .15s ease;
}
.sidebar .nav-link:hover {
background-color: var(--rai-gray-50);
color: var(--rai-gray-900);
}
.sidebar .nav-link.active {
background-color: var(--rai-indigo-50);
color: var(--rai-indigo-600);
}
.sidebar .nav-link i {
font-size: 1.125rem;
}
.sidebar-footer {
border-top: 1px solid var(--rai-gray-200);
padding: 1rem;
}
/* ============================================================
6. BUTTONS
============================================================ */
/* Primary (indigo) */
.btn-primary {
--bs-btn-bg: var(--rai-indigo-600);
--bs-btn-border-color: var(--rai-indigo-600);
--bs-btn-hover-bg: var(--rai-indigo-700);
--bs-btn-hover-border-color: var(--rai-indigo-700);
--bs-btn-active-bg: var(--rai-indigo-700);
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-focus-shadow-rgb: 79, 70, 229;
border-radius: .5rem;
font-weight: 500;
font-size: .9375rem;
padding: .5rem 1.5rem;
transition: background-color .15s ease, border-color .15s ease;
}
/* White button on colored bg (like "Explore All Apps") */
.btn-white {
background-color: #fff;
border-color: #fff;
color: var(--rai-indigo-600);
border-radius: .5rem;
font-weight: 500;
padding: .625rem 1.5rem;
transition: background-color .15s ease;
}
.btn-white:hover {
background-color: var(--rai-indigo-50);
border-color: var(--rai-indigo-50);
color: var(--rai-indigo-600);
}
/* Outline/ghost button */
.btn-outline-primary {
--bs-btn-color: var(--rai-indigo-600);
--bs-btn-border-color: var(--rai-indigo-600);
--bs-btn-hover-bg: var(--rai-indigo-600);
--bs-btn-hover-border-color: var(--rai-indigo-600);
border-radius: .5rem;
font-weight: 500;
}
/* Secondary / outline gray */
.btn-outline-secondary {
--bs-btn-color: var(--rai-gray-700);
--bs-btn-border-color: var(--rai-gray-300);
--bs-btn-hover-bg: var(--rai-gray-50);
--bs-btn-hover-border-color: var(--rai-gray-400);
--bs-btn-hover-color: var(--rai-gray-800);
border-radius: .5rem;
font-weight: 500;
}
/* Pill/tag filter button (like category pills in sticky bar) */
.btn-filter {
display: inline-flex;
align-items: center;
gap: .375rem;
padding: .375rem 1rem;
font-size: .875rem;
border-radius: 9999px;
background-color: #fff;
color: var(--rai-gray-700);
border: 1px solid var(--rai-gray-200);
white-space: nowrap;
transition: background-color .15s ease, border-color .15s ease;
cursor: pointer;
}
.btn-filter:hover {
background-color: var(--rai-gray-50);
border-color: var(--rai-gray-300);
color: var(--rai-gray-900);
}
.btn-filter.active {
background-color: var(--rai-indigo-50);
border-color: var(--rai-indigo-600);
color: var(--rai-indigo-600);
font-weight: 500;
}
/* Inline "See All" link-button */
.btn-link-indigo {
display: inline-flex;
align-items: center;
gap: .25rem;
font-size: .875rem;
font-weight: 500;
color: var(--rai-indigo-600);
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color .15s ease;
}
.btn-link-indigo:hover {
color: var(--rai-indigo-700);
}
/* ============================================================
7. CARDS (matches rounded-xl, border, white bg pattern)
============================================================ */
.card {
background-color: #fff;
border: 1px solid var(--rai-gray-200);
border-radius: .75rem;
/* rounded-xl */
box-shadow: none;
overflow: hidden;
transition: border-color .15s ease;
}
.card:hover {
border-color: var(--rai-gray-300);
}
.card-body {
padding: 1rem;
}
/* App card header band (coloured top area) */
.card-header-band {
padding: 1.5rem;
/* background-color set per-app via utility classes */
}
.card-header-band .app-icon-wrap {
width: 4rem;
height: 4rem;
border-radius: .75rem;
background-color: rgba(255, 255, 255, .1);
display: flex;
align-items: center;
justify-content: center;
}
/* App icon square (small, for list/grid views) */
.app-icon {
width: 3rem;
height: 3rem;
border-radius: .75rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.25rem;
}
/* Large app icon (for "App of the Day") */
.app-icon-lg {
width: 6rem;
height: 6rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 2.5rem;
}
/* App card meta text */
.app-card-title {
font-weight: 600;
font-size: .9375rem;
color: var(--rai-gray-900);
}
.app-card-author {
font-size: .875rem;
color: var(--rai-gray-500);
}
.app-card-desc {
font-size: .875rem;
color: var(--rai-gray-600);
}
/* Rating row */
.rating-row {
display: flex;
align-items: center;
gap: .25rem;
font-size: .875rem;
}
.rating-row .star-icon {
color: var(--rai-amber-400);
font-size: .875rem;
}
.rating-row .rating-value {
font-weight: 500;
color: var(--rai-gray-700);
}
.rating-row .review-count {
color: var(--rai-gray-500);
}
.rating-dot {
color: var(--rai-gray-300);
margin: 0 .25rem;
}
/* ============================================================
8. HERO / FEATURED BANNER
(matches the indigo→purple→pink gradient section)
============================================================ */
.hero-banner {
position: relative;
overflow: hidden;
border-radius: 1rem;
background: linear-gradient(135deg, var(--rai-indigo-600) 0%, var(--rai-purple-600) 50%, var(--rai-pink-600) 100%);
padding: 2rem;
color: #fff;
}
@media (min-width: 768px) {
.hero-banner {
padding: 3rem;
}
}
.hero-banner h2 {
color: #fff;
font-size: 1.875rem;
font-weight: 700;
}
@media (min-width: 768px) {
.hero-banner h2 {
font-size: 2.25rem;
}
}
.hero-banner p {
color: rgba(255, 255, 255, .9);
font-size: 1.0625rem;
}
.badge-glass {
display: inline-flex;
align-items: center;
gap: .375rem;
padding: .25rem .75rem;
border-radius: 9999px;
background-color: rgba(255, 255, 255, .2);
backdrop-filter: blur(4px);
font-size: .875rem;
color: #fff;
}
/* ============================================================
9. SECTION HEADERS (icon + title + subtitle pattern)
============================================================ */
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.section-header-left {
display: flex;
align-items: center;
gap: .5rem;
}
.section-header-left .section-icon {
font-size: 1.25rem;
}
.section-header h2 {
font-size: 1.375rem;
font-weight: 700;
color: var(--rai-gray-900);
margin: 0;
}
.section-header .section-subtitle {
font-size: .8125rem;
color: var(--rai-gray-500);
margin: .125rem 0 0;
}
/* ============================================================
10. APP OF THE DAY (amber/orange warm gradient card)
============================================================ */
.card-app-of-day {
background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%);
border: 1px solid #fde68a;
/* amber-200 */
border-radius: .75rem;
padding: 1.5rem;
}
/* ============================================================
11. COLLECTION CARDS (gradient overlay, hover scale)
============================================================ */
.card-collection {
position: relative;
overflow: hidden;
border-radius: .75rem;
padding: 1.5rem;
text-align: left;
cursor: pointer;
border: none;
transition: transform .2s ease;
color: #fff;
}
.card-collection:hover {
transform: scale(1.04);
}
.card-collection .overlay {
position: absolute;
inset: 0;
opacity: .9;
transition: opacity .15s ease;
}
.card-collection:hover .overlay {
opacity: 1;
}
.card-collection .content {
position: relative;
z-index: 1;
}
.card-collection h3 {
color: #fff;
font-size: 1.0625rem;
font-weight: 700;
margin-bottom: .25rem;
}
.card-collection p {
color: rgba(255, 255, 255, .9);
font-size: .875rem;
}
.card-collection .count {
display: inline-flex;
align-items: center;
gap: .25rem;
font-size: .875rem;
color: rgba(255, 255, 255, .9);
}
.card-collection .emoji {
font-size: 2.25rem;
margin-bottom: .75rem;
display: block;
}
/* Preset gradient overlays */
.gradient-blue-cyan {
background: linear-gradient(135deg, var(--rai-blue-500), #06b6d4);
}
.gradient-purple-pink {
background: linear-gradient(135deg, var(--rai-purple-500), #ec4899);
}
.gradient-green {
background: linear-gradient(135deg, var(--rai-green-500), #10b981);
}
.gradient-orange-red {
background: linear-gradient(135deg, var(--rai-orange-500), #ef4444);
}
.gradient-indigo {
background: linear-gradient(135deg, var(--rai-indigo-600), var(--rai-purple-600));
}
/* ============================================================
12. CATEGORY CARDS (white border, hover shadow + scale)
============================================================ */
.card-category {
background-color: #fff;
border: 1px solid var(--rai-gray-200);
border-radius: .75rem;
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: transform .2s ease, border-color .15s ease, box-shadow .15s ease;
}
.card-category:hover {
transform: scale(1.04);
border-color: var(--rai-gray-300);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .07);
}
.card-category .cat-emoji {
font-size: 2.25rem;
margin-bottom: .5rem;
display: block;
}
.card-category h3 {
font-size: .9375rem;
font-weight: 600;
color: var(--rai-gray-900);
margin: 0;
}
/* ============================================================
13. TOP CHARTS LIST (white card with dividers)
============================================================ */
.chart-list {
background-color: #fff;
border: 1px solid var(--rai-gray-200);
border-radius: .75rem;
overflow: hidden;
}
.chart-list-item {
display: flex;
align-items: center;
padding: 1rem;
border-bottom: 1px solid var(--rai-gray-200);
cursor: pointer;
transition: background-color .15s ease;
text-align: left;
background: none;
border-left: none;
border-right: none;
width: 100%;
}
.chart-list-item:last-child {
border-bottom: none;
}
.chart-list-item:hover {
background-color: var(--rai-gray-50);
}
.chart-rank {
width: 2rem;
text-align: center;
font-size: 1.0625rem;
font-weight: 700;
color: var(--rai-gray-400);
flex-shrink: 0;
}
.chart-item-info {
flex: 1;
min-width: 0;
}
.chart-item-info h4 {
font-size: .9375rem;
font-weight: 600;
color: var(--rai-gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.chart-item-info p {
font-size: .8125rem;
color: var(--rai-gray-500);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chart-item-meta {
flex-shrink: 0;
margin-left: 1rem;
text-align: right;
}
.chart-item-meta .rating-val {
font-size: .875rem;
font-weight: 600;
}
.chart-item-meta .dl-count {
font-size: .75rem;
color: var(--rai-gray-500);
}
/* ============================================================
14. CTA BANNER (indigo full-width strip)
============================================================ */
.cta-banner {
background-color: var(--rai-indigo-600);
border-radius: .5rem;
padding: 2rem;
color: #fff;
}
.cta-banner h2 {
color: #fff;
font-size: 1.375rem;
margin-bottom: .5rem;
}
.cta-banner p {
color: #c7d2fe;
margin-bottom: 1.5rem;
}
.cta-banner-image-box {
background-color: rgba(99, 102, 241, .3);
border: 1px solid rgba(165, 180, 252, .3);
border-radius: .5rem;
padding: 1rem;
}
/* ============================================================
15. DEVELOPER SPOTLIGHT (green gradient card)
============================================================ */
.card-developer {
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
border: 1px solid var(--rai-green-200);
border-radius: .75rem;
padding: 1.5rem;
}
.developer-avatar {
width: 4rem;
height: 4rem;
border-radius: 9999px;
background: linear-gradient(135deg, var(--rai-green-500), #10b981);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.375rem;
font-weight: 700;
flex-shrink: 0;
}
/* ============================================================
16. BADGES / TAGS
============================================================ */
.badge-amber {
display: inline-flex;
align-items: center;
padding: .125rem .625rem;
border-radius: 9999px;
font-size: .75rem;
font-weight: 500;
background-color: var(--rai-amber-100);
color: var(--rai-amber-800);
}
/* Generic small category label */
.tag-label {
font-size: .8125rem;
color: var(--rai-gray-500);
}
/* ============================================================
17. STICKY CATEGORY FILTER BAR
============================================================ */
.filter-bar {
background-color: #fff;
border-bottom: 1px solid var(--rai-gray-200);
position: sticky;
top: 0;
z-index: 100;
padding: .75rem 1rem;
}
.filter-bar-inner {
display: flex;
gap: .5rem;
overflow-x: auto;
scrollbar-width: none;
}
.filter-bar-inner::-webkit-scrollbar {
display: none;
}
/* ============================================================
18. FORMS & INPUTS
============================================================ */
.form-control,
.form-select {
border: 1px solid var(--rai-gray-300);
border-radius: .5rem;
font-size: .9375rem;
color: var(--rai-gray-900);
background-color: #fff;
padding: .5rem .875rem;
transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.form-select:focus {
border-color: var(--rai-indigo-500);
box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .2);
outline: none;
}
.form-control::placeholder {
color: var(--rai-gray-400);
}
/* ============================================================
19. FOOTER
============================================================ */
footer {
background-color: #fff;
border-top: 1px solid var(--rai-gray-200);
padding: 2rem 0;
}
footer h3,
footer h6 {
font-weight: 500;
color: var(--rai-gray-800);
font-size: .9375rem;
margin-bottom: 1rem;
}
footer a {
color: var(--rai-gray-600);
font-size: .9375rem;
display: block;
margin-bottom: .5rem;
}
footer a:hover {
color: var(--rai-indigo-600);
}
footer .social-link {
color: var(--rai-gray-500);
display: inline-flex;
font-size: 1.125rem;
}
footer .social-link:hover {
color: var(--rai-indigo-600);
}
/* ============================================================
20. BOTTOM MOBILE NAV (fixed bar)
============================================================ */
.bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
border-top: 1px solid var(--rai-gray-200);
padding: .5rem 1rem;
z-index: 200;
}
@media (max-width: 767px) {
.bottom-nav {
display: flex;
}
}
.bottom-nav-inner {
display: flex;
justify-content: space-around;
width: 100%;
}
.bottom-nav a {
display: flex;
flex-direction: column;
align-items: center;
padding: .5rem;
color: var(--rai-gray-500);
font-size: .75rem;
gap: .125rem;
}
.bottom-nav a i {
font-size: 1.375rem;
}
.bottom-nav a.active {
color: var(--rai-indigo-600);
}
/* ============================================================
21. UTILITIES (gap-fillers for common Tailwind patterns)
============================================================ */
/* Rounded-full */
.rounded-full {
border-radius: 9999px !important;
}
/* Line-clamp (2 lines) */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
overflow: hidden;
}
/* Divider dot */
.dot-divider {
color: var(--rai-gray-300);
margin: 0 .25rem;
}
/* Background colour helpers that match Tailwind app icon colours */
.bg-indigo {
background-color: var(--rai-indigo-600);
}
.bg-purple {
background-color: var(--rai-purple-500);
}
.bg-green {
background-color: var(--rai-green-600);
}
.bg-green-l {
background-color: var(--rai-green-500);
}
.bg-blue {
background-color: var(--rai-blue-500);
}
.bg-orange {
background-color: var(--rai-orange-500);
}
.bg-red {
background-color: var(--rai-red-400);
}
.bg-amber {
background-color: var(--rai-amber-500);
}
/* Star icon fill colour */
.text-amber {
color: var(--rai-amber-400) !important;
}
/* Inline icon alignment */
.icon-inline {
vertical-align: -0.125em;
}
/* Bookmark / action icon */
.btn-icon {
background: none;
border: none;
padding: .25rem;
color: var(--rai-gray-400);
cursor: pointer;
transition: color .15s ease;
}
.btn-icon:hover {
color: var(--rai-gray-600);
}
/* Main content padding / max-width */
.main-content {
padding: 1.5rem 1rem;
max-width: 90rem;
margin-inline: auto;
}
.section-gap {
margin-bottom: 2rem;
}
/* Gradients */
.gradient-text-indigo-purple {
background: linear-gradient(to right, #4f46e5, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Inter', sans-serif;
font-weight: 700 !important;
}
.gradient-text-indigo-purple-pink {
background: linear-gradient(to right, #4f46e5, #7c3aed, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Inter', sans-serif;
font-weight: 700 !important;
}
.gradient-text-purple-pink {
background: linear-gradient(to right, #7c3aed, #db2777);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Inter', sans-serif;
font-weight: 700 !important;
}
.gradient-text-pink-rose {
background: linear-gradient(to right, #ec4899, #e11d48);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Inter', sans-serif;
font-weight: 700 !important;
}
.gradient-text-orange-red {
background: linear-gradient(to right, #ea580c, #dc2626);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Inter', sans-serif;
font-weight: 700 !important;
}
/* ============================================================
22. RESPONSIVE TWEAKS
============================================================ */
@media (max-width: 767px) {
.sidebar {
display: none;
}
footer {
display: none;
}
body {
padding-bottom: 4rem;
}
/* clear fixed bottom nav */
}
@media (min-width: 768px) {
.bottom-nav {
display: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.submit-btn {
transition: transform 0.25s ease;
}
/* 2. The Hover Zoom Effect */
.submit-btn:hover {
/* Zooms in 10% */
transform: scale(1.1);
}