/* ============================================================================ HIM (Hey-It's-Me) - Custom Styles https://meowmart.mailchimp.com/ DESIGN PHILOSOPHY: - Bold borders (3-4px instead of 1px) make everything clearer - Hard shadows (offset with no blur) create playful, confident feel - Warm colors (cream, peach, coral) make it inviting for dating advice HOW THIS FILE IS ORGANIZED: 1. Variables (our color palette and sizes) 2. Base styles (body, headings) 3. Navigation 4. Buttons 5. Forms 6. Cards 7. Dating tips specific styles 8. Utility classes (helpers you can use anywhere) ============================================================================ */ /* ============================================================================ SECTION 1: VARIABLES (Our Design System) WHY USE VARIABLES? - Change colors in one place, updates everywhere - Makes your code DRY (Don't Repeat Yourself) - Easy to experiment with different looks HOW TO USE: Instead of: background-color: #FFF5E6; You write: background-color: var(--him-cream); ============================================================================ */ :root, [data-theme="default"] { /* COLORS - Warm and inviting palette */ --him-cream: #FFF5E6; /* Soft background color (like warm paper) */ --him-peach: #FFD6BA; /* Secondary backgrounds (like a soft highlighter) */ --him-coral: #FF9B9B; /* Primary action color (for buttons, important stuff) */ --him-navy: #2C3E50; /* Dark color for text and borders */ --him-dark: #1A1A2E; /* Even darker text when we need high contrast */ --color-grey-200: #A7C0B6; --color-grey-500: #69665E; --color-grey-800: #27251F; --color-red-500: #D62029; --color-yellow-500: #E6B156; --color-purple-500: #6C55A4; /* BORDER SIZES - Thicker than normal for bold look */ --border-medium: 3px; /* Most borders use this */ --border-thick: 4px; /* Extra important elements like buttons */ /* SHADOWS - Two types: soft (with blur) and hard (no blur, offset) */ --shadow-soft: 0 8px 25px rgba(0, 0, 0, 0.12); /* Modern depth shadow */ --shadow-hard: 8px 8px 0 rgba(44, 62, 80, 0.3); /* Playful offset shadow */ --shadow-hard-hover: 12px 12px 0 rgba(44, 62, 80, 0.4); /* Bigger on hover */ /* BORDER RADIUS - How rounded corners are */ --radius-medium: 18px; /* Most elements */ --radius-large: 24px; /* Bigger elements like cards */ --radius-round: 999px; /* Fully rounded (pills, badges) */ } /* ============================================================================ SECTION 2: BASE STYLES (Applies to whole page) ============================================================================ */ html { height: 100%; } /* The element is the whole page background */ body { height:100%; background-color: var(--him-cream); /* Warm cream instead of white */ color: var(--him-dark); /* Dark text for readability */ letter-spacing: 0.01em; /* Tiny bit of space between letters */ display: flex; flex-direction: column; } /* All headings (h1, h2, h3, etc.) and Bootstrap display classes */ h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-weight: 800; /* Extra bold! (normal is 400, bold is 700) */ color: var(--him-navy); /* Navy color for headings */ letter-spacing: 0.02em; /* Slight spacing for readability */ } /* Lead paragraph styling (bigger intro text) */ .lead { font-weight: 600; /* Semibold */ color: var(--him-navy); } main { position: relative; height: 100%; display: flex; align-items: center; } main .container:first-child { margin-top: -3rem; } /* ============================================================================ SECTION 3: NAVIGATION BAR WHY THESE STYLES? - Border on bottom creates visual separation from content - Shadow adds subtle depth - Bold brand text with uppercase grabs attention ============================================================================ */ .navbar { border-bottom: var(--border-medium) solid var(--him-navy); /* 3px line at bottom */ background-color: white; /* Clean white background */ } .navbar-brand { font-size: 1.5rem; /* Bigger than normal text */ font-weight: 800; /* Extra bold */ text-transform: uppercase; /* ALL CAPS */ letter-spacing: 0.05em; /* Spaced out letters */ } /* ============================================================================ SECTION 4: BUTTONS HOW BUTTONS WORK HERE: 1. Default state: Has border and shadow 2. Hover: Button "lifts up" by moving and growing shadow 3. Click: Button "presses down" by moving opposite direction This creates a satisfying physical feeling! ============================================================================ */ .btn { /* APPEARANCE */ border: var(--border-thick) solid var(--him-navy); /* Thick 4px border */ border-radius: var(--radius-medium); /* Rounded corners (18px) */ padding: 0.75rem 2rem; /* Space inside button */ font-weight: 700; /* Bold text */ text-transform: uppercase; /* ALL CAPS */ letter-spacing: 0.1em; /* Spaced letters */ /* SHADOW - Creates depth */ box-shadow: 6px 6px 0 rgba(44, 62, 80, 0.3); /* ANIMATION - Makes transitions smooth */ /* cubic-bezier creates a nice easing curve (starts slow, speeds up, slows down) */ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* When you hover over a button */ .btn:hover { /* Move button up and left (-3px each direction) */ transform: translate(-3px, -3px); /* Make shadow bigger (button appears to lift higher) */ box-shadow: 9px 9px 0 rgba(44, 62, 80, 0.4); } /* When you click a button */ .btn:active { /* Move button down and right (opposite of hover) */ transform: translate(2px, 2px); /* Make shadow smaller (button presses down) */ box-shadow: 2px 2px 0 rgba(44, 62, 80, 0.3); } /* Large buttons (for important actions) */ .btn-lg { padding: 1rem 2.5rem; /* More padding = bigger button */ font-size: 1.1rem; /* Bigger text */ border-radius: var(--radius-large); /* More rounded */ box-shadow: 8px 8px 0 rgba(44, 62, 80, 0.3); /* Bigger starting shadow */ } /* Primary button style (main action buttons) */ .btn-primary { background-color: var(--him-coral); /* Coral background */ color: white; /* White text */ font-weight: 800; /* Extra bold */ } .btn-primary:hover { background-color: #FF8080; /* Slightly lighter coral on hover */ } /* Secondary button style (less important actions) */ .btn-secondary { background-color: var(--him-cream); /* Cream background */ color: var(--him-navy); /* Navy text */ } .btn-secondary:hover { background-color: var(--him-peach); /* Peach background on hover */ } /* ============================================================================ SECTION 5: FORMS (Text inputs, dropdowns, labels) FORM DESIGN PRINCIPLES: - Labels are uppercase and bold to clearly identify what each field is - Inputs have thick borders so you can see them clearly - Focus state (when you click in a field) has special styling - Cream background makes inputs feel warm and inviting ============================================================================ */ /* Form labels (the text above input fields) */ .form-label { font-weight: 700; /* Bold */ color: var(--him-navy); /* Navy color */ text-transform: uppercase; /* ALL CAPS */ letter-spacing: 0.1em; /* Spaced letters */ font-size: 0.85rem; /* Slightly smaller than normal */ margin-bottom: 0.5rem; /* Space below label */ } /* Text inputs and dropdown selects */ .form-control, .form-select { /* APPEARANCE */ border: var(--border-medium) solid var(--him-navy); /* 3px border */ border-radius: var(--radius-medium); /* Rounded corners */ padding: 1rem 1.25rem; /* Space inside */ background-color: var(--him-cream); /* Cream background */ color: var(--him-dark); /* Dark text */ font-weight: 600; /* Semibold text */ /* ANIMATION */ transition: all 0.2s ease; /* Smooth transitions */ } /* When you click into a form field (focus state) */ .form-control:focus, .form-select:focus { border-color: var(--him-coral); /* Change border to coral */ border-width: var(--border-thick); /* Make border thicker (4px) */ /* Add a glow effect around the field */ /* rgba(255, 155, 155, 0.2) = coral color at 20% opacity */ box-shadow: 0 0 0 4px rgba(255, 155, 155, 0.2); /* Lift the field up slightly */ transform: translateY(-2px); } /* Large form controls */ .form-control-lg { padding: 1.25rem 1.5rem; /* More padding */ font-size: 1.1rem; /* Bigger text */ border-radius: var(--radius-large); /* More rounded */ } /* ============================================================================ SECTION 6: CARDS WHAT ARE CARDS? Cards are containers that group related content together (like a physical card) WHY THIS DESIGN? - Thick border makes card boundaries super clear - Hard shadow makes cards look like they're sitting on top of page - Hover effect makes cards interactive and fun ============================================================================ */ .photo-stack-container { position: relative; display: flex; align-items: center; justify-content: center; min-height: 50vh; margin-top: -5.5rem; } .photo-stack { position: relative; width: 240px; height: 320px; margin: 0 4rem; } .natural-edge { filter: url(#roughen-edge); max-width: 100%; height: auto; display: block; } .squircle2{ background: linear-gradient(#ff4f88,#d80d52); /* 200×200 squircle-ish path (n≈4 superellipse) */ } .photo { position: absolute; inset: 0; transition: all 0.1s ease-out; cursor: pointer; } .photo-frame { width: 100%; height: 100%; background: white; padding: 1rem; border-radius: 6px; border: 2px var(--color-grey-800) solid; filter: url(#roughen-edge); /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); */ } .photo-image { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; border-radius: 10px; /* Natural rough edge effect via SVG filter */ /* filter: url(#photo-roughen); */ } .nav-button { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); color: white; border: none; padding: 0.75rem; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .nav-button:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-50%) scale(1.1); } .nav-button.prev { left: 0; } .nav-button.next { right: 0; } .photo-counter { position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; font-weight: 500; } .dot-indicators { position: absolute; bottom: -4rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; } .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.4); border: none; cursor: pointer; transition: all 0.2s ease; } .dot:hover { background: rgba(255, 255, 255, 0.6); } .dot.active { background: white; transform: scale(1.25); } .get-tips-button { position: absolute; /* bottom: 0rem; */ left: 50%; transform: translateX(-50%); background: linear-gradient(45deg, #FD8D00 0%, #FD6700 25%, #FC3E00 50%, #FD6700 75%, #FD8D00 100%); background-size: 200% 200%; /* animation: gradientMove 50s ease-in-out infinite; */ border: 1px solid #DC2A00; color: white; padding: 0.75rem 2rem; border-radius: 2rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 150ms ease; box-shadow: 0 4px 15px rgba(252, 62, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } @keyframes gradientMove { 0% { background-position: 0% 20%; } 25% { background-position: 80% 60%; } 50% { background-position: 20% 80%; } 75% { background-position: 70% 30%; } 100% { background-position: 0% 20%; } } .get-tips-button:active { transform: translateX(-50%) scale(0.97); } /* Chevron icons */ .chevron { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .card { border: var(--border-thick) solid var(--him-navy); /* 4px border */ border-radius: var(--radius-large); /* Rounded corners (24px) */ box-shadow: var(--shadow-hard); /* 8px offset shadow */ background-color: white; /* White background */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth animation */ } /* When you hover over a card */ .card:hover { /* Move card up and left (makes it look like it's lifting) */ transform: translate(-2px, -2px); /* Make shadow bigger (card lifts higher off page) */ box-shadow: var(--shadow-hard-hover); /* 12px offset shadow */ } /* Card header (top section of card) */ .card-header { background: var(--him-peach); /* Peach background */ border-bottom: var(--border-medium) solid var(--him-navy); /* Border below */ padding: 1.25rem 1.5rem; /* Space inside */ font-weight: 700; /* Bold text */ text-transform: uppercase; /* ALL CAPS */ letter-spacing: 0.1em; /* Spaced letters */ } /* Card body (main content area) */ .card-body { background: white; /* White background */ } /* ============================================================================ SECTION 7: DATING TIPS (Specific to our dating advice feature) ============================================================================ */ /* Container for all dating tips */ .dating-guide { /* Gradient background (smooth transition from peach to cream) */ background: linear-gradient(135deg, var(--him-peach) 0%, var(--him-cream) 100%); border: var(--border-thick) solid var(--him-navy); border-radius: var(--radius-large); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18); /* Medium shadow for depth */ } /* Individual tip card */ .tip-card { background: white; border: var(--border-medium) solid var(--him-navy); border-radius: var(--radius-medium); padding: 2rem; /* Lots of space inside */ position: relative; /* Needed for number badge positioning */ box-shadow: 4px 4px 0 rgba(44, 62, 80, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .tip-card:hover { transform: translate(-4px, -4px); /* Lift more than regular cards */ box-shadow: 8px 8px 0 rgba(44, 62, 80, 0.3); } /* The number badge on each tip (1, 2, 3, etc.) */ .tip-number { /* POSITIONING - "absolute" takes it out of normal flow */ position: absolute; /* Position relative to .tip-card parent */ top: -15px; /* Move up 15px (half outside the card) */ left: 25px; /* 25px from left edge */ /* APPEARANCE */ background: var(--him-coral); color: white; width: 45px; height: 45px; border-radius: 50%; /* Makes it a perfect circle */ border: var(--border-medium) solid var(--him-navy); box-shadow: 3px 3px 0 rgba(44, 62, 80, 0.4); /* CENTER THE NUMBER - flexbox is perfect for centering */ display: flex; /* Turn on flexbox */ align-items: center; /* Center vertically */ justify-content: center; /* Center horizontally */ /* TEXT */ font-weight: 800; font-size: 1.2rem; } /* The actual tip text */ .tip-content { margin-top: 15px; /* Space above (makes room for number badge) */ line-height: 1.7; /* Space between lines (makes reading easier) */ color: var(--him-dark); } /* Optional tip title */ .tip-title { font-weight: 700; color: var(--him-navy); font-size: 1.1rem; margin-bottom: 1rem; } /* ============================================================================ SECTION 8: PROGRESS BAR (Loading animation) ============================================================================ */ .progress { background-color: var(--him-peach); /* Peach background */ border: var(--border-medium) solid var(--him-navy); border-radius: var(--radius-round); /* Fully rounded ends */ height: 40px; /* Taller than default */ box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15); /* Inner shadow for depth */ } /* The moving part of the progress bar */ .progress-bar { /* Diagonal stripes using repeating gradient */ /* 45deg = diagonal, alternates coral and lighter coral every 10px */ background: repeating-linear-gradient( 45deg, var(--him-coral), var(--him-coral) 10px, #FF8080 10px, #FF8080 20px ); border-radius: var(--radius-round); font-weight: 700; letter-spacing: 0.05em; } /* ============================================================================ SECTION 9: ALERTS (Success, error, info messages) ============================================================================ */ .alert { border: var(--border-medium) solid var(--him-navy); border-radius: var(--radius-medium); font-weight: 600; box-shadow: 4px 4px 0 rgba(44, 62, 80, 0.2); } /* Info alert (blue) */ .alert-info { background-color: #D4E9FF; /* Light blue */ color: var(--him-dark); } /* Error alert (red) */ .alert-danger { background-color: #FFD4D4; /* Light red */ color: var(--him-dark); } /* Success alert (green) */ .alert-success { background-color: #D4FFD4; /* Light green */ color: var(--him-dark); } /* ============================================================================ SECTION 10: BADGES (Small labels) ============================================================================ */ .badge { border: 2px solid var(--him-navy); border-radius: 12px; padding: 0.5rem 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 2px 2px 0 rgba(44, 62, 80, 0.2); } /* ============================================================================ SECTION 11: UTILITY CLASSES (Helpers you can use anywhere) HOW TO USE UTILITIES: Add these classes to any HTML element to quickly apply styles Example:

Content

============================================================================ */ /* Shadow utilities */ .shadow-hard { box-shadow: 8px 8px 0 rgba(44, 62, 80, 0.3) !important; } .shadow-soft { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important; } /* Border utilities */ .border-thick { border: 4px solid var(--him-navy) !important; } .border-medium { border: 3px solid var(--him-navy) !important; } /* Background color utilities */ .bg-cream { background-color: var(--him-cream) !important; } .bg-peach { background-color: var(--him-peach) !important; } .bg-coral { background-color: var(--him-coral) !important; } /* Text color utilities */ .text-navy { color: var(--him-navy) !important; } .text-bold { font-weight: 800 !important; } /* ============================================================================ SECTION 12: RESPONSIVE DESIGN (Makes it work on phones) @media queries apply styles only when screen is certain size max-width: 768px = phones and small tablets ============================================================================ */ @media (max-width: 768px) { /* Smaller headings on phones (don't take up whole screen) */ .display-4 { font-size: 2.5rem; } .display-5 { font-size: 2rem; } /* Less padding on cards (more content visible) */ .tip-card { padding: 1rem; } /* Adjust card body padding */ .card-body { padding: 2rem 1.5rem !important; } } /* ============================================================================ SECTION 13: PAGE TRANSITIONS (Smooth fade when changing pages) Uses Swup library to make page changes smooth instead of instant ============================================================================ */ .transition-fade { transition: opacity 0.4s ease-in-out; /* Fade in/out over 0.4 seconds */ opacity: 1; /* Fully visible by default */ } /* When leaving a page */ html.is-animating .transition-fade { opacity: 0; /* Fade to invisible */ } /* During page change */ html.is-changing .transition-fade { transition: opacity 0.4s ease-in-out; } /* When loading new page */ html.is-rendering .transition-fade { opacity: 0; /* Start invisible, then fade in */ }