/* IfOnly.ai Premium Bitcoin Theme */
:root {
--brand-name: "IfOnly";
/* Bitcoin Orange as Primary */
--primary-color: #F7931A;
--primary-hover: #ff9f2a;
--primary-dark: #e5851a;
/* Dark Theme Colors */
--bg-black: #0a0a0a;
--bg-card: #1a1a1a;
--bg-card-hover: #222222;
--bg-input: #2a2a2a;
--border-color: #333333;
/* Text Colors */
--text-white: #ffffff;
--text-muted: #a0a0a0;
--text-light: #cccccc;
/* Status Colors */
--success-color: #48bb78;
--warning-color: #F7931A;
--danger-color: #ff4444;
/* Shadows for Dark Theme */
--soft-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
--glow-orange: 0 0 20px rgba(247, 147, 26, 0.3);
--glow-orange-strong: 0 0 30px rgba(247, 147, 26, 0.5);
}
/* Global Reset for Dark Theme */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg-black);
color: var(--text-white);
line-height: 1.6;
}
/* Bootstrap Overrides for Dark Theme */
.bg-white {
background-color: var(--bg-card) !important;
}
.bg-light {
background-color: var(--bg-card) !important;
}
.text-dark {
color: var(--text-white) !important;
}
.text-muted {
color: var(--text-muted) !important;
}
.card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
color: var(--text-white);
}
.card-body {
background-color: var(--bg-card);
}
/* Navigation */
.navbar {
background-color: var(--bg-black) !important;
border-bottom: 1px solid var(--border-color);
overflow: visible !important;
}
.navbar-brand {
font-size: 1.5rem;
color: var(--primary-color) !important;
font-weight: 700;
}
.navbar-light .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link {
color: var(--text-light) !important;
font-weight: 500;
transition: color 0.3s;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:hover {
color: var(--primary-color) !important;
}
/* Dropdown Navigation Fixes and Enhancements */
.navbar-collapse {
overflow: visible !important;
}
.navbar .dropdown {
position: static;
}
.navbar .dropdown-menu {
z-index: 1050;
position: absolute;
background-color: var(--bg-black);
border: 1px solid var(--border-color);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
margin-top: 0.5rem;
min-width: 200px;
}
.navbar .dropdown-menu.dropdown-menu-end {
right: 0;
left: auto;
}
.navbar .dropdown-item {
color: var(--text-light);
padding: 0.5rem 1rem;
transition: all 0.2s;
background-color: transparent;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
background-color: rgba(247, 147, 26, 0.1);
color: var(--primary-color);
}
.navbar .dropdown-item.text-danger {
color: #dc3545 !important;
}
.navbar .dropdown-item.text-danger:hover {
background-color: rgba(220, 53, 69, 0.1);
color: #ff6b6b !important;
}
.navbar .dropdown-header {
color: var(--primary-color);
font-size: 0.875rem;
padding: 0.5rem 1rem;
font-weight: 600;
}
.navbar .dropdown-divider {
border-color: var(--border-color);
margin: 0.25rem 0;
}
.navbar .dropdown-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
}
.navbar .dropdown-toggle::after {
margin-left: 0.25rem;
}
/* Desktop dropdown - keep static positioning */
@media (min-width: 992px) {
/* Keep dropdown position static to let Bootstrap handle positioning */
.navbar .dropdown {
position: static;
}
}
/* Mobile responsive dropdown */
@media (max-width: 991px) {
.navbar .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar .dropdown-item {
padding-left: 2rem;
color: var(--text-light);
}
.navbar .dropdown-header {
padding-left: 2rem;
}
.navbar .dropdown-divider {
margin: 0.5rem 1rem;
}
}
/* Hero Section */
.hero-section h1 {
color: var(--primary-color) !important;
font-weight: 700;
}
.hero-section .lead,
.hero-section p {
color: var(--text-light) !important;
}
/* Teaser Card */
.teaser-card {
background-color: var(--bg-card) !important;
border: 1px solid var(--border-color) !important;
transition: transform 0.2s, box-shadow 0.2s;
}
.teaser-card:hover {
transform: translateY(-2px);
box-shadow: var(--glow-orange);
background-color: var(--bg-card-hover) !important;
}
/* Buttons - Global Rules to Prevent Text Wrapping */
.btn {
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
min-width: fit-content;
display: inline-block;
word-break: keep-all !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
-ms-hyphens: none !important;
}
.btn-primary {
background: var(--primary-color) !important;
border: none !important;
color: var(--bg-black) !important;
font-weight: 600;
transition: all 0.3s;
white-space: nowrap !important;
}
.btn-primary:hover {
background: var(--primary-hover) !important;
box-shadow: var(--glow-orange);
transform: translateY(-2px);
}
.btn-secondary {
background: var(--bg-card) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-white) !important;
white-space: nowrap !important;
}
.btn-secondary:hover {
background: var(--bg-card-hover) !important;
border-color: var(--primary-color) !important;
}
.btn-outline-primary {
color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
background: transparent !important;
white-space: nowrap !important;
}
.btn-outline-primary:hover {
background: var(--primary-color) !important;
color: var(--bg-black) !important;
}
/* Forms */
.form-control,
.form-select {
background-color: var(--bg-input) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-white) !important;
}
.form-control:focus,
.form-select:focus {
background-color: var(--bg-input) !important;
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 0.2rem rgba(247, 147, 26, 0.25) !important;
color: var(--text-white) !important;
}
.form-control::placeholder {
color: var(--text-muted) !important;
}
/* Badges */
.badge {
background: var(--bg-card) !important;
color: var(--text-light) !important;
border: 1px solid var(--border-color);
}
/* 3-Step Guide */
.three-step-guide {
margin-top: 1.5rem;
}
.step-item {
padding: 0.25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: var(--bg-card);
border-radius: 0.5rem;
border: 1px solid var(--border-color);
}
.step-icon {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
}
.step-icon i {
width: 24px;
height: 24px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.hero-section h1 {
font-size: 2rem;
}
.hero-section .lead {
font-size: 1rem;
}
.teaser-card {
font-size: 0.9rem;
}
.teaser-card .fw-bold {
font-size: 1.1rem !important;
}
.three-step-guide {
padding: 0 !important;
}
.three-step-guide .step-item {
padding: 0.1rem;
}
.three-step-guide .step-icon {
margin-bottom: 0.25rem !important;
}
.step-icon i {
width: 20px !important;
height: 20px !important;
}
}
@media (max-width: 576px) {
.hero-section {
padding: 2rem 0;
}
.teaser-card {
padding: 0.75rem !important;
}
.three-step-guide .row {
gap: 0.5rem !important;
}
}
/* Cards */
.card {
border-radius: 1rem;
box-shadow: var(--soft-shadow);
background-color: var(--bg-card) !important;
border: 1px solid var(--border-color) !important;
}
.card-body {
padding: 2rem;
background-color: transparent !important;
}
/* Skeleton Loading States */
.skeleton {
background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 0.5rem;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.skeleton-text {
height: 1.2rem;
margin-bottom: 0.5rem;
border-radius: 0.25rem;
}
.skeleton-title {
height: 2rem;
width: 60%;
margin-bottom: 1rem;
}
.skeleton-card {
height: 200px;
border-radius: 1rem;
margin-bottom: 1rem;
}
.skeleton-button {
height: 3rem;
width: 150px;
border-radius: 2rem;
}
/* Loading overlay for forms */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.loading-overlay.active {
opacity: 1;
visibility: visible;
}
.loading-content {
background: var(--bg-card);
border: 1px solid var(--border-color);
padding: 2.5rem;
border-radius: 2rem;
text-align: center;
max-width: 400px;
animation: slideUp 0.4s ease;
color: var(--text-white);
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.loading-spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(247, 147, 26, 0.2);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 1.5rem;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Links */
a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: var(--primary-hover);
text-decoration: none;
}
/* Footer */
.footer {
background-color: var(--bg-black);
border-top: 1px solid var(--border-color);
color: var(--text-muted);
}
.footer a {
color: var(--text-light);
}
.footer a:hover {
color: var(--primary-color);
}
/* Alerts */
.alert {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
color: var(--text-white);
}
.alert-primary {
background-color: rgba(247, 147, 26, 0.1);
border-color: var(--primary-color);
color: var(--primary-color);
}
.alert-success {
background-color: rgba(72, 187, 120, 0.1);
border-color: var(--success-color);
color: var(--success-color);
}
/* Tables */
.table {
color: var(--text-white);
}
.table thead th {
border-bottom: 2px solid var(--border-color);
color: var(--primary-color);
}
.table td, .table th {
border-color: var(--border-color);
}
/* Modal - Updated for Bitcoin theme */
/* These styles are now defined in the detailed modal section */
/* Form Controls Override */
.form-control {
border-radius: 0.75rem;
border: 1px solid var(--border-color) !important;
background-color: var(--bg-input) !important;
padding: 0.75rem 1rem;
font-size: 1.1rem;
transition: all 0.2s ease;
color: var(--text-white) !important;
}
.form-control:focus {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 0.2rem rgba(247, 147, 26, 0.25) !important;
background-color: var(--bg-input) !important;
}
.form-control-lg {
padding: 1rem 1.25rem;
font-size: 1.2rem;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
color: var(--primary-color);
}
.text-primary {
color: var(--primary-color) !important;
}
.text-white {
color: var(--text-white) !important;
}
.text-success {
color: var(--success-color) !important;
}
/* Interactive Sliders */
.date-slider-container, .amount-slider-container {
transition: all 0.3s ease;
background-color: var(--bg-card);
border: 1px solid var(--border-color);
}
.date-slider-container:hover, .amount-slider-container:hover {
border-color: var(--primary-color) !important;
box-shadow: var(--glow-orange);
}
/* Custom Scrollbar for Dark Theme */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-black);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
/* Submit Button Highlight Effect */
.submit-btn-highlight {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.submit-btn-highlight.highlight-active {
animation: submit-btn-popup 2.5s ease-out;
border: 3px solid var(--primary-color) !important;
box-shadow: 0 0 30px rgba(247, 147, 26, 0.7), 0 0 60px rgba(247, 147, 26, 0.5) !important;
}
@keyframes submit-btn-popup {
0% {
transform: scale(0.8);
opacity: 0;
box-shadow: 0 0 0 rgba(247, 147, 26, 0);
}
20% {
transform: scale(1.1);
opacity: 1;
box-shadow: 0 0 40px rgba(247, 147, 26, 0.8), 0 0 80px rgba(247, 147, 26, 0.6);
}
40% {
transform: scale(0.95);
box-shadow: 0 0 30px rgba(247, 147, 26, 0.7), 0 0 60px rgba(247, 147, 26, 0.5);
}
60% {
transform: scale(1.05);
box-shadow: 0 0 35px rgba(247, 147, 26, 0.8), 0 0 70px rgba(247, 147, 26, 0.6);
}
100% {
transform: scale(1);
opacity: 1;
box-shadow: 0 0 25px rgba(247, 147, 26, 0.6), 0 0 50px rgba(247, 147, 26, 0.4);
}
}
/* Loading Modal Animations */
@keyframes pulse-bitcoin {
0%, 100% {
transform: scale(1);
box-shadow: 0 10px 30px rgba(247, 147, 26, 0.3);
}
50% {
transform: scale(1.1);
box-shadow: 0 15px 40px rgba(247, 147, 26, 0.5);
}
}
.form-range {
height: 8px;
-webkit-appearance: none;
appearance: none;
background: linear-gradient(to right, #e5e7eb 0%, var(--primary-color) 0%, var(--primary-color) 50%, #e5e7eb 50%);
border-radius: 10px;
outline: none;
}
.form-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: var(--primary-color);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.form-range::-moz-range-thumb {
height: 20px;
width: 20px;
border-radius: 50%;
background: var(--primary-color);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.form-label {
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 0.75rem;
}
.form-text {
color: #718096;
font-size: 0.9rem;
}
/* Buttons */
.btn {
border-radius: 0.75rem;
font-weight: 600;
transition: all 0.2s ease;
border: none;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.btn-primary:hover {
background-color: #e8831a;
border-color: #e8831a;
transform: translateY(-2px);
box-shadow: var(--soft-shadow);
}
.btn-lg {
padding: 0.75rem 2rem;
font-size: 1.1rem;
}
.btn-outline-secondary {
color: var(--secondary-color);
border-color: #cbd5e0;
}
.btn-outline-secondary:hover {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
/* Alerts */
.alert {
border-radius: 0.75rem;
border: none;
padding: 1.5rem;
}
.alert-primary {
background-color: rgba(247, 147, 26, 0.1);
color: var(--primary-color);
}
.alert-info {
background-color: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.alert-danger {
background-color: rgba(245, 101, 101, 0.1);
color: var(--danger-color);
}
/* Icons */
[data-feather] {
width: 20px;
height: 20px;
vertical-align: text-bottom;
}
/* Result page specific styles */
.bg-light {
background-color: #f1f5f9 !important;
}
/* Animation for cards */
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Example cards */
.card.h-100.border-0.bg-light {
background-color: rgba(247, 147, 26, 0.05) !important;
transition: all 0.2s ease;
}
.card.h-100.border-0.bg-light:hover {
background-color: rgba(247, 147, 26, 0.1) !important;
}
/* Footer */
footer {
background-color: white !important;
color: #718096;
font-size: 0.9rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-section h1 {
font-size: 2.5rem;
}
.card-body {
padding: 1.5rem;
}
.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
}
/* Bitcoin symbol styling */
.text-warning {
color: var(--primary-color) !important;
}
/* Success states */
.text-success {
color: var(--success-color) !important;
}
/* Custom spacing */
.mb-6 {
margin-bottom: 4rem !important;
}
.py-6 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
/* Loading states */
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Form validation styles */
.was-validated .form-control:valid {
border-color: var(--success-color);
}
.was-validated .form-control:invalid {
border-color: var(--danger-color);
}
/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* Enhanced IfOnly.ai - Story Page UI */
/* Expense Type Sections */
.expense-type-sections {
margin-bottom: 1rem;
}
.expense-section {
background: #f9fafb;
border-radius: 1rem;
padding: 1rem;
margin-bottom: 1.5rem;
border: 1px solid #e5e7eb;
}
.expense-section .section-header {
color: #4b5563;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e5e7eb;
}
/* Responsive Grid System */
.expense-section .expense-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100px, 30vw), 1fr));
gap: clamp(0.5rem, 2vw, 1rem);
}
/* Expense Type Grid Selector */
.expense-type-grid {
margin-bottom: 1rem;
}
.expense-card {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: clamp(0.75rem, 2vw, 1rem);
padding: clamp(0.875rem, 3vw, 1.5rem);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
min-height: clamp(90px, 15vh, 130px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.expense-card:hover {
border-color: var(--primary-color);
background: #f8faff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 108, 33, 0.15);
}
.expense-card.selected {
border-color: var(--primary-color);
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(239, 108, 33, 0.3);
}
.expense-card.selected .expense-label {
color: white;
font-weight: 600;
}
.expense-emoji {
font-size: clamp(1.75rem, 5vw, 2.5rem);
margin-bottom: clamp(0.25rem, 1vw, 0.5rem);
display: block;
line-height: 1;
}
.expense-label {
font-size: clamp(0.75rem, 2vw, 1rem);
font-weight: 500;
color: #374151;
line-height: 1.2;
word-wrap: break-word;
hyphens: auto;
}
.expense-card:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Currency Card Styles - Matching expense card design */
.currency-card {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 1rem;
padding: 1.2rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
min-height: 110px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
user-select: none;
}
.currency-card:hover {
border-color: #3b82f6;
background: #f8faff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.currency-card.selected {
border-color: #3b82f6;
background: linear-gradient(135deg, #3b82f6, #60a5fa);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}
.currency-card.selected .currency-name,
.currency-card.selected .currency-code {
color: white;
font-weight: 600;
}
.currency-symbol {
font-size: 2rem;
margin-bottom: 0.3rem;
display: block;
font-weight: bold;
}
.currency-name {
font-size: 0.9rem;
font-weight: 500;
color: #374151;
line-height: 1.2;
margin-bottom: 0.2rem;
}
.currency-code {
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.currency-card:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Feature flag utility classes */
.hidden {
display: none !important;
}
/* ========================================
RESPONSIVE TOUCH OPTIMIZATIONS
======================================== */
/* Ensure minimum touch target sizes across all interactive elements */
button,
.btn,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea,
.expense-card,
.quick-amount,
.amount-chip {
min-height: 44px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Prevent iOS zoom on input focus */
input,
select,
textarea {
font-size: max(16px, 1rem);
}
/* Responsive container with safe area support */
.main-container,
.form-container {
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
padding-bottom: env(safe-area-inset-bottom);
}
/* Viewport-based responsive sizing */
.hero-section h1,
.story-main-title {
font-size: clamp(1.75rem, 5vw, 3rem);
line-height: 1.2;
}
.lead,
.story-subtitle {
font-size: clamp(0.9rem, 2.5vw, 1.25rem);
}
/* Responsive button sizes */
.btn-lg,
.btn-primary.btn-lg {
padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2.5rem);
font-size: clamp(1rem, 2.5vw, 1.25rem);
min-height: 48px;
}
/* Prevent horizontal overflow on all screen sizes */
body {
overflow-x: hidden;
overscroll-behavior-y: contain;
}
* {
max-width: 100vw;
}
/* Responsive adjustments */
@media (max-width: 576px) {
.expense-section {
padding: 0.75rem;
margin-bottom: 1rem;
}
.expense-section .section-header {
font-size: clamp(0.8rem, 3vw, 1rem);
margin-bottom: 0.75rem;
}
/* Responsive grid that adapts to very small screens */
.expense-section .expense-grid {
grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
gap: clamp(0.375rem, 1.5vw, 0.75rem);
}
.expense-card {
min-height: 85px;
padding: clamp(0.5rem, 2vw, 1rem);
}
/* Form inputs full width on mobile */
.form-control,
.form-select {
width: 100%;
font-size: 16px; /* Prevents zoom */
}
}
@media (min-width: 992px) {
.expense-card {
min-height: 130px;
}
.expense-emoji {
font-size: 2.5rem;
}
}
/* Custom input styling */
#custom-expense-input {
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Story Container - Fully Responsive */
.story-container {
max-width: min(1400px, 95vw);
margin: 0 auto;
padding: clamp(0.5rem, 2vw, 2rem);
width: 100%;
}
/* Enhanced Story Header */
.story-header-section {
position: relative;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-bottom: 1px solid rgba(247, 147, 26, 0.1);
overflow: hidden;
}
.story-header-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.05;
}
.bitcoin-pattern {
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
transform: rotate(15deg);
}
.story-header-content {
position: relative;
z-index: 2;
text-align: center;
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
}
.story-badge {
display: inline-flex;
align-items: center;
background: var(--primary-color);
color: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.3);
}
.story-main-title {
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
letter-spacing: -0.02em;
line-height: 1.1;
}
.story-subtitle {
font-size: 1.25rem;
color: #64748b;
margin-bottom: 2rem;
font-weight: 400;
}
.story-meta {
display: flex;
justify-content: center;
gap: 2rem;
align-items: center;
flex-wrap: wrap;
}
.story-date, .story-events {
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-size: 0.95rem;
background: white;
padding: 0.5rem 1rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Horizontal Timeline Scroll Container */
.timeline-scroll-container {
position: relative;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin: 3rem 0;
padding: 1rem 0;
}
.timeline-track {
display: flex;
justify-content: center;
padding: clamp(1rem, 3vw, 2rem);
max-width: min(1400px, 100vw);
margin: 0 auto;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* Timeline Event Cards - Landscape Layout */
.timeline-event-card {
width: 100%;
max-width: 1400px;
background: white;
border-radius: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
padding: 3rem 2rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
border: 2px solid transparent;
margin: 0 auto;
}
.timeline-event-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #ff8c42);
border-radius: 2rem 2rem 0 0;
}
/* Dynamic Border Glow based on regret level */
.timeline-event-card[data-regret-level="low"] {
border: 2px solid rgba(59, 130, 246, 0.3);
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
}
.timeline-event-card[data-regret-level="medium"] {
border: 2px solid rgba(245, 158, 11, 0.4);
box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15);
}
.timeline-event-card[data-regret-level="high"] {
border: 2px solid rgba(239, 68, 68, 0.4);
box-shadow: 0 8px 32px rgba(239, 68, 68, 0.2);
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 8px 32px rgba(239, 68, 68, 0.2);
}
50% {
box-shadow: 0 12px 40px rgba(239, 68, 68, 0.3);
}
}
.timeline-event-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
/* Perfect Landscape Financial Journey */
.financial-journey-perfect {
margin: 2rem 0;
width: 100%;
max-width: 1200px;
margin: 2rem auto;
}
.journey-flow-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
width: 100%;
margin: 0 auto;
padding: 2rem;
}
.journey-step-perfect {
width: 100%;
max-width: 600px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 1.5rem;
padding: 2.5rem 2rem;
text-align: center;
transition: all 0.3s ease;
border: 2px solid #e2e8f0;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.journey-step-perfect:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.fiat-step {
border-color: #94a3b8;
}
.btc-step {
border-color: var(--primary-color);
background: linear-gradient(135deg, rgba(247, 147, 26, 0.05), #f8fafc);
}
.value-step {
border-color: #10b981;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), #f8fafc);
}
.step-icon-perfect {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.step-content-perfect {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
.step-label-perfect {
font-size: 0.8rem;
color: #64748b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.step-amount-perfect {
font-size: 2.5rem;
font-weight: 800;
color: #1e293b;
line-height: 1.2;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin: 0.5rem 0;
}
.btc-step .step-icon-perfect {
color: var(--primary-color);
}
.btc-step .step-amount-perfect {
color: var(--primary-color);
text-shadow: 0 1px 2px rgba(247, 147, 26, 0.3);
}
.value-step .step-amount-perfect {
color: #10b981;
text-shadow: 0 1px 2px rgba(16, 185, 129, 0.3);
}
.step-description-perfect {
font-size: 0.85rem;
color: #94a3b8;
margin-top: 0.5rem;
line-height: 1.4;
}
.flow-arrow-perfect {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.arrow-text-perfect {
font-size: 1rem;
color: #64748b;
font-weight: 600;
text-align: center;
background: white;
padding: 0.75rem 1.5rem;
border-radius: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border: 2px solid #e2e8f0;
line-height: 1.2;
flex: 1;
}
.arrow-visual {
font-size: 2rem;
color: var(--primary-color);
font-weight: bold;
transform: rotate(90deg);
}
.gain-badge-perfect {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.9rem;
font-weight: 600;
margin-top: 1rem;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.financial-journey-perfect {
margin: 1rem auto;
padding: 0 1rem;
}
.journey-flow-container {
gap: 1.5rem;
padding: 1.5rem;
}
.journey-step-perfect {
padding: 2rem 1.5rem;
min-height: 180px;
}
.step-amount-perfect {
font-size: 2.2rem;
font-weight: 800;
}
.arrow-text-perfect {
font-size: 0.9rem;
padding: 0.6rem 1.2rem;
}
.arrow-visual {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.journey-flow-container {
gap: 1rem;
padding: 1rem;
}
.journey-step-perfect {
padding: 1.5rem 1rem;
min-height: 160px;
}
.step-amount-perfect {
font-size: 2rem;
font-weight: 800;
}
.arrow-text-perfect {
font-size: 0.8rem;
padding: 0.5rem 1rem;
}
.arrow-visual {
font-size: 1.5rem;
}
}
/* Enhanced Amount Slider Precision Controls */
.quick-amount-buttons {
margin: 1rem 0;
}
.quick-amount {
border-radius: 1.5rem;
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.2s ease;
border: 2px solid var(--primary-color);
color: var(--primary-color);
background: white;
}
/* ===== X SHARE SECTION ===== */
.x-share-wrapper {
background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #111111 100%);
padding: 4rem 2rem;
margin: 3rem 0;
position: relative;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 0 40px rgba(255, 255, 255, 0.1),
0 0 80px rgba(255, 255, 255, 0.05),
inset 0 0 2px rgba(255, 255, 255, 0.2);
}
.x-share-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
pointer-events: none;
}
.x-share-section {
text-align: center;
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.x-share-headline {
font-size: 2.5rem;
font-weight: 900;
color: white;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.x-share-subtitle {
color: rgba(255, 255, 255, 0.95);
font-size: 1.25rem;
margin-bottom: 2rem;
}
.x-primary-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: white;
color: #000000;
padding: 1.25rem 2.5rem;
font-size: 1.25rem;
font-weight: 700;
border-radius: 9999px;
border: 3px solid transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.x-primary-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.1);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.x-primary-btn:hover::before {
width: 300px;
height: 300px;
}
.x-primary-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
background: #f5f5f5;
}
.x-primary-btn svg {
width: 28px;
height: 28px;
}
.x-info {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.x-feature {
color: white;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* X button pulse animation */
@keyframes pulse-shadow-x {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
70% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.x-primary-btn {
animation: pulse-shadow-x 2s infinite;
}
/* ===== WHATSAPP SHARE SECTION ===== */
.whatsapp-share-wrapper {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
padding: 4rem 2rem;
margin: 3rem 0;
position: relative;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 0 40px rgba(37, 211, 102, 0.15),
0 0 80px rgba(37, 211, 102, 0.08),
inset 0 0 2px rgba(255, 255, 255, 0.3);
}
.whatsapp-share-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.whatsapp-share-section {
text-align: center;
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.whatsapp-share-headline {
font-size: 2.5rem;
font-weight: 900;
color: white;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.whatsapp-share-subtitle {
color: rgba(255, 255, 255, 0.95);
font-size: 1.25rem;
margin-bottom: 2rem;
}
.whatsapp-primary-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: white;
color: #25D366;
padding: 1.25rem 2.5rem;
font-size: 1.25rem;
font-weight: 700;
border-radius: 9999px;
border: 3px solid transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.whatsapp-primary-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(37, 211, 102, 0.1);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.whatsapp-primary-btn:hover::before {
width: 300px;
height: 300px;
}
.whatsapp-primary-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
background: #f0fff4;
}
.whatsapp-primary-btn svg {
width: 28px;
height: 28px;
}
.whatsapp-info {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.whatsapp-feature {
color: white;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* WhatsApp button pulse animation */
@keyframes pulse-shadow-whatsapp {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
70% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.whatsapp-primary-btn {
animation: pulse-shadow-whatsapp 2s infinite;
}
/* ===== INSTAGRAM SHARE SECTION ===== */
.instagram-share-wrapper {
background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #F77737 100%);
padding: 4rem 2rem;
margin: 3rem 0;
position: relative;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 0 40px rgba(131, 58, 180, 0.15),
0 0 80px rgba(253, 29, 29, 0.08),
inset 0 0 2px rgba(255, 255, 255, 0.3);
}
.instagram-share-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.instagram-share-section {
text-align: center;
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.instagram-share-headline {
font-size: 2.5rem;
font-weight: 900;
color: white;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.instagram-share-subtitle {
color: rgba(255, 255, 255, 0.95);
font-size: 1.25rem;
margin-bottom: 2rem;
}
.instagram-primary-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: white;
color: #833AB4;
padding: 1.25rem 2.5rem;
font-size: 1.25rem;
font-weight: 700;
border-radius: 9999px;
border: 3px solid transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.instagram-primary-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(131, 58, 180, 0.1);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.instagram-primary-btn:hover::before {
width: 300px;
height: 300px;
}
.instagram-primary-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
background: #fef5ff;
}
.instagram-primary-btn svg {
width: 28px;
height: 28px;
}
.instagram-info {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.instagram-feature {
color: white;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Instagram button pulse animation */
@keyframes pulse-shadow-instagram {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
70% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.instagram-primary-btn {
animation: pulse-shadow-instagram 2s infinite;
}
/* ===== TIKTOK SHARE SECTION ===== */
.tiktok-share-wrapper {
background: linear-gradient(135deg, #000000 0%, #EE1D52 50%, #69C9D0 100%);
padding: 4rem 2rem;
margin: 3rem 0;
position: relative;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 0 40px rgba(238, 29, 82, 0.15),
0 0 80px rgba(105, 201, 208, 0.08),
inset 0 0 2px rgba(255, 255, 255, 0.3);
}
.tiktok-share-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 25% 25%, rgba(238, 29, 82, 0.2) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(105, 201, 208, 0.2) 0%, transparent 50%);
pointer-events: none;
}
.tiktok-share-section {
text-align: center;
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.tiktok-share-headline {
font-size: 2.5rem;
font-weight: 900;
color: white;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.tiktok-share-subtitle {
color: rgba(255, 255, 255, 0.95);
font-size: 1.25rem;
margin-bottom: 2rem;
}
.tiktok-primary-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: white;
color: #000000;
padding: 1.25rem 2.5rem;
font-size: 1.25rem;
font-weight: 700;
border-radius: 9999px;
border: 3px solid transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.tiktok-primary-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(238, 29, 82, 0.1);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.tiktok-primary-btn:hover::before {
width: 300px;
height: 300px;
}
.tiktok-primary-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
background: #fff5f7;
}
.tiktok-primary-btn svg {
width: 28px;
height: 28px;
}
.tiktok-info {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.tiktok-feature {
color: white;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* TikTok button pulse animation */
@keyframes pulse-shadow-tiktok {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
70% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.tiktok-primary-btn {
animation: pulse-shadow-tiktok 2s infinite;
}
.x-primary-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: #000000;
color: white;
padding: 1.25rem 2.5rem;
font-size: 1.25rem;
font-weight: 700;
border-radius: 9999px;
border: 3px solid transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.x-primary-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.x-primary-btn:hover::before {
width: 300px;
height: 300px;
}
.x-primary-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.2);
}
.x-primary-btn svg {
width: 28px;
height: 28px;
}
/* ===== ENHANCED BITCOIN LEARNING SECTION ===== */
.bitcoin-learning-wrapper {
background: linear-gradient(135deg, var(--primary-color) 0%, #ff8c42 100%);
padding: 4rem 2rem;
margin: 3rem -2rem;
position: relative;
overflow: hidden;
}
.bitcoin-learning-wrapper::before {
content: '₿';
position: absolute;
top: -50px;
right: -50px;
font-size: 200px;
opacity: 0.1;
color: white;
transform: rotate(-15deg);
}
.bitcoin-learning-content {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.bitcoin-headline {
font-size: 3.5rem;
font-weight: 900;
color: white;
margin-bottom: 1rem;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
line-height: 1.1;
}
.bitcoin-subtitle {
color: rgba(255, 255, 255, 0.95);
font-size: 1.5rem;
margin-bottom: 3rem;
font-weight: 600;
}
.action-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.action-card {
background: white;
border-radius: 2rem;
padding: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.action-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #ff8c42);
}
.action-card:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.action-icon {
width: 64px;
height: 64px;
margin: 0 auto 1rem;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
}
.action-title {
font-size: 1.5rem;
font-weight: 800;
color: #1a1a1a;
margin-bottom: 0.5rem;
}
.action-description {
color: #666;
font-size: 1rem;
line-height: 1.5;
}
.mega-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: white;
color: var(--primary-color);
padding: 1.5rem 3rem;
font-size: 1.5rem;
font-weight: 800;
border-radius: 9999px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
.mega-cta-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(247, 147, 26, 0.1);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.mega-cta-btn:hover::after {
width: 400px;
height: 400px;
}
.mega-cta-btn:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.trust-badges {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}
.trust-badge {
text-align: center;
color: white;
}
.trust-number {
font-size: 2.5rem;
font-weight: 900;
display: block;
}
.trust-label {
font-size: 0.9rem;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Pulse animation for primary buttons */
@keyframes pulse-shadow {
0% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.x-primary-btn {
animation: pulse-shadow 2s infinite;
}
/* Mobile responsiveness for enhanced sections */
@media (max-width: 768px) {
.x-share-wrapper,
.bitcoin-learning-wrapper {
margin: 2rem -1rem;
padding: 3rem 1rem;
}
.x-share-headline,
.bitcoin-headline {
font-size: 2rem;
}
.x-share-subtitle,
.bitcoin-subtitle {
font-size: 1.1rem;
}
.x-primary-btn,
.mega-cta-btn {
font-size: 1.1rem;
padding: 1rem 2rem;
}
.whatsapp-share-wrapper {
margin: 2rem -1rem;
padding: 3rem 1rem;
}
.whatsapp-share-headline {
font-size: 2rem;
}
.whatsapp-share-subtitle {
font-size: 1rem;
}
.whatsapp-primary-btn {
font-size: 1.1rem;
padding: 1rem 2rem;
width: 100%;
justify-content: center;
}
.whatsapp-info {
flex-direction: column;
gap: 1rem;
}
.instagram-share-wrapper,
.tiktok-share-wrapper {
margin: 2rem -1rem;
padding: 3rem 1rem;
}
.instagram-share-headline,
.tiktok-share-headline {
font-size: 2rem;
}
.instagram-share-subtitle,
.tiktok-share-subtitle {
font-size: 1rem;
}
.instagram-primary-btn,
.tiktok-primary-btn {
font-size: 1.1rem;
padding: 1rem 2rem;
width: 100%;
justify-content: center;
}
.instagram-info,
.tiktok-info {
flex-direction: column;
gap: 1rem;
}
.share-stats,
.trust-badges {
flex-direction: column;
gap: 1.5rem;
}
}
.quick-amount:hover {
background: var(--primary-color);
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(247, 147, 26, 0.3);
}
.quick-amount.btn-primary {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
box-shadow: 0 2px 4px rgba(247, 147, 26, 0.2);
}
.manual-input-container {
background: #f8fafc;
border-radius: 0.75rem;
padding: 1rem;
border: 1px solid #e2e8f0;
}
.manual-input-container .form-label {
color: #64748b;
font-weight: 500;
}
.manual-input-container .input-group-text {
background: var(--primary-color);
color: white;
border: none;
font-weight: 600;
}
.manual-input-container .form-control {
border: 1px solid #d1d5db;
border-left: none;
}
.manual-input-container .form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(247, 147, 26, 0.25);
}
/* Enhanced slider precision */
.sats-range {
height: 8px;
background: linear-gradient(to right, #e2e8f0, var(--primary-color));
border-radius: 4px;
outline: none;
-webkit-appearance: none;
}
.sats-range::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
border-radius: 50%;
background: var(--primary-color);
cursor: pointer;
border: 3px solid white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}
.sats-range::-webkit-slider-thumb:hover {
background: #e88b17;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.4);
}
.sats-range::-moz-range-thumb {
height: 24px;
width: 24px;
border-radius: 50%;
background: var(--primary-color);
cursor: pointer;
border: 3px solid white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}
.sats-range::-moz-range-thumb:hover {
background: #e88b17;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.4);
}
/* Responsive quick buttons */
@media (max-width: 768px) {
.quick-amount {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
}
.manual-input-container {
padding: 0.75rem;
}
}
@media (max-width: 480px) {
.quick-amount-buttons {
gap: 0.25rem !important;
}
.quick-amount {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
}
/* Share Ready Indicator */
.share-ready-indicator {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
margin: 1rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.share-ready-icon {
width: 1.2rem;
height: 1.2rem;
}
/* Enhanced Learn Bitcoin Button with Scroll Animations */
.learn-bitcoin-btn, #guide-btn {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
border: none !important;
color: white !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
padding: 1rem 2rem !important;
border-radius: 2rem !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.75rem !important;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
transform: translateY(0) scale(1) !important;
position: relative !important;
overflow: hidden !important;
}
.learn-bitcoin-btn::before, #guide-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.6s ease;
}
.learn-bitcoin-btn:hover, #guide-btn:hover {
background: linear-gradient(135deg, #d97706, #b45309) !important;
transform: translateY(-4px) scale(1.05) !important;
box-shadow: 0 12px 35px rgba(245, 158, 11, 0.6) !important;
color: white !important;
}
.learn-bitcoin-btn:hover::before, #guide-btn:hover::before {
left: 100%;
}
.learn-bitcoin-btn i, #guide-btn i {
width: 1.3rem !important;
height: 1.3rem !important;
transition: transform 0.3s ease !important;
}
.learn-bitcoin-btn:hover i, #guide-btn:hover i {
transform: rotate(15deg) !important;
}
/* Scroll-triggered Animations */
.learn-bitcoin-scroll-animation {
opacity: 0;
transform: translateY(30px) scale(0.9) !important;
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.learn-bitcoin-scroll-animation.animate-in {
opacity: 1;
transform: translateY(0) scale(1) !important;
animation: bitcoinPulse 3s ease-in-out infinite !important;
}
@keyframes bitcoinPulse {
0%, 100% {
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4), 0 0 0 0 rgba(245, 158, 11, 0.4);
transform: translateY(0) scale(1);
}
50% {
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6), 0 0 0 8px rgba(245, 158, 11, 0.1);
transform: translateY(-2px) scale(1.02);
}
}
@keyframes bitcoinShine {
0% { left: -100%; }
100% { left: 100%; }
}
/* Attention-grabbing variations */
.learn-bitcoin-btn.attention-grab, #guide-btn.attention-grab {
animation: attentionGrab 2s ease-in-out infinite;
}
@keyframes attentionGrab {
0%, 100% {
transform: translateY(0) scale(1);
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}
25% {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6);
}
50% {
transform: translateY(0) scale(1.05);
box-shadow: 0 12px 35px rgba(245, 158, 11, 0.8);
}
75% {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6);
}
}
/* Enhanced learn links */
.learn-link {
color: #f59e0b !important;
font-weight: 600 !important;
text-decoration: underline !important;
transition: color 0.2s ease !important;
}
.learn-link:hover {
color: #d97706 !important;
text-decoration: underline !important;
}
/* Enhanced Financial Journey */
.financial-journey-enhanced {
margin: 2rem 0;
}
.journey-flow {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.journey-step-enhanced {
display: flex;
align-items: center;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 1rem;
padding: 1.5rem;
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
}
.journey-step-enhanced:hover {
transform: translateX(8px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.step-icon {
font-size: 2rem;
margin-right: 1rem;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.step-content {
flex: 1;
}
.step-label {
display: block;
font-size: 0.9rem;
color: #64748b;
font-weight: 500;
margin-bottom: 0.25rem;
}
.step-amount {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.25rem;
}
.btc-step .step-amount {
color: var(--primary-color);
}
.value-step .step-amount {
color: #059669;
}
.step-description {
font-size: 0.85rem;
color: #64748b;
}
.flow-arrow {
display: flex;
align-items: center;
justify-content: center;
margin: 0.5rem 0;
position: relative;
}
.arrow-line {
width: 2px;
height: 30px;
background: linear-gradient(180deg, var(--primary-color), #ff8c42);
position: relative;
}
.arrow-line::after {
content: '';
position: absolute;
bottom: -6px;
left: -4px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #ff8c42;
}
.arrow-text {
position: absolute;
background: white;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.8rem;
color: #64748b;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.gain-badge-enhanced {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.9rem;
font-weight: 600;
margin-top: 0.5rem;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
/* Calculation Breakdown */
.calculation-breakdown {
background: linear-gradient(135deg, #fefbff, #f8fafc);
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.5rem;
margin-top: 1.5rem;
}
.breakdown-header {
display: flex;
align-items: center;
font-weight: 600;
color: #374151;
margin-bottom: 1rem;
font-size: 1rem;
}
.breakdown-content {
margin-bottom: 1rem;
}
.calculation-step {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-bottom: 0.75rem;
}
.calc-label {
font-size: 0.85rem;
color: #64748b;
font-weight: 500;
}
.calc-formula {
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
background: white;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
font-size: 0.9rem;
color: #1e293b;
}
.data-source {
display: flex;
align-items: center;
font-size: 0.8rem;
color: #94a3b8;
font-style: italic;
}
/* Enhanced AI Story Section */
.ai-story-section {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border-color);
}
.story-bubble-enhanced {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 1.5rem;
padding: 1.5rem;
box-shadow: var(--soft-shadow);
transition: all 0.3s ease;
}
.story-bubble-enhanced:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(247, 147, 26, 0.15);
background: var(--bg-card-hover);
}
.story-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
gap: 0.75rem;
}
.ai-avatar {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 2px 8px rgba(247, 147, 26, 0.3);
}
.ai-icon {
width: 20px;
height: 20px;
}
.story-meta-info {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.story-author {
font-weight: 600;
color: var(--text-primary);
font-size: 0.95rem;
}
.story-type {
font-size: 0.8rem;
color: var(--text-muted);
}
.story-content {
margin: 1rem 0;
}
.story-text {
font-size: 1rem;
line-height: 1.6;
color: var(--text-primary);
margin: 0;
font-style: italic;
}
.story-footer {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
.powered-by {
display: flex;
align-items: center;
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 500;
}
/* Event Icon Section */
.event-icon-section {
text-align: center;
margin-bottom: 1.5rem;
}
.event-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
display: block;
}
.event-caption {
font-size: 0.85rem;
color: #6b7280;
font-style: italic;
line-height: 1.4;
}
/* Event Header */
.event-header {
text-align: center;
margin-bottom: 2rem;
}
.event-date {
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.9rem;
font-weight: 600;
display: inline-block;
margin-bottom: 1rem;
}
.event-title {
font-size: 1.4rem;
font-weight: 700;
color: #F7931A; /* Bitcoin orange - was white on white, now visible */
margin: 0;
line-height: 1.3;
}
/* Financial Journey */
.financial-journey {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
background: rgba(0, 0, 0, 0.02);
border-radius: 1rem;
padding: 1.5rem;
}
.journey-step {
text-align: center;
padding: 0.75rem;
}
.journey-label {
display: block;
font-size: 0.85rem;
color: #6b7280;
margin-bottom: 0.5rem;
font-weight: 500;
}
.journey-amount {
display: block;
font-size: 1.3rem;
font-weight: 700;
}
.fiat-amount {
color: #374151;
}
.btc-amount {
color: var(--primary-color);
}
.btc-price-then {
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.25rem;
font-weight: 500;
}
.current-value {
color: #059669;
}
.journey-arrow {
text-align: center;
font-size: 1.2rem;
font-weight: bold;
color: var(--primary-color);
margin: 0.5rem 0;
}
.gain-badge {
background: #dcfce7;
color: #166534;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 600;
margin-top: 0.5rem;
display: inline-block;
}
/* AI Story Section */
.ai-story-section {
margin-top: 1.5rem;
}
.story-bubble {
background: linear-gradient(135deg, rgba(247, 147, 26, 0.08), rgba(247, 147, 26, 0.03));
border-left: 4px solid var(--primary-color);
border-radius: 1rem;
padding: 1.5rem;
position: relative;
}
.story-icon {
color: var(--primary-color);
width: 20px;
height: 20px;
float: left;
margin-right: 0.75rem;
margin-top: 0.2rem;
}
.story-text {
font-size: 1rem;
line-height: 1.6;
color: var(--secondary-color);
font-style: italic;
margin: 0;
text-align: left;
}
/* Timeline Navigation */
.timeline-navigation {
display: flex;
justify-content: center;
gap: 0.5rem;
margin: 2rem 0;
}
.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #d1d5db;
background: white;
cursor: pointer;
transition: all 0.3s ease;
}
.nav-dot.active,
.nav-dot:hover {
background: var(--primary-color);
border-color: var(--primary-color);
transform: scale(1.2);
}
/* Story Score Section */
.story-score-section {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 2rem;
padding: 3rem 2rem;
margin: 4rem 0;
text-align: center;
}
.score-title {
font-size: 2rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 2rem;
}
.score-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.score-card {
background: white;
border-radius: 1.5rem;
padding: 2rem 1.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.score-card:hover {
transform: translateY(-4px);
}
.score-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.score-label {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 0.5rem;
font-weight: 500;
}
.score-value {
font-size: 1.8rem;
font-weight: 700;
color: var(--secondary-color);
}
.btc-highlight {
color: var(--primary-color);
}
.current-highlight {
color: #059669;
}
.gain-highlight {
color: #dc2626;
}
/* Progress Section */
.progress-section {
margin-top: 2rem;
}
.progress-label {
font-size: 1.1rem;
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 1rem;
}
.progress-bar-container {
background: #e5e7eb;
border-radius: 1rem;
height: 1rem;
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-bar {
background: linear-gradient(90deg, var(--primary-color), #059669);
height: 100%;
border-radius: 1rem;
transition: width 1s ease;
}
.progress-text {
font-size: 0.9rem;
color: #6b7280;
}
/* Share and CTA Section */
.share-cta-section {
margin: 4rem 0;
}
.share-section,
.bitcoin-cta-section {
background: white;
border-radius: 2rem;
padding: 3rem 2rem;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.share-title,
.cta-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1rem;
}
.share-title {
color: var(--primary-color);
}
.cta-title {
color: var(--secondary-color);
}
.share-subtitle,
.cta-subtitle {
font-size: 1.1rem;
color: #6b7280;
margin-bottom: 2rem;
line-height: 1.5;
}
.share-buttons,
.cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.share-btn,
.cta-btn {
padding: 1rem 2rem;
border: none;
border-radius: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.share-btn.primary,
.cta-btn.primary {
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
}
.share-btn.secondary,
.cta-btn.secondary {
background: #f3f4f6;
color: var(--secondary-color);
border: 2px solid #e5e7eb;
}
.share-btn:hover,
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* Enhanced Bitcoin Guide */
.bitcoin-guide-section {
padding: 0;
margin: 2rem 0;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.guide-container {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.guide-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.guide-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
@media (max-width: 768px) {
.guide-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.guide-item {
display: flex;
align-items: flex-start;
gap: 1rem;
background: white;
padding: 1.25rem;
border-radius: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
min-height: 120px;
}
.guide-content h6 {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.guide-content p {
font-size: 0.85rem;
line-height: 1.4;
}
.guide-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.guide-icon-container {
flex-shrink: 0;
}
.guide-icon {
width: 24px;
height: 24px;
}
.guide-content h6 {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--secondary-color);
font-size: 1rem;
}
.guide-content p {
font-size: 0.9rem;
color: #374151; /* Darker grey for better contrast */
margin: 0;
line-height: 1.5;
}
.disclaimer {
border-radius: 1rem;
}
/* Price Widget */
.price-widget {
background: white;
border: 2px solid var(--primary-color);
border-radius: 1.5rem;
padding: 2rem;
text-align: center;
margin: 2rem 0;
box-shadow: 0 8px 32px rgba(247, 147, 26, 0.1);
}
.price-title {
color: var(--primary-color);
margin-bottom: 1rem;
}
.price-value {
font-size: 2.5rem;
font-weight: 700;
color: #22c55e;
}
.price-update {
color: #6b7280;
font-size: 0.9rem;
}
/* Navigation */
.story-navigation {
display: flex;
gap: 1rem;
justify-content: center;
margin: 3rem 0;
flex-wrap: wrap;
}
.nav-btn {
padding: 1rem 2rem;
border-radius: 1rem;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.nav-btn.primary {
background: var(--primary-color);
color: white;
}
.nav-btn.secondary {
background: #f3f4f6;
color: var(--secondary-color);
border: 2px solid #e5e7eb;
}
.nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* Toast Messages */
.toast-message {
position: fixed;
top: 2rem;
left: 50%;
transform: translateX(-50%);
background: #22c55e;
color: white;
padding: 1rem 2rem;
border-radius: 1rem;
z-index: 9999;
display: flex;
align-items: center;
gap: 0.5rem;
opacity: 0;
transition: opacity 0.3s ease;
}
.toast-message.show {
opacity: 1;
}
/* Enhanced UI Components */
/* GPT-5 Response Style Selection */
.style-option {
position: relative;
}
.style-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.style-card {
background: white;
border: 2px solid #e5e7eb !important;
transition: all 0.3s ease;
text-align: center;
min-height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
}
.style-option input[type="radio"]:checked + label .style-card {
border-color: var(--primary-color) !important;
background: rgba(247, 147, 26, 0.05);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.2);
}
.style-card:hover {
border-color: var(--primary-color) !important;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Enhanced sharing buttons */
.share-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.share-btn {
background: white;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 0.75rem 1rem;
font-weight: 500;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
cursor: pointer;
font-size: 0.9rem;
}
.share-btn.primary {
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
border-color: transparent;
}
.share-btn.secondary {
color: #6b7280;
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.share-btn.primary:hover {
box-shadow: 0 8px 16px rgba(247, 147, 26, 0.3);
color: white;
}
.share-btn.secondary:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
/* Enhanced CTA buttons */
.cta-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
.cta-btn {
background: white;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 1rem 1.5rem;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
cursor: pointer;
color: #374151;
}
.cta-btn.primary {
background: linear-gradient(135deg, var(--primary-color), #ff8c42);
color: white;
border-color: transparent;
}
.cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.cta-btn.primary:hover {
box-shadow: 0 12px 24px rgba(247, 147, 26, 0.4);
color: white;
text-decoration: none;
}
.cta-btn.secondary:hover {
border-color: var(--primary-color);
color: var(--primary-color);
text-decoration: none;
}
/* Enhanced Toast notifications */
.toast-message {
position: fixed;
top: 20px;
right: 20px;
background: var(--primary-color);
color: white;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
transition: all 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.1);
max-width: 380px;
}
/* Support for multi-line HTML content in toast */
.toast-message span {
display: block;
line-height: 1.4;
}
.toast-message small {
display: block;
margin-top: 4px;
opacity: 0.9;
font-size: 0.875rem;
}
.toast-message.show {
transform: translateX(0);
}
.toast-message.success {
background: linear-gradient(135deg, #10b981, #059669);
border-color: rgba(16, 185, 129, 0.3);
}
.toast-message.error {
background: linear-gradient(135deg, #ef4444, #dc2626);
border-color: rgba(239, 68, 68, 0.3);
}
.toast-message.info {
background: linear-gradient(135deg, #3b82f6, #2563eb);
border-color: rgba(59, 130, 246, 0.3);
}
.toast-message i {
width: 18px;
height: 18px;
}
/* Enhanced Price widget styling */
.price-widget {
background: linear-gradient(135deg, rgba(247, 147, 26, 0.1), rgba(247, 147, 26, 0.05));
border: 2px solid rgba(247, 147, 26, 0.2);
border-radius: 16px;
padding: 1.5rem;
text-align: center;
margin: 1.5rem 0;
}
.price-title {
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.price-value {
font-size: 2rem;
font-weight: bold;
color: var(--primary-color);
margin: 0.5rem 0;
}
.price-update {
color: #6b7280;
font-size: 0.85rem;
}
/* Mobile-specific toast styling */
@media (max-width: 768px) {
.toast-message {
top: auto;
bottom: 20px;
right: 50%;
transform: translateX(50%) translateY(100%);
max-width: calc(100% - 40px);
font-size: 16px;
padding: 16px 20px;
}
.toast-message.show {
transform: translateX(50%) translateY(0);
}
.toast-message span {
font-size: 16px;
}
.toast-message small {
font-size: 14px;
}
}
/* Responsive Design */
@media (max-width: 768px) {
/* Mobile Timeline - Vertical Stack Option */
.timeline-track {
flex-direction: column;
padding: 1rem;
gap: 1rem;
overflow-x: visible;
max-width: 100%;
}
.timeline-event-card {
max-width: 100%;
padding: 2rem;
}
.journey-step {
font-size: 0.9rem;
}
.score-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.share-buttons,
.cta-buttons {
grid-template-columns: 1fr;
}
.toast-message {
left: 10px;
right: 10px;
top: 10px;
transform: translateY(-100%);
}
.toast-message.show {
transform: translateY(0);
}
}
.timeline-event-card {
flex: 0 0 320px;
max-width: 320px;
padding: 1.5rem;
}
.financial-journey {
gap: 0.75rem;
}
.journey-amount {
font-size: 1.1rem;
}
.score-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.share-buttons,
.cta-buttons {
flex-direction: column;
align-items: center;
}
.share-btn,
.cta-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* Partner Section Styling */
.partner-section {
margin-top: 3rem;
padding: 2rem 0;
}
.partner-header {
text-align: center;
margin-bottom: 2rem;
}
.partner-header h2 {
font-size: 2rem;
font-weight: 700;
color: #0F172A;
margin-bottom: 0.5rem;
}
.partner-header .muted {
color: #64748B;
font-size: 1rem;
}
.sponsored {
font-size: 0.875rem;
color: #64748B;
background: #EFF6FF;
padding: 2px 8px;
border-radius: 9999px;
border: 1px solid #E6EDF5;
font-weight: 500;
}
/* Partner Tabs */
.partner-tabs {
display: flex;
gap: 12px;
margin-top: 8px;
margin-bottom: 1.5rem;
}
.tab {
flex: 1 1 0;
padding: 12px 16px;
border-radius: 9999px;
font-weight: 700;
color: #fff;
border: none;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.95rem;
}
.tab--coinbase {
background: #1652F0;
}
.tab--proton {
background: #6D4AFF;
}
.tab[aria-selected="false"] {
opacity: 0.55;
transform: scale(0.98);
}
.tab[aria-selected="true"] {
opacity: 1;
transform: scale(1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tab:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.35);
}
.tab:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* Panel Styling */
.panel {
margin-top: 14px;
background: #ffffff;
border: 1px solid #E6EDF5;
border-radius: 16px;
box-shadow: 0 6px 24px rgba(16, 24, 40, 0.04);
overflow: hidden;
}
.panel-body {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 20px;
padding: 20px;
align-items: start;
}
.brand {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.brand img {
margin-bottom: 0.5rem;
}
.brand h3 {
margin: 0.25rem 0 0.5rem;
color: #0F172A;
font-size: 1.125rem;
font-weight: 700;
}
.brand p {
color: #475569;
margin-bottom: 0.75rem;
line-height: 1.5;
}
.bullets {
margin: 0;
padding-left: 1rem;
color: #334155;
list-style: none;
}
.bullets li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
}
.cta {
display: inline-block;
margin-top: 10px;
padding: 12px 16px;
border-radius: 12px;
font-weight: 800;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.cta--coinbase {
background: #1652F0;
}
.cta--proton {
background: #6D4AFF;
}
.cta:hover {
filter: brightness(0.97);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
color: #fff;
text-decoration: none;
}
.footnote {
font-size: 0.875rem;
color: #64748B;
margin-top: 6px;
}
.footnote a {
color: var(--primary-color);
text-decoration: none;
}
.footnote a:hover {
text-decoration: underline;
}
.disclaimer {
margin-top: 10px;
font-size: 0.85rem;
color: #6B7280;
text-align: center;
font-style: italic;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.panel-body {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.partner-tabs {
flex-direction: column;
gap: 8px;
}
.tab {
width: 100%;
}
.partner-header h2 {
font-size: 1.5rem;
}
}
/* Story Title Input Enhancement */
.story-title-section {
background: linear-gradient(135deg, rgba(247, 147, 26, 0.05), rgba(247, 147, 26, 0.02));
border: 2px solid rgba(247, 147, 26, 0.1);
transition: all 0.3s ease;
}
.story-title-section:focus-within {
border-color: var(--primary-color);
transform: scale(1.02);
}
/* Event form styling */
.event-group {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
border: 2px solid #e2e8f0 !important;
}
.event-group:hover {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 0.1rem rgba(247, 147, 26, 0.15);
}
.event-group:focus-within {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 0.2rem rgba(247, 147, 26, 0.25);
}
/* Animation classes */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.story-card {
animation: fadeInUp 0.5s ease-out;
}
/* Print styles */
@media print {
.btn, .navbar, footer {
display: none !important;
}
.story-card {
break-inside: avoid;
margin-bottom: 1rem;
}
}
/* ===== REFACTORED STORY PAGE STYLES ===== */
/* Key Numbers Row */
.key-numbers-row {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin: 2rem 0;
flex-wrap: wrap;
}
.key-number {
text-align: center;
}
.key-number .number-label {
display: block;
font-size: 0.875rem;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.key-number .number-value {
display: block;
font-size: 1.75rem;
font-weight: 700;
color: #212529;
}
.key-number .number-value.highlight {
color: var(--primary-color);
}
.key-number .number-value.gain {
color: #22c55e;
}
.key-number .number-value.spent {
color: #ff0000; /* Bright red for spent amount */
}
.arrow-divider {
font-size: 1.5rem;
color: #6c757d;
align-self: center;
}
/* Primary CTA Block */
.primary-cta-block {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 1.5rem;
padding: 3rem 2rem;
margin: 3rem 0;
text-align: center;
}
.cta-headline {
font-size: 2rem;
font-weight: 700;
color: #212529;
margin-bottom: 1rem;
}
.cta-subtitle {
font-size: 1.125rem;
color: #6c757d;
margin-bottom: 2rem;
}
.cta-microcopy {
font-size: 0.875rem;
color: #6c757d;
margin-top: 1rem;
}
/* Share Buttons Row */
.share-buttons-row {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.share-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
transition: all 0.2s ease;
border: none;
cursor: pointer;
}
.share-btn-x {
background: #000;
color: white;
}
.share-btn-x:hover {
background: #1a1a1a;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.share-btn-whatsapp {
background: #25D366;
color: white;
}
.share-btn-whatsapp:hover {
background: #1eb855;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
.share-btn-copy {
background: #e9ecef;
color: #495057;
}
.share-btn-copy:hover {
background: #dee2e6;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.share-btn-linkedin {
background: #0077b5;
color: white;
}
.share-btn-linkedin:hover {
background: #005885;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
}
.share-btn-telegram {
background: #0088cc;
color: white;
}
.share-btn-telegram:hover {
background: #006699;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
}
.share-btn-reddit {
background: #ff4500;
color: white;
}
.share-btn-reddit:hover {
background: #e63e00;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 69, 0, 0.3);
}
.share-btn-download {
background: var(--primary-color);
color: white;
}
.share-btn-download:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.3);
}
/* Create Story Button */
.create-story-btn {
font-size: 1.125rem;
padding: 1rem 2rem;
font-weight: 600;
}
/* Affiliate Mini-Card */
.affiliate-mini-card {
background: white;
border: 2px solid var(--primary-color);
border-radius: 1rem;
padding: 2rem;
margin: 3rem 0;
text-align: center;
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.1);
}
.mini-card-title {
font-size: 1.5rem;
font-weight: 700;
color: #212529;
margin-bottom: 0.5rem;
}
.mini-card-subtitle {
font-size: 1rem;
color: #6c757d;
margin-bottom: 1.5rem;
}
.affiliate-buy-btn {
font-size: 1.125rem;
padding: 0.875rem 2rem;
font-weight: 600;
}
.sats-tooltip-container {
margin-top: 1rem;
}
.sats-term {
color: var(--primary-color);
text-decoration: underline;
text-decoration-style: dotted;
cursor: help;
position: relative;
}
.sats-term[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #212529;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
white-space: nowrap;
z-index: 1000;
margin-bottom: 0.5rem;
}
/* Secondary CTA Bottom */
.secondary-cta-bottom {
background: linear-gradient(135deg, #fff4e6, #fff8f0);
border-radius: 1.5rem;
padding: 3rem 2rem;
margin: 4rem 0 2rem;
text-align: center;
}
.bottom-cta-content h3 {
font-size: 1.75rem;
font-weight: 700;
color: #212529;
margin-bottom: 1rem;
}
.bottom-cta-content p {
font-size: 1.125rem;
color: #6c757d;
margin-bottom: 2rem;
}
/* Mobile Floating Pill */
.mobile-floating-pill {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
background: var(--primary-color);
border-radius: 2rem;
padding: 0.75rem 1.5rem;
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.3);
animation: pulse 2s infinite;
}
.mobile-floating-pill a {
color: white;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Modal Styles */
#createStoryModal .modal-content {
border-radius: 1rem;
border: none;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
#createStoryModal .modal-header {
background: white;
color: #212529;
border-radius: 1rem 1rem 0 0;
padding: 1.5rem;
border-bottom: 2px solid var(--primary-color);
}
#createStoryModal .modal-title {
font-weight: 700;
font-size: 1.25rem;
color: #212529;
}
#createStoryModal .btn-close {
opacity: 0.8;
}
#createStoryModal .modal-body {
padding: 2rem;
color: #495057;
}
#createStoryModal .modal-body p {
color: #495057;
margin-bottom: 0;
}
#createStoryModal .modal-footer {
border-top: none;
padding: 0 2rem 2rem;
background: white;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.key-numbers-row {
gap: 1rem;
}
.key-number .number-value {
font-size: 1.5rem;
}
.cta-headline {
font-size: 1.5rem;
}
.share-buttons-row {
flex-direction: column;
width: 100%;
}
.share-btn {
width: 100%;
justify-content: center;
}
}
/* Next Chapter CTA Card Styles */
.next-chapter-card {
border: 2px solid var(--primary-color) !important;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.next-chapter-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(247, 147, 26, 0.15) !important;
}
.next-chapter-card .btn {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.next-chapter-card .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(247, 147, 26, 0.3);
}
.next-chapter-card .btn:active {
transform: translateY(0);
}
/* Expense form input styling */
#event_title_1::placeholder {
color: #9CA3AF !important;
opacity: 1;
font-style: italic;
}
#event_title_1:focus {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 0.2rem rgba(245, 126, 36, 0.25) !important;
background-color: #ffffff !important;
}
/* Ensure white background even when autofilled */
#event_title_1:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px white inset !important;
-webkit-text-fill-color: #000000 !important;
}
/* ===== AMOUNT GRID SYSTEM ===== */
.amount-grid-container {
width: 100%;
max-height: 420px; /* Prevent container from growing too tall */
overflow-y: auto; /* Allow scroll if needed */
overflow-x: hidden;
padding: 0.5rem 0;
margin-bottom: 0.5rem;
}
/* Scrollbar styling for amount grid */
.amount-grid-container::-webkit-scrollbar {
width: 6px;
}
.amount-grid-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.amount-grid-container::-webkit-scrollbar-thumb {
background: #c0c0c0;
border-radius: 3px;
}
.amount-grid-container::-webkit-scrollbar-thumb:hover {
background: #888;
}
/* Amount Grid Layout */
.amount-grid {
display: grid;
gap: 0.5rem;
padding-bottom: 0.75rem; /* Ensure last row isn't cut off */
grid-template-columns: repeat(2, 1fr); /* 2 columns on smallest screens */
}
/* Amount Chip Styling */
.amount-chip {
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 0.5rem;
min-height: 48px; /* Ensure minimum touch target size */
font-size: 0.875rem;
font-weight: 600;
text-align: center;
background: white;
border: 2px solid #e9ecef;
border-radius: 0.75rem;
color: #495057;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hover state */
.amount-chip:hover {
background: #fff;
border-color: #F7931A;
color: #F7931A;
box-shadow: 0 2px 8px rgba(247, 147, 26, 0.2);
transform: translateY(-1px);
}
/* Active state - no size change */
.amount-chip.active {
background: linear-gradient(135deg, #F7931A, #f8ad4e);
border-color: #F7931A;
color: white;
box-shadow: 0 2px 8px rgba(247, 147, 26, 0.3);
font-weight: 700;
/* No transform or scale to prevent jumping */
}
/* Custom amount chip */
.amount-chip-custom {
grid-column: span 2; /* Span full width on mobile */
background: #f8f9fa;
border-style: dashed;
}
.amount-chip-custom:hover {
background: #fff;
border-style: solid;
}
.amount-chip-custom.active {
background: linear-gradient(135deg, #F7931A, #f8ad4e);
border-style: solid;
}
/* Responsive breakpoints */
@media (min-width: 360px) {
.amount-grid {
grid-template-columns: repeat(3, 1fr); /* 3 columns on phones */
}
.amount-chip {
font-size: 0.875rem;
}
}
@media (min-width: 576px) {
.amount-grid {
grid-template-columns: repeat(4, 1fr); /* 4 columns on larger phones */
}
.amount-chip {
padding: 0.875rem 0.75rem;
font-size: 0.9375rem;
}
.amount-chip-custom {
grid-column: span 2; /* Span 2 columns */
}
}
@media (min-width: 768px) {
.amount-grid {
grid-template-columns: repeat(5, 1fr); /* 5 columns on tablets */
}
.amount-chip {
padding: 1rem;
}
.amount-chip-custom {
grid-column: span 1; /* Normal width on larger screens */
}
}
@media (min-width: 992px) {
.amount-grid {
grid-template-columns: repeat(5, 1fr); /* Keep 5 columns on desktop */
}
.amount-grid-container {
max-height: none; /* No height restriction on desktop */
overflow-y: visible;
}
}
/* ===== QUICK TABS SYSTEM (FOR OTHER TABS) ===== */
.amount-tabs-container,
.year-tabs-container,
.month-tabs-container {
max-width: 100%;
position: relative;
}
/* Padding for all tabs */
.amount-tabs-container .quick-tabs-scroll,
.year-tabs-container .quick-tabs-scroll,
.month-tabs-container .quick-tabs-scroll {
padding: 1rem 0;
overflow: visible !important;
}
/* Amount and month tabs - show all in wrap layout */
.amount-tabs-container,
.month-tabs-container {
overflow: visible !important;
width: 100%;
position: relative;
}
/* Year tabs - show all in grid layout */
.year-tabs-container {
width: 100%;
position: relative;
overflow: visible !important;
}
/* Year tabs - allow wrapping to show all years */
.year-tabs-container .quick-tabs-scroll {
width: 100%;
overflow: visible !important;
padding: 1rem 0;
}
/* Year tabs - display in grid with 3 columns on mobile, 4 on tablet, 5+ on desktop */
.year-tabs-container .quick-tabs,
#year-tabs {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 100%;
}
@media (min-width: 576px) {
#year-tabs {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 768px) {
#year-tabs {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 992px) {
#year-tabs {
grid-template-columns: repeat(7, 1fr);
}
}
.quick-tabs-scroll {
overflow: visible !important;
padding: 1rem 0;
max-width: 100%;
width: 100%;
}
.quick-tabs-scroll::-webkit-scrollbar {
display: none;
}
.quick-tabs {
display: flex;
gap: 0.5rem;
padding: 0 0.25rem;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
/* Amount tabs - display in grid with 3 columns */
.amount-tabs,
#amount-tabs,
#amount-tabs-high {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 100% !important;
}
@media (min-width: 768px) {
.amount-tabs,
#amount-tabs,
#amount-tabs-high {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.amount-tabs,
#amount-tabs,
#amount-tabs-high {
grid-template-columns: repeat(3, 1fr);
}
}
/* Force amount tabs container to not scroll */
.amount-tabs-container .quick-tabs-scroll {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/* Force month tabs container to not scroll */
.month-tabs-container .quick-tabs-scroll {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
.quick-tab {
background: #f8f9fa;
border: 2px solid transparent;
border-radius: 1.5rem;
padding: 0.75rem 1.5rem;
color: #495057;
font-weight: 600;
font-size: 0.95rem;
white-space: nowrap;
transition: all 0.2s ease;
cursor: pointer;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* Enhanced styling specifically for amount tabs */
.amount-tabs .quick-tab {
background: white;
border: 2px solid #e9ecef;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.12);
position: relative;
overflow: hidden;
}
.amount-tabs .quick-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent, rgba(247, 147, 26, 0.05));
opacity: 0;
transition: opacity 0.2s ease;
}
.amount-tabs .quick-tab:hover {
background: white;
border-color: #F7931A;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}
.amount-tabs .quick-tab:hover::before {
opacity: 1;
}
.amount-tabs .quick-tab.active {
background: linear-gradient(135deg, #F7931A, #f8ad4e);
border-color: #F7931A;
color: white;
box-shadow: 0 6px 20px rgba(247, 147, 26, 0.35), 0 3px 8px rgba(0, 0, 0, 0.12);
transform: scale(1.05);
}
.amount-tabs .quick-tab.custom-amount-tab {
background: white;
border: 2px solid #e9ecef;
color: #495057;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.12);
}
.amount-tabs .quick-tab.custom-amount-tab:hover {
background: white;
border-color: #F7931A;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}
.amount-tabs .quick-tab.custom-amount-tab.active {
background: linear-gradient(135deg, #F7931A, #f8ad4e);
border-color: #F7931A;
color: white;
box-shadow: 0 6px 20px rgba(247, 147, 26, 0.35), 0 3px 8px rgba(0, 0, 0, 0.12);
transform: scale(1.05);
}
.quick-tab:hover {
background: #e9ecef;
color: #212529;
transform: translateY(-1px);
}
.quick-tab.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}
.quick-tab:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Year tabs specific styling */
#year-tabs .quick-tab {
min-width: 60px;
}
/* Month tabs - display in grid with 3 columns on mobile, 4 on tablet, 6 on desktop */
#month-tabs {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 100% !important;
}
@media (min-width: 576px) {
#month-tabs {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 768px) {
#month-tabs {
grid-template-columns: repeat(6, 1fr);
}
}
#month-tabs .quick-tab {
min-width: 50px;
padding: 0.75rem 1rem;
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
.quick-tabs {
display: flex !important;
flex-wrap: nowrap !important;
gap: 0.375rem;
}
/* Year tabs grid on mobile to show all years */
#year-tabs {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.quick-tab {
padding: 0.6rem 1.25rem;
font-size: 0.9rem;
}
#month-tabs .quick-tab {
padding: 0.6rem 0.9rem;
}
#year-tabs .quick-tab {
min-width: 55px;
}
/* Three-step guide mobile alignment fix */
.three-step-guide .row {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
}
.three-step-guide .col-4 {
flex: 0 0 31% !important;
max-width: 31% !important;
padding: 0 0.25rem !important;
}
.three-step-guide .step-item {
min-height: 100px !important;
}
.three-step-guide .step-icon {
font-size: 1.2rem !important;
height: 35px !important;
}
.three-step-guide small {
font-size: 0.65rem !important;
}
.three-step-guide .fw-semibold {
font-size: 0.7rem !important;
}
}
/* Desktop grid layout for larger screens - keep tabs scrollable */
@media (min-width: 992px) {
/* Year tabs show all in wrap layout on desktop too */
.year-tabs-container {
overflow: visible !important;
}
.year-tabs-container .quick-tabs-scroll {
overflow: visible !important;
}
/* Amount tabs use grid on desktop */
.amount-tabs-container .quick-tabs {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 100%;
}
.year-tabs-container .quick-tabs {
display: grid !important;
grid-template-columns: repeat(7, 1fr);
gap: 0.5rem;
width: 100%;
}
/* Month tabs use grid on desktop */
.month-tabs-container .quick-tabs {
display: grid !important;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
width: 100% !important;
}
}
/* Live Bitcoin Price Widget Styling */
.live-indicator {
display: flex;
align-items: center;
gap: 0.25rem;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.status-dot.live {
background: #22c55e;
animation: pulse-green 2s infinite;
}
.status-dot.error {
background: #ef4444;
}
@keyframes pulse-green {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
.price-widget {
background: linear-gradient(135deg, #ffffff, #f8fafc);
border: 2px solid rgba(247, 147, 26, 0.15);
border-radius: 1rem;
padding: 1.5rem;
margin: 1.5rem 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.market-cap-display {
margin: 0.5rem 0;
}
.price-comparison {
font-size: 0.9rem;
}
/* Live Bitcoin Price Widget */
.live-price-section {
margin: 3rem 0 2rem 0;
display: flex;
justify-content: center;
}
.live-price-widget {
background: linear-gradient(135deg, #ffffff, #f8fafc);
border: 2px solid rgba(247, 147, 26, 0.2);
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}
.price-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.price-title-section {
display: flex;
align-items: center;
gap: 0.75rem;
}
.btc-icon {
width: 32px;
height: 32px;
border-radius: 50%;
}
.price-title-section h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
}
.live-status {
display: flex;
align-items: center;
gap: 0.5rem;
}
.live-dot {
width: 10px;
height: 10px;
background: #22c55e;
border-radius: 50%;
animation: pulse-live 2s infinite;
}
.live-text {
font-size: 0.875rem;
color: #22c55e;
font-weight: 500;
}
@keyframes pulse-live {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
.current-price {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 1rem;
}
.price-meta {
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
padding: 0.75rem;
background: rgba(247, 147, 26, 0.05);
border-radius: 0.75rem;
}
.market-info, .update-time {
display: flex;
flex-direction: column;
align-items: center;
}
.price-meta .label {
font-size: 0.75rem;
color: #6b7280;
margin-bottom: 0.25rem;
}
.price-meta .value {
font-size: 0.875rem;
font-weight: 600;
color: #1f2937;
}
.price-growth {
padding: 1rem;
background: rgba(34, 197, 94, 0.1);
border-radius: 0.75rem;
border: 1px solid rgba(34, 197, 94, 0.2);
}
.growth-label {
display: block;
font-size: 0.875rem;
color: #4b5563;
margin-bottom: 0.5rem;
}
.growth-value {
font-size: 1.25rem;
font-weight: 700;
}
.growth-value.positive {
color: #22c55e;
}
.growth-value.negative {
color: #ef4444;
}
/* Mobile responsive */
@media (max-width: 768px) {
.live-price-widget {
margin: 0 1rem;
padding: 1.5rem;
}
.current-price {
font-size: 2rem;
}
.price-header {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.price-meta {
flex-direction: column;
gap: 0.75rem;
}
}
/* Updated Share Buttons Styling */
.share-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
margin-top: 1.5rem;
}
.share-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 0.75rem;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
min-width: 140px;
justify-content: center;
}
.share-btn.primary {
background: var(--primary-color);
color: white;
}
.share-btn.primary:hover {
background: #ea580c;
transform: translateY(-1px);
}
.share-btn.secondary {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.share-btn.secondary:hover {
background: #e5e7eb;
border-color: #9ca3af;
transform: translateY(-1px);
}
.share-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Social Share Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
.modal-content {
background: #0a0a0a;
border: 2px solid rgba(247, 147, 26, 0.3);
border-radius: 1rem;
padding: 0;
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 40px rgba(247, 147, 26, 0.2), 0 0 80px rgba(247, 147, 26, 0.1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid rgba(247, 147, 26, 0.2);
background: linear-gradient(135deg, rgba(247, 147, 26, 0.1), rgba(247, 147, 26, 0.05));
}
.modal-header h4 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: #F7931A;
text-shadow: 0 0 20px rgba(247, 147, 26, 0.3);
}
.modal-close {
background: rgba(247, 147, 26, 0.1);
border: 1px solid rgba(247, 147, 26, 0.2);
padding: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
color: #F7931A;
transition: all 0.2s ease;
}
.modal-close:hover {
background: rgba(247, 147, 26, 0.2);
color: white;
transform: scale(1.1);
box-shadow: 0 0 20px rgba(247, 147, 26, 0.3);
}
.modal-body {
padding: 1.5rem;
text-align: center;
background: #0a0a0a;
}
.modal-body p {
margin-bottom: 1.5rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
}
.image-preview {
margin: 1.5rem 0;
border: 2px dashed rgba(247, 147, 26, 0.3);
border-radius: 0.75rem;
padding: 2rem;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(247, 147, 26, 0.05);
}
.image-preview img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
border: 1px solid rgba(247, 147, 26, 0.2);
}
/* Current date display in mathematical breakdown */
.data-source {
line-height: 1.6;
}
#calculation-current-date {
color: #374151;
font-weight: 500;
}
/* Skeleton loading animations */
@keyframes shimmer {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
.skeleton-bar {
display: inline-block;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200px 100%;
animation: shimmer 1.5s infinite;
}
/* Trust & Privacy Block */
.trust-privacy-block .trust-item {
border-radius: 1rem;
transition: transform 0.2s ease;
}
.trust-privacy-block .trust-item:hover {
transform: translateY(-2px);
}
/* Start Here Banner */
#start-here-banner {
border-width: 2px;
font-size: 0.95rem;
}
#start-here-banner .btn-close {
filter: invert(1);
}
/* Quick preset buttons for amounts */
.amount-preset-chips {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 1rem;
}
.preset-chip {
background: white;
border: 2px solid var(--primary-color);
color: var(--primary-color);
border-radius: 2rem;
padding: 0.5rem 1rem;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
min-height: 44px;
display: flex;
align-items: center;
}
.preset-chip:hover,
.preset-chip.active {
background: var(--primary-color);
color: white;
}
/* Mobile responsive improvements */
.hero-section {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
@media (max-width: 768px) {
.hero-section {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.price-card {
max-width: 300px !important;
margin-bottom: 2rem !important;
}
body {
font-size: 16px;
}
.quick-tabs-scroll {
overflow-x: auto !important;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.quick-tab {
min-height: 44px;
min-width: 44px;
}
/* Remove snap for all tabs */
.amount-tabs-container .quick-tabs-scroll,
.year-tabs-container .quick-tabs-scroll,
.month-tabs-container .quick-tabs-scroll {
scroll-snap-type: none !important;
}
.amount-tabs .quick-tab,
#year-tabs .quick-tab,
#month-tabs .quick-tab {
scroll-snap-align: none !important;
}
.expense-card {
min-height: 44px;
min-width: 44px;
}
.examples-carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.examples-carousel .col-md-4 {
flex: 0 0 280px;
scroll-snap-align: start;
}
/* Mobile responsive for share buttons */
@media (max-width: 768px) {
.share-buttons {
flex-direction: column;
align-items: stretch;
}
.share-btn {
min-width: auto;
width: 100%;
justify-content: center;
}
.modal-content {
margin: 1rem;
max-width: calc(100vw - 2rem);
}
.modal-header {
padding: 1rem;
}
.modal-body {
padding: 1rem;
}
}
/* Story Title Generation Styling */
.story-title-section {
background: white;
border-radius: 0.75rem;
padding: 1.5rem;
border: 2px solid #e5e7eb;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.story-title-section .form-label {
display: flex;
align-items: center;
gap: 0.5rem;
}
.title-suggestion-chips {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.title-suggestion-chips .btn {
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
white-space: nowrap;
border-radius: 1rem;
transition: all 0.2s ease;
}
.title-suggestion-chips .btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#shuffle-title-btn {
font-weight: 600;
white-space: nowrap;
transition: all 0.2s ease;
}
#shuffle-title-btn:hover {
transform: scale(1.02);
}
#title-char-count {
font-size: 0.75rem;
transition: color 0.2s ease;
}
.step-summary {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
padding: 0.75rem;
margin-top: 1rem;
}
/* Title generation loading states */
#title-loading-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Enhanced input styling for story title */
#story_title {
font-weight: 500;
font-size: 1rem;
}
#story_title:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(247, 147, 26, 0.25);
}
/* CoinGecko Attribution Styles */
.cg-attr {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
justify-content: flex-end;
}
/* CoinGecko attribution label removed per user request */
.cg-attr__logo {
height: 18px;
width: auto;
display: block;
transition: opacity 0.2s ease;
}
.cg-attr__link:hover .cg-attr__logo {
opacity: 0.8;
}
.trust-chip {
display: inline-flex !important;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid #E6EDF5;
border-radius: 9999px;
background: #FFFFFF;
text-decoration: none !important;
transition: all 0.2s ease;
}
.trust-chip:hover {
background: #F8FAFC;
border-color: #D1D5DB;
text-decoration: none !important;
}
.trust-chip__logo {
height: 32px;
width: auto;
display: block;
}
.trust-chip__text {
font-size: 13px;
color: #415269;
}
/* Enhanced Mobile-First Responsive Design */
@media (max-width: 768px) {
/* Mobile-optimized forms */
.form-control, .form-select {
font-size: 16px; /* Prevents zoom on iOS */
padding: 0.875rem 1rem;
}
/* Better touch targets for mobile */
.btn {
min-height: 48px;
min-width: 48px;
padding: 0.75rem 1.5rem;
}
/* Expense grid mobile layout */
.expense-grid {
gap: 0.75rem;
grid-template-columns: repeat(2, 1fr);
}
.expense-card {
padding: 1rem;
font-size: 0.9rem;
}
.expense-card .expense-icon {
font-size: 1.8rem;
}
/* Quick tabs mobile scrolling */
.quick-tabs-scroll {
overflow-x: scroll !important;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
}
/* All tabs use wrap layout - no scrolling needed */
.amount-tabs-container .quick-tabs-scroll,
.month-tabs-container .quick-tabs-scroll {
overflow: visible !important;
scroll-snap-type: none !important;
}
/* Year tabs wrap, don't scroll */
.year-tabs-container .quick-tabs-scroll {
overflow: visible !important;
scroll-snap-type: none !important;
}
.amount-tabs {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 100%;
}
.month-tabs,
#month-tabs {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 100%;
}
.year-tabs {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 100%;
}
/* Remove snap for all tabs */
.amount-tabs .quick-tab,
#year-tabs .quick-tab,
#month-tabs .quick-tab {
scroll-snap-align: none !important;
}
.quick-tab {
min-width: 80px;
}
/* Remove snap for all tabs on small screens */
.amount-tabs .quick-tab,
#year-tabs .quick-tab,
#month-tabs .quick-tab {
scroll-snap-align: none !important;
}
/* Manual input mobile optimization */
#manual_amount_1 {
font-size: 18px;
font-weight: 600;
text-align: center;
}
/* Loading overlay mobile */
.loading-content {
margin: 1rem;
width: calc(100% - 2rem);
max-width: 350px;
}
/* Story timeline mobile */
.timeline-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Step indicators mobile */
.step-container {
margin-bottom: 1.5rem;
}
/* Bitcoin price ticker mobile */
.price-ticker {
font-size: 0.9rem;
}
/* Story cards mobile */
.story-card {
padding: 1.5rem 1rem;
}
/* Financial amounts mobile */
.step-amount-perfect {
font-size: 2rem !important;
}
/* Hero section mobile */
.hero-section h1 {
font-size: 2rem;
}
.hero-section .lead {
font-size: 1.1rem;
}
/* Timeline event card mobile */
.timeline-event-card {
padding: 1.5rem 1rem;
}
/* Journey steps mobile */
.journey-step-perfect {
padding: 1.5rem 1rem;
min-height: 150px;
}
/* Footer mobile */
footer {
padding: 2rem 1rem;
text-align: center;
}
footer .row {
text-align: center;
}
footer .col-md-4 {
margin-bottom: 1.5rem;
}
}
/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991px) {
.container {
max-width: 720px;
}
.expense-grid {
grid-template-columns: repeat(3, 1fr);
}
.quick-tabs {
justify-content: center;
flex-wrap: wrap;
}
.step-amount-perfect {
font-size: 2.2rem !important;
}
}
/* Enhanced manual input styling */
.manual-input-container {
position: relative;
}
.manual-input-container input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(255, 122, 61, 0.25);
}
.manual-input-feedback {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 0.25rem;
font-size: 0.875rem;
transition: all 0.3s ease;
}
.manual-input-feedback.valid {
color: var(--success-color);
}
.manual-input-feedback.invalid {
color: var(--danger-color);
}
/* Improved touch interactions */
@media (hover: none) and (pointer: coarse) {
.expense-card:active {
transform: scale(0.98);
transition: transform 0.1s;
}
.quick-tab:active {
transform: scale(0.95);
background-color: var(--primary-color);
color: white;
}
.btn:active {
transform: scale(0.98);
}
}
/* Accessibility improvements */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus indicators for keyboard navigation */
*:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.card {
border: 1px solid currentColor;
}
.btn {
border: 2px solid currentColor;
}
}
/* Micro-animations */
@keyframes pulseSelect {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(20px);
}
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
/* Copy button styles */
.copy-button {
position: relative;
background: var(--primary-color);
color: white;
border: none;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.copy-button:hover {
background: #ff8c42;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255, 122, 61, 0.3);
}
.copy-button:active {
transform: translateY(0);
}
.copy-button.copied {
background: var(--success-color);
}
.copy-button.copied::after {
content: '✓ Copied!';
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
font-size: 0.75rem;
white-space: nowrap;
animation: fadeInOut 2s ease;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0; }
20%, 80% { opacity: 1; }
}
/* Enhanced form validation styles */
.form-control.is-valid {
border-color: var(--success-color);
animation: validPulse 0.5s ease;
}
.form-control.is-invalid {
border-color: var(--danger-color);
animation: shake 0.3s ease;
}
@keyframes validPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
50% { box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.2); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Error message styles */
.error-banner {
background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
border: 1px solid #fca5a5;
border-radius: 0.75rem;
padding: 1rem 1.5rem;
margin: 1rem 0;
animation: slideIn 0.3s ease;
}
.error-banner .error-title {
color: #dc2626;
font-weight: 600;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.error-banner .error-message {
color: #7f1d1d;
font-size: 0.95rem;
line-height: 1.5;
}
.error-banner .retry-button {
background: #dc2626;
color: white;
border: none;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
margin-top: 0.75rem;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
}
.error-banner .retry-button:hover {
background: #b91c1c;
transform: translateY(-1px);
}
/* Hero Ribbon - Affiliate Conversion Section */
.hero-ribbon-section {
background: linear-gradient(135deg, #fff8f3 0%, #fff5ed 100%);
border-top: 1px solid rgba(247, 147, 26, 0.1);
border-bottom: 1px solid rgba(247, 147, 26, 0.1);
}
.hero-ribbon-container {
text-align: center;
padding: 2rem 1rem;
background: white;
border-radius: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(247, 147, 26, 0.15);
}
.hero-headline {
font-size: 2rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 0.75rem;
}
.hero-subhead {
font-size: 1.1rem;
color: #6b7280;
line-height: 1.6;
}
.dynamic-stack-message {
font-weight: 500;
color: var(--primary-color);
}
.hero-cta {
font-size: 1.125rem;
font-weight: 600;
padding: 0.875rem 2rem;
background: var(--primary-color);
border: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.3);
}
.hero-cta:hover {
background: #ff8c42;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(247, 147, 26, 0.4);
}
/* Affiliate Start Section */
.affiliate-start-section {
background: #f9fafb;
}
.start-headline {
font-size: 1.75rem;
font-weight: 700;
color: #1a1a1a;
}
.start-subhead {
font-size: 1.125rem;
}
/* Step Cards */
.step-card {
background: white;
padding: 2rem;
border-radius: 0.75rem;
border: 1px solid #e5e7eb;
position: relative;
transition: all 0.3s ease;
}
.step-card:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.step-card.step-primary {
border: 2px solid var(--primary-color);
background: linear-gradient(135deg, #fffbf7 0%, #fff 100%);
}
.step-number {
position: absolute;
top: -12px;
left: 20px;
background: var(--primary-color);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
}
.step-card.step-primary .step-number {
background: var(--primary-color);
box-shadow: 0 4px 12px rgba(247, 147, 26, 0.3);
}
.step-title {
font-size: 1.25rem;
font-weight: 600;
color: #1a1a1a;
margin-top: 0.5rem;
}
.step-bullets {
list-style: none;
padding: 0;
margin: 0;
}
.step-bullets li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: #4b5563;
}
.step-bullets li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--success-color);
font-weight: 700;
}
.affiliate-btn {
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.step-microcopy {
color: #6b7280;
font-size: 0.875rem;
}
/* Trust Row */
.trust-chip-item {
background: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
border: 1px solid #e5e7eb;
font-size: 0.875rem;
color: #4b5563;
white-space: nowrap;
}
.disclosure-text {
color: #9ca3af;
font-size: 0.8rem;
}
/* Mobile Sticky CTA */
@media (max-width: 575px) {
.sticky-mobile-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
border-radius: 0;
z-index: 100;
padding: 1rem;
font-size: 1.125rem;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}
#step1 .step-card {
padding-bottom: 5rem; /* Space for fixed button */
}
.hero-headline {
font-size: 1.5rem;
}
.hero-subhead {
font-size: 1rem;
}
.start-headline {
font-size: 1.4rem;
}
.step-card {
margin-bottom: 1.5rem;
}
}
/* Tablet and up - no sticky behavior */
@media (min-width: 576px) {
.sticky-mobile-cta {
position: relative !important;
}
}
/* Desktop optimizations */
@media (min-width: 992px) {
.hero-ribbon-container {
padding: 3rem 2rem;
}
.hero-headline {
font-size: 2.5rem;
}
.start-headline {
font-size: 2rem;
}
/* Make step 1 more prominent on desktop */
#step1 .step-card {
min-height: 100%;
box-shadow: 0 8px 20px rgba(247, 147, 26, 0.15);
}
}
/* Accessibility enhancements */
.affiliate-btn:focus,
.hero-cta:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.step-card {
border: 2px solid currentColor;
}
.hero-ribbon-container {
border: 2px solid currentColor;
}
}
/* Premium Affiliate Section Redesign */
:root {
--brand-primary: #ff7a45;
--brand-accent: #2d5bff;
--surface: #ffffff;
--bg: #f6f7fb;
--text: #2b2f36;
--muted: #667085;
--ring: 0 0 0 4px rgba(45,91,255,.15);
--shadow-sm: 0 4px 14px rgba(20,23,28,.06);
--shadow-lg: 0 18px 40px rgba(20,23,28,.12);
}
#hero-ribbon .ribbon-card {
background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,250,255,.9));
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
border: 1px solid rgba(255,255,255,.5);
border-radius: 32px;
box-shadow:
0 24px 48px rgba(31,38,135,.07),
0 12px 24px rgba(31,38,135,.04),
inset 0 2px 4px rgba(255,255,255,.9);
padding: 64px 40px;
position: relative;
overflow: hidden;
transform: translateZ(0);
}
#hero-ribbon .ribbon-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 20%, rgba(255,122,69,.06) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(45,91,255,.04) 0%, transparent 50%);
pointer-events: none;
}
#hero-ribbon .ribbon-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,.8) 20%,
rgba(255,255,255,.8) 80%,
transparent 100%);
pointer-events: none;
}
.arrow-pill {
animation: float 3s ease-in-out infinite;
background: linear-gradient(135deg, rgba(45,91,255,.12), rgba(45,91,255,.06)) !important;
border: 1px solid rgba(45,91,255,.2);
box-shadow: 0 4px 12px rgba(45,91,255,.1);
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-6px) rotate(2deg); }
}
.hero-headline {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, #2b2f36 0%, #667085 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.hero-subhead {
font-size: 1.25rem;
color: var(--muted);
font-weight: 500;
}
@media (max-width: 768px) {
.hero-headline {
font-size: 2rem;
}
.hero-subhead {
font-size: 1.1rem;
}
}
.btn-gradient {
background: linear-gradient(135deg, #ff7a45 0%, #ff915f 50%, #ff7a45 100%);
background-size: 200% 200%;
animation: shimmer 3s ease-in-out infinite;
color: #fff;
border: none;
border-radius: 999px;
padding: 16px 40px;
font-weight: 700;
font-size: 1.2rem;
letter-spacing: 0.02em;
box-shadow:
0 4px 16px rgba(255,122,69,.3),
0 8px 32px rgba(255,122,69,.15),
inset 0 2px 4px rgba(255,255,255,.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
text-shadow: 0 1px 2px rgba(0,0,0,.1);
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.btn-gradient::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
transition: left 0.6s;
}
.btn-gradient:hover::before {
left: 100%;
}
.btn-gradient:hover,
.btn-gradient:focus-visible {
transform: translateY(-3px) scale(1.02);
box-shadow:
var(--ring),
0 8px 24px rgba(255,122,69,.4),
0 16px 48px rgba(255,122,69,.2);
color: #fff;
animation-play-state: paused;
}
#affiliate-start {
position: relative;
padding: 5rem 0 4rem;
background: linear-gradient(180deg,
rgba(0,82,255,.03) 0%,
rgba(0,82,255,.01) 50%,
transparent 100%);
border-radius: 32px;
margin: 4rem 0;
border: 1px solid rgba(0,82,255,.08);
}
#affiliate-start::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 5px;
background: linear-gradient(90deg, #0052FF, #1652F0);
border-radius: 5px;
box-shadow: 0 2px 12px rgba(0,82,255,.3);
}
.start-headline {
font-size: 3rem;
font-weight: 900;
background: linear-gradient(135deg, #0052FF 0%, #1652F0 50%, #0052FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.75rem;
letter-spacing: -0.03em;
text-align: center;
animation: gradient-shift 3s ease infinite;
background-size: 200% 200%;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.start-subhead {
font-size: 1.25rem;
font-weight: 500;
color: #667085;
margin-bottom: 3rem;
}
#affiliate-start .card.step {
border-radius: 20px;
border: 2px solid rgba(230,232,236,1);
box-shadow:
0 1px 3px rgba(0,0,0,.05),
0 4px 12px rgba(0,0,0,.03);
height: 100%;
min-height: 280px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #ffffff;
position: relative;
padding: 2rem;
display: flex;
flex-direction: column;
}
#affiliate-start .card.step::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, transparent, rgba(0,82,255,.2), transparent);
border-radius: 20px;
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}
#affiliate-start .card.step:hover {
transform: translateY(-6px);
box-shadow:
0 8px 24px rgba(0,0,0,.08),
0 16px 48px rgba(0,0,0,.04);
border-color: rgba(0,82,255,.2);
}
#step1 .card.step:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 8px 32px rgba(0,82,255,.25),
0 16px 64px rgba(0,82,255,.15),
0 24px 96px rgba(0,82,255,.08);
border-color: #0052FF;
}
#affiliate-start .card.step:hover::before {
opacity: 1;
}
/* Coinbase step - premium blue branding */
#step1 .card.step {
background: #ffffff;
border: 3px solid #0052FF;
position: relative;
overflow: hidden;
box-shadow:
0 4px 16px rgba(0,82,255,.15),
0 8px 32px rgba(0,82,255,.08);
}
/* Shine effect disabled - was causing moving white shimmer
#step1 .card.step::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0,82,255,.1) 0%, transparent 60%);
pointer-events: none;
animation: rotate-slow 20s linear infinite;
}
@keyframes rotate-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
*/
/* Proton step - secondary */
#step2 .card.step {
border-color: #e6e8ec;
}
/* Weekly stacks step - secondary */
#step3 .card.step {
border-color: #e6e8ec;
}
.step-dot {
width: 64px;
height: 64px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 800;
font-size: 1.75rem;
color: #667085;
background: #f9fafb;
border: 3px solid #e6e8ec;
flex-shrink: 0;
position: relative;
transition: all 0.3s ease;
}
/* Coinbase step dot - premium blue branding */
#step1 .step-dot {
background: linear-gradient(135deg, #0052FF, #1652F0);
color: #ffffff;
border: 3px solid rgba(0,82,255,.2);
box-shadow:
0 4px 16px rgba(0,82,255,.3),
0 8px 32px rgba(0,82,255,.15),
inset 0 1px 3px rgba(255,255,255,.3);
font-weight: 900;
font-size: 2rem;
}
#step1 .step-dot::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 18px;
border: 2px solid rgba(0,82,255,.2);
animation: pulse-blue 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-blue {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 0; transform: scale(1.08); }
}
/* Secondary steps */
.step--secondary .step-dot {
background: #f9fafb;
color: #667085;
border: 2px solid #e6e8ec;
}
/* Step content styling */
.step-content {
flex: 1;
display: flex;
flex-direction: column;
}
.step-title {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 1rem;
}
#step1 .step-title {
color: #0052FF;
font-weight: 800;
font-size: 1.6rem;
}
.icon-coin,
.icon-shield,
.icon-dca {
width: 20px;
height: 20px;
display: inline-block;
background: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
}
.icon-coin {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
.icon-shield {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
.icon-dca {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
.microcopy {
color: var(--muted);
font-size: 0.875rem;
}
/* Connector line on desktop */
@media (min-width: 992px) {
.steps-connector {
position: relative;
margin-top: -12px;
margin-bottom: 60px;
height: 4px;
}
.steps-connector::before {
content: "";
position: absolute;
left: 10%;
right: 10%;
top: 0;
height: 4px;
background: linear-gradient(90deg,
rgba(255,122,69,.3) 0%,
rgba(45,91,255,.3) 33%,
rgba(45,91,255,.2) 66%,
rgba(45,91,255,.1) 100%);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(45,91,255,.1);
}
.steps-connector::after {
content: "";
position: absolute;
left: 10%;
width: 8px;
height: 8px;
top: -2px;
background: var(--brand-primary);
border-radius: 50%;
box-shadow: 0 0 12px rgba(255,122,69,.4);
animation: slide 3s ease-in-out infinite;
}
@keyframes slide {
0%, 100% { left: 10%; }
50% { left: calc(90% - 8px); }
}
}
/* Sticky CTA on mobile */
@media (max-width: 576px) {
.sticky-cta {
position: sticky;
bottom: 12px;
z-index: 10;
box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}
#affiliate-start .card.step {
margin-bottom: 60px;
}
}
/* Entrance animations */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: none;
}
}
.animate-in {
animation: fadeUp 0.48s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.stagger-1 { animation-delay: 0.08s; }
.stagger-2 { animation-delay: 0.16s; }
.stagger-3 { animation-delay: 0.24s; }
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.animate-in {
animation: none;
}
.btn-gradient:hover {
transform: none;
}
.arrow-pill {
animation: none;
}
#affiliate-start .card.step:hover {
transform: none;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
:root {
--surface: #0f1220;
--bg: #0b0e19;
--text: #e6e8ee;
--muted: #9aa3b2;
}
#hero-ribbon .ribbon-card,
#affiliate-start .card.step {
border-color: rgba(255,255,255,.08);
background: var(--surface);
}
#hero-ribbon .ribbon-card {
background: linear-gradient(180deg, rgba(15,18,32,.85), rgba(15,18,32,.75));
}
.trust-chip-item {
background: rgba(45,91,255,.15) !important;
color: var(--text) !important;
}
.arrow-pill {
background: rgba(45,91,255,.2) !important;
}
}
/* Enhanced trust chips and step bullets */
.trust-chip-item {
background: linear-gradient(135deg, rgba(45,91,255,.12), rgba(45,91,255,.08)) !important;
color: var(--text) !important;
border: 1px solid rgba(45,91,255,.15);
font-weight: 600;
padding: 0.6rem 1.2rem !important;
transition: all 0.3s ease;
}
.trust-chip-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(45,91,255,.15);
background: linear-gradient(135deg, rgba(45,91,255,.18), rgba(45,91,255,.12)) !important;
}
/* ===== BUTTON STYLES FOR MEDIUM SCREENS (361px-768px) ===== */
@media (max-width: 768px) {
/* Ensure buttons never wrap text on tablets/medium screens */
.btn {
white-space: nowrap !important;
min-width: auto !important;
padding: 0.5rem 1rem !important;
word-break: keep-all !important;
hyphens: none !important;
}
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
white-space: nowrap !important;
padding: 0.5rem 1rem !important;
}
}
/* ===== HARDENED MOBILE TYPOGRAPHY FOR VERY SMALL VIEWPORTS (320-360px) ===== */
@media (max-width: 360px) {
/* Prevent word breaks in critical UI elements */
h1, h2, h3, h4, h5, h6,
.btn, .quick-tab, .trust-chip-item,
.expense-label, .step-label-perfect,
.nav-link, .badge, .chip {
word-break: keep-all !important;
overflow-wrap: normal !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
-ms-hyphens: none !important;
}
/* Allow controlled breaking only in body text */
p, .story-text, .description, .card-text {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
}
/* Headings - smaller but readable */
h1 {
font-size: 1.75rem !important;
line-height: 1.2 !important;
letter-spacing: -0.02em;
}
h2 {
font-size: 1.5rem !important;
line-height: 1.25 !important;
}
h3 {
font-size: 1.25rem !important;
line-height: 1.3 !important;
}
h4 {
font-size: 1.1rem !important;
line-height: 1.35 !important;
}
/* Hero sections */
.hero-section h1,
.hero-headline {
font-size: 1.75rem !important;
padding: 0 0.5rem;
}
.hero-section .lead,
.hero-subtitle {
font-size: 1rem !important;
padding: 0 0.5rem;
}
/* Buttons - maintain touch targets */
.btn {
min-height: 44px !important;
min-width: auto !important;
padding: 0.625rem 1.25rem !important;
font-size: 0.875rem !important;
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-lg {
padding: 0.75rem 1.25rem !important;
font-size: 0.9375rem !important;
white-space: nowrap !important;
}
.btn-sm {
padding: 0.5rem 0.75rem !important;
font-size: 0.8125rem !important;
min-height: 36px !important;
white-space: nowrap !important;
}
/* Share buttons */
.share-btn,
.x-primary-btn,
.whatsapp-primary-btn,
.instagram-primary-btn,
.tiktok-primary-btn {
font-size: 0.875rem !important;
padding: 0.75rem 1rem !important;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
}
.share-btn svg,
.share-btn i {
flex-shrink: 0;
}
/* Quick tabs and chips */
.quick-tab {
font-size: 0.8125rem !important;
padding: 0.625rem 1rem !important;
min-width: 44px !important;
min-height: 44px !important;
white-space: nowrap;
}
.trust-chip-item {
font-size: 0.75rem !important;
padding: 0.5rem 0.875rem !important;
white-space: nowrap;
}
/* Amount tabs - prevent overflow */
.amount-tabs .quick-tab {
padding: 0.625rem 0.75rem !important;
font-size: 0.8125rem !important;
}
/* Expense cards */
.expense-card {
padding: 0.625rem !important;
min-height: 72px !important;
}
.expense-emoji {
font-size: 1.25rem !important;
}
.expense-label {
font-size: 0.6875rem !important;
line-height: 1.2 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Form inputs */
.form-control,
.form-select {
font-size: 16px !important; /* Prevents iOS zoom */
padding: 0.75rem 0.875rem !important;
min-height: 44px !important;
}
/* Journey flow */
.journey-step-perfect {
padding: 1.25rem 0.75rem !important;
min-height: 140px !important;
}
.step-amount-perfect {
font-size: 1.5rem !important;
line-height: 1.1 !important;
white-space: nowrap;
}
.step-label-perfect {
font-size: 0.8125rem !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Affiliate section */
.start-headline {
font-size: 2rem !important;
padding: 0 0.5rem;
line-height: 1.1 !important;
}
.start-subhead {
font-size: 0.9375rem !important;
padding: 0 0.5rem;
}
/* Step cards */
.card.step h3 {
font-size: 1rem !important;
}
.step-bullets li {
font-size: 0.8125rem !important;
line-height: 1.4 !important;
}
/* Timeline event cards */
.timeline-event-card {
padding: 1.25rem 0.875rem !important;
}
.event-amount {
font-size: 1.5rem !important;
white-space: nowrap;
}
.event-label {
font-size: 0.875rem !important;
}
/* Price displays */
.price-display,
.bitcoin-price {
font-size: 1.25rem !important;
white-space: nowrap;
}
.price-ticker {
font-size: 0.8125rem !important;
}
/* Modal content */
.modal-content {
margin: 0.5rem !important;
max-width: calc(100vw - 1rem) !important;
}
.modal-header h4 {
font-size: 1.125rem !important;
}
.modal-body {
padding: 0.875rem !important;
font-size: 0.875rem !important;
}
/* Navigation */
.navbar-brand {
font-size: 1.125rem !important;
}
.nav-link {
font-size: 0.875rem !important;
padding: 0.5rem 0.75rem !important;
}
/* Footer */
footer {
font-size: 0.8125rem !important;
}
footer h5 {
font-size: 1rem !important;
}
/* Story cards */
.story-card {
padding: 1.25rem 0.875rem !important;
}
.story-title {
font-size: 1.125rem !important;
line-height: 1.2 !important;
}
.story-amount {
font-size: 1.25rem !important;
white-space: nowrap;
}
/* Loading overlay */
.loading-content {
margin: 0.75rem !important;
width: calc(100% - 1.5rem) !important;
max-width: 300px !important;
padding: 1.25rem !important;
}
.loading-title {
font-size: 1.125rem !important;
}
.loading-fact {
font-size: 0.875rem !important;
}
/* Notification toasts */
.toast-message {
font-size: 0.875rem !important;
padding: 0.875rem 1rem !important;
}
/* Container adjustments */
.container {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
/* Card padding */
.card {
padding: 1rem !important;
}
.card-body {
padding: 0.875rem !important;
}
/* Margin and spacing utilities */
.my-5 {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
.my-4 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.py-5 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.py-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
/* Special handling for very long text */
.badge,
.chip,
.tag {
font-size: 0.6875rem !important;
padding: 0.25rem 0.5rem !important;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
/* Ensure readable contrast */
body {
font-size: 0.9375rem !important;
line-height: 1.5 !important;
}
/* Prevent horizontal scroll */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* Grid adjustments */
.row {
margin-left: -0.5rem !important;
margin-right: -0.5rem !important;
}
.col,
[class*="col-"] {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
/* Affiliate section specific */
#affiliate-start .start-headline {
font-size: 1.75rem !important;
background-size: 150% auto !important;
word-spacing: -0.05em;
}
#affiliate-start .card.step {
padding: 0.875rem !important;
}
#affiliate-start .step-dot {
width: 48px !important;
height: 48px !important;
font-size: 1.5rem !important;
}
#affiliate-start h3 {
font-size: 0.9375rem !important;
}
/* Exchange buttons in affiliate section */
.exchange-option h5 {
font-size: 0.875rem !important;
}
.exchange-option .btn {
font-size: 0.8125rem !important;
padding: 0.625rem 0.875rem !important;
}
/* Expense type grid */
.expense-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.5rem !important;
}
.expense-card {
padding: 0.875rem !important;
min-height: 90px !important;
}
.expense-emoji {
font-size: 1.75rem !important;
margin-bottom: 0.35rem !important;
}
.expense-label {
font-size: 0.75rem !important;
line-height: 1.2 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
max-width: 100%;
text-align: center;
}
/* Share section buttons */
.share-buttons {
gap: 0.5rem !important;
}
.share-btn {
font-size: 0.8125rem !important;
padding: 0.625rem 0.75rem !important;
}
.share-btn svg {
width: 16px !important;
height: 16px !important;
}
/* Popular stories examples */
.example-story-card {
padding: 0.875rem !important;
}
.example-story-card h5 {
font-size: 0.9375rem !important;
}
.example-story-card .text-muted {
font-size: 0.75rem !important;
}
/* Date/Month selectors */
.month-grid,
.year-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.375rem !important;
}
.month-option,
.year-option {
padding: 0.5rem 0.25rem !important;
font-size: 0.75rem !important;
}
/* Amount input section */
.amount-input-wrapper input {
font-size: 1.25rem !important;
}
.currency-symbol {
font-size: 1.125rem !important;
}
/* Submit button */
#create-story-btn {
font-size: 0.9375rem !important;
padding: 0.875rem 1.25rem !important;
}
/* Learn Bitcoin button */
.mega-cta-btn {
font-size: 0.9375rem !important;
padding: 0.875rem 1.25rem !important;
}
/* Timeline navigation dots */
.nav-dot {
width: 8px !important;
height: 8px !important;
}
/* Live price widget */
.live-price-widget {
padding: 0.75rem !important;
font-size: 0.8125rem !important;
}
.live-price-widget .price {
font-size: 1.125rem !important;
}
/* Copy link modal */
#copyLinkModal .modal-content {
padding: 1rem !important;
}
#copyLinkModal textarea {
font-size: 0.8125rem !important;
padding: 0.625rem !important;
}
}
/* Additional iPhone SE specific adjustments (375px width) */
@media (min-width: 361px) and (max-width: 375px) {
/* Slightly larger sizes for iPhone SE */
.btn {
font-size: 0.9375rem !important;
padding: 0.6875rem 1.125rem !important;
}
h1 {
font-size: 1.875rem !important;
}
h2 {
font-size: 1.625rem !important;
}
.expense-card {
padding: 0.875rem !important;
min-height: 95px !important;
}
.expense-emoji {
font-size: 1.875rem !important;
}
.expense-label {
font-size: 0.775rem !important;
}
}
/* Enhanced step bullets with proper alignment */
.step-bullets {
list-style: none;
padding-left: 0;
margin: 1.5rem 0;
}
.step-bullets li {
display: flex;
align-items: center;
margin-bottom: 0.875rem;
font-size: 1.05rem;
color: #4a5568;
font-weight: 500;
line-height: 1.5;
}
.step-bullets li::before {
content: '✓';
margin-right: 0.875rem;
flex-shrink: 0;
width: 24px;
height: 24px;
background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(16,185,129,.08));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
color: #10b981;
font-weight: 700;
border: 1px solid rgba(16,185,129,.2);
}
/* Coinbase step - blue branded bullets */
#step1 .step-bullets li {
color: #1e3a8a;
font-weight: 600;
}
#step1 .step-bullets li::before {
background: linear-gradient(135deg, #0052FF, #1652F0);
color: #ffffff;
border: 2px solid rgba(0,82,255,.2);
box-shadow: 0 2px 8px rgba(0,82,255,.25);
}
/* ========================================
SUPER COINBASE BUTTON ANIMATIONS
======================================== */
/* Pulsing glow animation - ULTRA DRAMATIC BOUNCE */
@keyframes pulseGlow {
0% {
transform: scale(1) translateY(0) rotate(0deg);
box-shadow:
0 4px 15px rgba(0,82,255,0.4),
0 8px 30px rgba(0,82,255,0.3);
}
20% {
transform: scale(1.1) translateY(-8px) rotate(-1deg);
box-shadow:
0 10px 30px rgba(0,82,255,0.6),
0 20px 60px rgba(0,82,255,0.4),
0 0 80px rgba(0,82,255,0.3);
}
40% {
transform: scale(1.2) translateY(-12px) rotate(1deg);
box-shadow:
0 20px 50px rgba(0,82,255,0.8),
0 30px 80px rgba(0,82,255,0.6),
0 0 120px rgba(0,82,255,0.5),
0 0 0 15px rgba(0,82,255,0.2);
}
60% {
transform: scale(1.15) translateY(-10px) rotate(-0.5deg);
box-shadow:
0 15px 40px rgba(0,82,255,0.7),
0 25px 70px rgba(0,82,255,0.5),
0 0 100px rgba(0,82,255,0.4);
}
80% {
transform: scale(1.05) translateY(-5px) rotate(0.5deg);
box-shadow:
0 8px 25px rgba(0,82,255,0.5),
0 15px 50px rgba(0,82,255,0.4);
}
100% {
transform: scale(1) translateY(0) rotate(0deg);
box-shadow:
0 4px 15px rgba(0,82,255,0.4),
0 8px 30px rgba(0,82,255,0.3);
}
}
/* Shine animation */
@keyframes shine {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* Enhanced hover state for super button */
.coinbase-super-button:hover {
transform: translateY(-3px) scale(1.08) !important;
box-shadow:
0 15px 40px rgba(0,82,255,0.6),
0 25px 70px rgba(0,82,255,0.4),
0 0 100px rgba(0,82,255,0.3),
inset 0 1px 0 rgba(255,255,255,0.5) !important;
background: linear-gradient(135deg, #1652F0 0%, #0052FF 50%, #0047E0 100%) !important;
animation: none !important;
}
/* Active state for super button */
.coinbase-super-button:active {
transform: translateY(-1px) scale(1.03) !important;
}
/* Additional floating effect on focus */
.coinbase-super-button:focus {
outline: none;
box-shadow:
0 15px 40px rgba(0,82,255,0.7),
0 25px 70px rgba(0,82,255,0.5),
0 0 120px rgba(0,82,255,0.4),
0 0 0 4px rgba(0,82,255,0.2),
inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
/* Coinbase Super Button Styles */
.coinbase-super-button {
background: linear-gradient(135deg, #0052FF 0%, #1652F0 50%, #0047E0 100%) !important;
color: white !important;
font-size: 1.5rem !important;
font-weight: 900 !important;
padding: 1.25rem 2rem !important;
border: 3px solid transparent !important;
border-radius: 16px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
position: relative !important;
overflow: hidden !important;
animation: pulseGlow 3s ease-in-out infinite !important;
transform-origin: center !important;
display: inline-block !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
.coinbase-super-button .button-shine {
position: absolute;
top: -50%;
left: -100%;
width: 200%;
height: 200%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.3),
transparent
);
animation: shine 3s ease-in-out infinite;
pointer-events: none;
}
/* Mobile responsiveness for super button */
@media (max-width: 768px) {
.coinbase-super-button {
font-size: 1.25rem !important;
padding: 1rem 1.5rem !important;
}
}
/* ========================================
START YOUR JOURNEY SUPER BUTTON
======================================== */
/* Journey Super Button Styles - EXTREME WIGGLE */
.journey-super-button {
background: linear-gradient(135deg, #F7931A 0%, #FF9500 50%, #F7931A 100%) !important;
color: white !important;
font-size: 1.75rem !important;
font-weight: 900 !important;
padding: 1.5rem 3rem !important;
border: 3px solid transparent !important;
border-radius: 20px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
position: relative !important;
overflow: hidden !important;
animation: journeyWiggle 1.5s ease-in-out infinite !important;
transform-origin: center !important;
display: inline-block !important;
text-decoration: none !important;
box-sizing: border-box !important;
margin: 2rem auto !important;
box-shadow:
0 10px 30px rgba(247,147,26,0.5),
0 20px 60px rgba(247,147,26,0.3),
inset 0 2px 0 rgba(255,255,255,0.4) !important;
}
/* Journey button shine effect */
.journey-super-button .button-shine {
position: absolute;
top: -50%;
left: -100%;
width: 200%;
height: 200%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.4),
transparent
);
animation: journeyShine 2.5s ease-in-out infinite;
pointer-events: none;
}
/* Journey Wiggle animation - EXTREME WIGGLE EFFECT */
@keyframes journeyWiggle {
0% {
transform: scale(1) translateY(0) rotate(0deg);
box-shadow:
0 4px 15px rgba(247,147,26,0.4),
0 8px 30px rgba(247,147,26,0.3);
}
10% {
transform: scale(1.05) translateY(-4px) rotate(-5deg);
box-shadow:
0 10px 25px rgba(247,147,26,0.5),
0 15px 40px rgba(247,147,26,0.4);
}
20% {
transform: scale(1.15) translateY(-10px) rotate(5deg);
box-shadow:
0 20px 40px rgba(247,147,26,0.6),
0 30px 60px rgba(247,147,26,0.5),
0 0 100px rgba(247,147,26,0.3);
}
30% {
transform: scale(1.2) translateY(-12px) rotate(-5deg);
box-shadow:
0 30px 70px rgba(247,147,26,0.8),
0 40px 100px rgba(247,147,26,0.6),
0 0 150px rgba(247,147,26,0.5),
0 0 0 30px rgba(247,147,26,0.2);
}
40% {
transform: scale(1.15) translateY(-10px) rotate(5deg);
box-shadow:
0 25px 60px rgba(247,147,26,0.7),
0 35px 85px rgba(247,147,26,0.5);
}
50% {
transform: scale(1.1) translateY(-8px) rotate(-5deg);
box-shadow:
0 20px 50px rgba(247,147,26,0.6),
0 30px 70px rgba(247,147,26,0.4);
}
60% {
transform: scale(1.08) translateY(-6px) rotate(4deg);
box-shadow:
0 15px 40px rgba(247,147,26,0.5),
0 25px 60px rgba(247,147,26,0.4);
}
70% {
transform: scale(1.05) translateY(-4px) rotate(-3deg);
box-shadow:
0 10px 30px rgba(247,147,26,0.4),
0 20px 50px rgba(247,147,26,0.3);
}
80% {
transform: scale(1.03) translateY(-2px) rotate(2deg);
box-shadow:
0 8px 25px rgba(247,147,26,0.4),
0 15px 40px rgba(247,147,26,0.3);
}
90% {
transform: scale(1.01) translateY(-1px) rotate(-1deg);
box-shadow:
0 6px 20px rgba(247,147,26,0.4),
0 10px 35px rgba(247,147,26,0.3);
}
100% {
transform: scale(1) translateY(0) rotate(0deg);
box-shadow:
0 4px 15px rgba(247,147,26,0.4),
0 8px 30px rgba(247,147,26,0.3);
}
}
/* Journey Shine animation */
@keyframes journeyShine {
0% {
left: -100%;
}
50%, 100% {
left: 100%;
}
}
/* Enhanced hover state for journey button */
.journey-super-button:hover {
transform: translateY(-5px) scale(1.15) !important;
box-shadow:
0 20px 50px rgba(247,147,26,0.7),
0 30px 80px rgba(247,147,26,0.5),
0 0 150px rgba(247,147,26,0.4),
inset 0 2px 0 rgba(255,255,255,0.6) !important;
background: linear-gradient(135deg, #FFB347 0%, #F7931A 50%, #FF9500 100%) !important;
animation: none !important;
}
/* Active state for journey button */
.journey-super-button:active {
transform: translateY(-2px) scale(1.08) !important;
}
/* Focus state for journey button */
.journey-super-button:focus {
outline: none;
box-shadow:
0 20px 50px rgba(247,147,26,0.8),
0 30px 80px rgba(247,147,26,0.6),
0 0 180px rgba(247,147,26,0.5),
0 0 0 5px rgba(247,147,26,0.3),
inset 0 2px 0 rgba(255,255,255,0.6) !important;
}
/* Mobile responsiveness for journey button */
@media (max-width: 768px) {
.journey-super-button {
font-size: 1.35rem !important;
padding: 1.25rem 2rem !important;
}
}
/* Calculate Story Button Animation */
.calculate-story-btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
animation: calculateWiggle 4s ease-in-out infinite;
transform-origin: center;
box-shadow: 0 4px 15px rgba(247, 147, 26, 0.3);
}
.calculate-story-btn:hover {
animation: calculateWiggleHover 0.8s ease-in-out infinite;
transform: scale(1.05);
box-shadow: 0 8px 30px rgba(247, 147, 26, 0.5);
}
.calculate-story-btn .btn-text {
position: relative;
z-index: 2;
}
/* Shine animation disabled to prevent white flash on mobile
.calculate-story-btn .btn-shine {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.3) 50%,
transparent 70%
);
transform: rotate(45deg) translateX(-200%);
animation: btnShine 3s ease-in-out infinite;
} */
@keyframes calculateWiggle {
0%, 100% {
transform: rotate(0deg) scale(1);
box-shadow: 0 4px 15px rgba(247, 147, 26, 0.3);
}
15% {
transform: rotate(-2deg) scale(1.02);
box-shadow: 0 6px 20px rgba(247, 147, 26, 0.4);
}
30% {
transform: rotate(2deg) scale(1.03);
box-shadow: 0 8px 25px rgba(247, 147, 26, 0.5);
}
45% {
transform: rotate(-1deg) scale(1.02);
box-shadow: 0 6px 20px rgba(247, 147, 26, 0.4);
}
60% {
transform: rotate(1deg) scale(1.01);
box-shadow: 0 5px 18px rgba(247, 147, 26, 0.35);
}
}
@keyframes calculateWiggleHover {
0%, 100% {
transform: rotate(0deg) scale(1.05);
box-shadow: 0 8px 30px rgba(247, 147, 26, 0.5);
}
25% {
transform: rotate(-5deg) scale(1.08);
box-shadow: 0 12px 40px rgba(247, 147, 26, 0.6);
}
50% {
transform: rotate(5deg) scale(1.1);
box-shadow: 0 15px 50px rgba(247, 147, 26, 0.7);
}
75% {
transform: rotate(-3deg) scale(1.08);
box-shadow: 0 12px 40px rgba(247, 147, 26, 0.6);
}
}
/* Shine animation disabled to prevent white flash on mobile
@keyframes btnShine {
0% {
transform: rotate(45deg) translateX(-200%);
}
50%, 100% {
transform: rotate(45deg) translateX(200%);
}
} */
/* ========================================
RESPONSIVE DESIGN ENHANCEMENTS
======================================== */
/* 1. Fluid Typography System */
.hero-section h1 {
font-size: clamp(2rem, 5vw + 1rem, 4.5rem) !important;
line-height: 1.1;
}
.hero-section .lead {
font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem) !important;
}
.hero-section p {
font-size: clamp(0.875rem, 1.5vw + 0.25rem, 1.125rem) !important;
}
h2 {
font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem) !important;
}
h3 {
font-size: clamp(1.25rem, 2.5vw + 0.25rem, 2rem) !important;
}
h4 {
font-size: clamp(1.1rem, 2vw + 0.2rem, 1.5rem) !important;
}
p, .text-body {
font-size: clamp(0.875rem, 1.5vw + 0.25rem, 1.125rem) !important;
}
small, .small {
font-size: clamp(0.75rem, 1vw + 0.2rem, 0.9rem) !important;
}
/* 2. Enhanced Container System */
.container-responsive {
width: 100%;
padding: 0 1rem;
margin: 0 auto;
}
/* Mobile First Approach */
@media (min-width: 576px) {
.container-responsive {
max-width: 540px;
padding: 0 1.25rem;
}
}
/* Tablet (768px+) */
@media (min-width: 768px) {
.container-responsive {
max-width: 750px;
padding: 0 1.5rem;
}
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
.container-responsive {
max-width: 980px;
}
}
/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
.container-responsive {
max-width: 1200px;
}
}
/* Ultra-wide (1920px+) */
@media (min-width: 1920px) {
.container-responsive {
max-width: 1400px;
}
}
/* 4K Displays (2560px+) */
@media (min-width: 2560px) {
.container-responsive {
max-width: 1800px;
padding: 0 2rem;
}
}
/* 3. Responsive Bitcoin Price Widget */
.bitcoin-price-hero .price-card {
max-width: clamp(280px, 80vw, 340px);
padding: clamp(1rem, 3vw, 1.5rem);
}
.price-value {
font-size: clamp(1.5rem, 4vw, 2rem) !important;
}
.market-cap-info {
font-size: clamp(0.9rem, 1.5vw, 1.1rem);
}
.price-update {
font-size: clamp(0.7rem, 1vw, 0.8rem);
}
/* 4. Responsive Form Elements */
.expense-grid {
display: grid;
gap: clamp(0.5rem, 2vw, 1rem);
grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
}
@media (min-width: 576px) {
.expense-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.expense-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.expense-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Amount slider container responsive */
.amount-slider-container {
padding: clamp(1rem, 3vw, 2rem);
}
/* Responsive buttons */
.calculate-story-btn {
font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
padding: clamp(0.875rem, 2vw, 1.25rem) clamp(1.5rem, 4vw, 3rem) !important;
min-height: clamp(60px, 10vw, 80px);
}
.btn-primary, .btn-secondary {
font-size: clamp(0.875rem, 1.5vw, 1rem);
padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
}
/* 5. Viewport-Based Spacing */
.hero-section {
padding: clamp(3rem, 8vh, 6rem) 0;
}
.section-spacing {
margin: clamp(2rem, 6vh, 4rem) 0;
}
.mb-3 {
margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
}
.mb-4 {
margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
}
.mb-5 {
margin-bottom: clamp(1.5rem, 4vw, 3rem) !important;
}
.py-3 {
padding-top: clamp(0.75rem, 2vw, 1rem) !important;
padding-bottom: clamp(0.75rem, 2vw, 1rem) !important;
}
.py-4 {
padding-top: clamp(1rem, 3vw, 1.5rem) !important;
padding-bottom: clamp(1rem, 3vw, 1.5rem) !important;
}
.py-5 {
padding-top: clamp(1.5rem, 4vw, 3rem) !important;
padding-bottom: clamp(1.5rem, 4vw, 3rem) !important;
}
/* 6. Enhanced Mobile Navigation */
.mobile-progress-bar {
position: sticky;
top: 0;
z-index: 1000;
background: linear-gradient(to bottom,
rgba(26, 26, 26, 0.98),
rgba(26, 26, 26, 0.9));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 1rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
/* 7. Three-Step Guide Responsive */
.three-step-guide {
font-size: clamp(0.7rem, 1.2vw, 0.875rem);
}
.three-step-guide .step-icon {
font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
}
.three-step-guide .step-item {
min-height: clamp(100px, 15vw, 120px);
}
/* 8. Teaser Card Responsive */
.teaser-card {
padding: clamp(0.75rem, 2vw, 1rem);
font-size: clamp(0.875rem, 1.5vw, 1rem);
}
.teaser-card .fw-bold {
font-size: clamp(1.1rem, 2.5vw, 1.3rem) !important;
}
/* 9. Touch Target Optimization */
@media (pointer: coarse) {
/* Ensure all interactive elements are at least 44x44px on touch devices */
.btn,
.expense-card,
.amount-chip,
input[type="radio"] + label,
input[type="checkbox"] + label,
select,
[role="button"] {
min-height: 44px;
min-width: 44px;
}
/* Add extra padding for better touch targets */
.expense-card {
padding: clamp(0.875rem, 2vw, 1.25rem);
}
/* Increase tap area for small buttons */
.btn-sm {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
}
/* 10. Focus Visible for Accessibility */
*:focus-visible {
outline: 3px solid var(--primary-color);
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--primary-color);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(247, 147, 26, 0.2);
}
/* 11. Stories Grid (Future Implementation) */
.stories-grid {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
@media (min-width: 768px) {
.stories-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.stories-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1920px) {
.stories-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* 12. Trust Features Section */
.trust-features {
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 3vw, 2rem);
justify-content: center;
margin: clamp(2rem, 4vw, 3rem) 0;
}
.trust-item {
flex: 1 1 clamp(250px, 30%, 350px);
text-align: center;
padding: clamp(1rem, 2vw, 1.5rem);
}
/* 13. Responsive Tables */
@media (max-width: 768px) {
table {
font-size: 0.875rem;
}
.table-responsive {
-webkit-overflow-scrolling: touch;
}
}
/* 14. Landscape Mode Optimizations */
@media (orientation: landscape) and (max-height: 600px) {
.hero-section {
padding: 2rem 0;
}
.hero-section h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
}
.calculate-story-btn {
padding: 0.75rem 2rem !important;
min-height: 50px;
}
}
/* 15. High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* Use thinner borders for sharper appearance */
.card {
border-width: 0.5px;
}
.expense-card {
border-width: 1px;
}
}
/* 16. Print Styles */
@media print {
.navbar,
.mobile-progress-bar,
.calculate-story-btn,
footer {
display: none !important;
}
body {
background: white;
color: black;
}
.hero-section h1 {
color: black !important;
}
}
/* 17. Smooth Scrolling Enhancement */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
/* Add smooth transitions for responsive changes */
.container-responsive,
.expense-grid,
.stories-grid,
.trust-features {
transition: all 0.3s ease;
}
}
/* 18. Dark Mode Support (respects system preference) */
@media (prefers-color-scheme: dark) {
/* Already using dark theme by default */
}
/* 19. Loading State Animations */
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.skeleton-bar {
animation: shimmer 1.5s infinite;
}
/* 20. Responsive Example Tabs */
.example-tabs {
font-size: clamp(0.75rem, 1.5vw, 0.9rem);
}
.tab-button {
padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
font-size: clamp(0.75rem, 1.5vw, 0.875rem);
}