/* ============================================================ BIKFAM STICKER SHOP - Main Stylesheet ============================================================ This stylesheet controls ALL the visual styling for the site. It uses a graffiti/street-art aesthetic with a black & red color scheme to match the BIKFAM / CJBIK brand. TABLE OF CONTENTS: 1. CSS Custom Properties (Variables) 2. Reset & Base Styles 3. Typography & Fonts 4. Layout Utilities 5. Header & Navigation 6. Buttons 7. Cards (Product Cards) 8. Hero Section 9. Pages - Home 10. Pages - Shop 11. Pages - Builder 12. Pages - Cart 13. Footer 14. Responsive (Mobile) Styles 15. Animations ============================================================ */ /* ============================================================ 1. CSS CUSTOM PROPERTIES (Variables) ============================================================ These are like design tokens - change them here and it updates everywhere. Think of them as the "brand colors" you can tweak. --* means it's a variable, and var(--varname) uses it. */ :root { /* --- COLORS --- */ --color-bg: #0a0a0a; /* Near-black background */ --color-bg-alt: #111111; /* Slightly lighter black for cards */ --color-bg-darker: #050505; /* For footer / dark sections */ --color-red-primary: #d90429; /* Main red - bold, aggressive */ --color-red-bright: #ef233c; /* Brighter red for hover effects */ --color-red-dark: #8a0319; /* Darker red for borders */ --color-red-glow: rgba(217, 4, 41, 0.3); /* Red glow effect */ --color-white: #ffffff; --color-text: #e0e0e0; /* Main body text */ --color-text-muted: #888888; /* Less important text */ --color-accent-yellow: #ffb703; /* Yellow accent for contrast */ /* --- FONTS --- */ /* We load these from Google Fonts in the of each page */ --font-heading: 'Bangers', cursive; /* Bold, comic/graffiti style for headings */ --font-subheading: 'Permanent Marker', cursive; /* Handwritten marker style for subheadings */ --font-body: 'Segoe UI', 'Roboto', Arial, sans-serif; /* Clean readable body text */ /* --- SPACING --- */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 2rem; /* 32px */ --space-xl: 4rem; /* 64px */ /* --- SIZES --- */ --max-width: 1200px; /* Max content width on large screens */ --header-height: 70px; /* --- BORDERS --- */ --border-red: 2px solid var(--color-red-primary); --border-radius: 4px; } /* ============================================================ 2. RESET & BASE STYLES ============================================================ This smooths out browser differences so everything looks consistent. Browsers have default styles that vary - this resets them to a clean baseline. */ *, *::before, *::after { box-sizing: border-box; /* Makes padding/border count inside element width */ margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Smooth scrolling when clicking anchor links */ } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } /* Links - base style */ a { color: var(--color-red-primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-red-bright); } /* Images - make them responsive by default */ img { max-width: 100%; height: auto; display: block; } /* Lists without bullets by default (we add them back when needed) */ ul { list-style: none; } /* Selection color - when you highlight text with your mouse */ ::selection { background-color: var(--color-red-primary); color: var(--color-white); } /* ============================================================ 3. TYPOGRAPHY & FONTS ============================================================ */ /* Headings use the graffiti/comic font for impact */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; /* Bangers looks best at normal weight */ letter-spacing: 0.05em; /* Slight spacing for readability */ color: var(--color-white); text-transform: uppercase; /* Graffiti style - all caps */ line-height: 1.1; } h1 { font-size: 3.5rem; margin-bottom: var(--space-md); } h2 { font-size: 2.5rem; margin-bottom: var(--space-md); } h3 { font-size: 1.8rem; margin-bottom: var(--space-sm); } h4 { font-size: 1.3rem; margin-bottom: var(--space-sm); } /* Subheadings use the marker/handwriting font */ .subheading { font-family: var(--font-subheading); font-size: 1.2rem; color: var(--color-red-primary); margin-bottom: var(--space-lg); } /* Body text styling */ p { margin-bottom: var(--space-md); font-size: 1rem; } /* Small / muted text */ .text-muted { color: var(--color-text-muted); font-size: 0.875rem; } /* Red highlight text */ .text-red { color: var(--color-red-primary); } /* Section headers - used for page section titles */ .section-title { text-align: center; font-size: 2.8rem; margin-bottom: var(--space-sm); position: relative; display: inline-block; } /* Decorative underline for section titles */ .section-title::after { content: ''; display: block; width: 60%; height: 4px; background: var(--color-red-primary); margin: var(--space-sm) auto 0; border-radius: 2px; } /* Center wrapper for section titles */ .section-header { text-align: center; margin-bottom: var(--space-xl); } /* ============================================================ 4. LAYOUT UTILITIES ============================================================ */ /* Main container - centers content and limits width */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; /* Centers the container */ padding: 0 var(--space-lg); } /* Main content area - pushes footer down using flexbox */ .main-content { flex: 1; padding-top: calc(var(--header-height) + var(--space-lg)); padding-bottom: var(--space-xl); } /* Grid helpers */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } /* Flex helpers */ .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } /* Section spacing */ .section { padding: var(--space-xl) 0; } /* ============================================================ 5. HEADER & NAVIGATION ============================================================ Fixed top navigation bar that stays visible when scrolling. Has the BIKFAM logo on the left, nav links in the middle, and a cart icon on the right. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; /* Stays above everything */ height: var(--header-height); background: rgba(10, 10, 10, 0.95); border-bottom: 2px solid var(--color-red-primary); backdrop-filter: blur(10px); /* Frosted glass effect */ } /* Inner header wrapper */ .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } /* Logo / site title */ .logo { font-family: var(--font-heading); font-size: 2rem; color: var(--color-white); text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.2s; } .logo:hover { color: var(--color-red-primary); } .logo .logo-red { color: var(--color-red-primary); } /* Navigation links */ .nav-links { display: flex; gap: var(--space-lg); align-items: center; } .nav-links a { font-family: var(--font-subheading); font-size: 1.1rem; color: var(--color-white); text-transform: uppercase; position: relative; padding: var(--space-xs) 0; transition: color 0.2s; } /* Red underline on hover - like a graffiti tag underline */ .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--color-red-primary); transition: width 0.3s ease; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a:hover { color: var(--color-red-primary); } /* Active page indicator */ .nav-links a.active { color: var(--color-red-primary); } /* Cart icon / link in header */ .cart-link { position: relative; display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-subheading); font-size: 1.1rem; color: var(--color-white); } .cart-link:hover { color: var(--color-red-primary); } /* The little number badge on the cart icon */ .cart-count { background: var(--color-red-primary); color: var(--color-white); font-size: 0.75rem; font-family: var(--font-body); font-weight: bold; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: -10px; right: -14px; } /* Mobile hamburger menu button - hidden on desktop */ .menu-toggle { display: none; background: none; border: none; color: var(--color-white); font-size: 1.8rem; cursor: pointer; } /* ============================================================ 6. BUTTONS ============================================================ Graffiti-style buttons with a bold, aggressive look. */ .btn { display: inline-block; font-family: var(--font-heading); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-sm) var(--space-lg); border: none; cursor: pointer; transition: all 0.3s ease; text-decoration: none; position: relative; overflow: hidden; } /* Primary red button - the main call-to-action */ .btn-primary { background: var(--color-red-primary); color: var(--color-white); border: 2px solid var(--color-red-primary); } .btn-primary:hover { background: var(--color-red-bright); border-color: var(--color-red-bright); transform: translateY(-2px); /* Lifts up slightly */ box-shadow: 0 4px 20px var(--color-red-glow); } /* Secondary / outline button - inverted look */ .btn-outline { background: transparent; color: var(--color-red-primary); border: 2px solid var(--color-red-primary); } .btn-outline:hover { background: var(--color-red-primary); color: var(--color-white); transform: translateY(-2px); box-shadow: 0 4px 20px var(--color-red-glow); } /* Disabled button state */ .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* Small button variant */ .btn-sm { font-size: 1rem; padding: var(--space-xs) var(--space-md); } /* Large button variant */ .btn-lg { font-size: 1.5rem; padding: var(--space-md) var(--space-xl); } /* ============================================================ 7. CARDS (Product Cards) ============================================================ Reusable card component for displaying products. */ .card { background: var(--color-bg-alt); border: 1px solid #222; border-radius: var(--border-radius); overflow: hidden; transition: all 0.3s ease; position: relative; } .card:hover { border-color: var(--color-red-primary); transform: translateY(-4px); box-shadow: 0 8px 30px var(--color-red-glow); } /* Card image area */ .card-image { width: 100%; aspect-ratio: 1; /* Makes it a perfect square */ background: var(--color-bg-darker); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .card-image img { width: 100%; height: 100%; object-fit: cover; /* Crops image to fit nicely */ } /* Placeholder content inside card images */ .card-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-heading), sans-serif; font-size: 1rem; color: #555; text-transform: uppercase; background: var(--color-bg-darker); border: 2px dashed #333; margin: 0; padding: 0; gap: 8px; } .card-placeholder .placeholder-icon { font-size: 2.5rem; line-height: 1; } .card-placeholder .placeholder-text { color: #444; letter-spacing: 0.1em; } /* Card body content */ .card-body { padding: var(--space-md); } .card-title { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-white); margin-bottom: var(--space-xs); text-transform: uppercase; } .card-description { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: var(--space-md); } .card-price { font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-red-primary); margin-bottom: var(--space-md); } /* Price placeholder style */ .price-placeholder { font-family: var(--font-subheading); font-size: 0.85rem; color: var(--color-text-muted); background: rgba(217, 4, 41, 0.1); border: 1px dashed var(--color-red-dark); padding: var(--space-xs) var(--space-sm); border-radius: var(--border-radius); display: inline-block; } .card-footer { padding: 0 var(--space-md) var(--space-md); } /* ============================================================ 8. HERO SECTION ============================================================ Big, bold hero section for the homepage. */ .hero { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; background: radial-gradient(ellipse at 20% 50%, rgba(217, 4, 41, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(217, 4, 41, 0.1) 0%, transparent 50%), var(--color-bg); border-bottom: 3px solid var(--color-red-primary); } /* Decorative "spray paint" specks - creates a graffiti texture feel */ .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(2px 2px at 20px 30px, rgba(217, 4, 41, 0.3), transparent), radial-gradient(2px 2px at 40px 70px, rgba(217, 4, 41, 0.2), transparent), radial-gradient(3px 3px at 50px 160px, rgba(217, 4, 41, 0.15), transparent), radial-gradient(2px 2px at 90px 40px, rgba(217, 4, 41, 0.25), transparent), radial-gradient(2px 2px at 160px 120px, rgba(217, 4, 41, 0.2), transparent), radial-gradient(2px 2px at 200px 50px, rgba(217, 4, 41, 0.3), transparent), radial-gradient(3px 3px at 300px 180px, rgba(217, 4, 41, 0.15), transparent), radial-gradient(2px 2px at 400px 90px, rgba(217, 4, 41, 0.2), transparent), radial-gradient(2px 2px at 500px 200px, rgba(217, 4, 41, 0.25), transparent), radial-gradient(2px 2px at 600px 60px, rgba(217, 4, 41, 0.15), transparent), radial-gradient(3px 3px at 700px 150px, rgba(217, 4, 41, 0.2), transparent), radial-gradient(2px 2px at 800px 100px, rgba(217, 4, 41, 0.3), transparent); pointer-events: none; /* Lets clicks pass through to elements below */ } .hero-content { position: relative; z-index: 1; padding: var(--space-xl); } .hero-title { font-size: 5rem; font-family: var(--font-heading); color: var(--color-white); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-sm); line-height: 1.1; text-shadow: 0 0 30px var(--color-red-glow); } .hero-title .hero-red { color: var(--color-red-primary); } .hero-subtitle { font-family: var(--font-subheading); font-size: 1.5rem; color: var(--color-text-muted); margin-bottom: var(--space-lg); } .hero-cta { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } /* Hero "drip" effect at the bottom - like spray paint dripping */ .hero-drip { position: absolute; bottom: -2px; left: 0; right: 0; height: 20px; background: var(--color-bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; } /* Spray paint drip decorations */ .drip-decoration { position: absolute; bottom: -2px; width: 8px; height: 30px; background: var(--color-red-primary); border-radius: 0 0 4px 4px; } .drip-decoration:nth-child(1) { left: 15%; height: 25px; } .drip-decoration:nth-child(2) { left: 30%; height: 40px; } .drip-decoration:nth-child(3) { left: 55%; height: 20px; } .drip-decoration:nth-child(4) { left: 70%; height: 35px; } .drip-decoration:nth-child(5) { left: 85%; height: 28px; } /* ============================================================ 9. PAGE - HOME ============================================================ */ /* 3-column grid for Standard / White / Black pack cards */ .packs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); max-width: 1100px; margin: 0 auto; } /* Full-width row for the Custom Decal card (below the 3 packs) */ .custom-pack-row { max-width: 700px; margin: var(--space-xl) auto 0; } .custom-pack-row .card { text-align: center; } .custom-pack-row .card-body { padding-bottom: var(--space-sm); } /* URL input group for the custom decal design link */ .custom-url-group { display: flex; gap: var(--space-sm); align-items: center; max-width: 550px; margin: var(--space-md) auto 0; } .custom-url-group input[type="url"] { flex: 1; background: var(--color-bg); border: 1px solid #333; color: var(--color-text); padding: var(--space-sm) var(--space-md); font-family: var(--font-body); font-size: 0.9rem; border-radius: var(--border-radius); outline: none; transition: border-color 0.2s; min-width: 0; } .custom-url-group input[type="url"]:focus { border-color: var(--color-red-primary); } .custom-url-group input[type="url"]:invalid:not(:placeholder-shown) { border-color: #c0392b; } .custom-url-group input[type="url"]::placeholder { color: #555; } /* Button that opens the external design site */ .btn-design-link { white-space: nowrap; } /* Status message for custom URL input */ .custom-url-status { font-size: 0.8rem; color: var(--color-text-muted); margin-top: var(--space-xs); min-height: 1.2em; } .custom-url-status.success { color: #27ae60; } .custom-url-status.error { color: var(--color-red-primary); } /* About / story section on home */ .story-section { background: var(--color-bg-alt); border-top: 2px solid var(--color-red-primary); border-bottom: 2px solid var(--color-red-primary); } .story-content { max-width: 800px; margin: 0 auto; text-align: center; } .story-content p { font-size: 1.1rem; line-height: 1.8; } /* Community / social links */ .social-links { display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap; } .social-link { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-subheading); font-size: 1.1rem; color: var(--color-white); padding: var(--space-sm) var(--space-md); border: 1px solid #333; border-radius: var(--border-radius); transition: all 0.3s; } .social-link:hover { border-color: var(--color-red-primary); color: var(--color-red-primary); background: rgba(217, 4, 41, 0.05); } /* "How it works" steps */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); counter-reset: step-counter; /* For numbering steps */ } .step { text-align: center; position: relative; padding: var(--space-lg) var(--space-md); } .step-number { font-family: var(--font-heading); font-size: 3rem; color: var(--color-red-primary); opacity: 0.5; display: block; margin-bottom: var(--space-sm); } .step-title { font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-white); margin-bottom: var(--space-sm); text-transform: uppercase; } .step-text { font-size: 0.95rem; color: var(--color-text-muted); } /* ============================================================ 10. PAGE - SHOP ============================================================ */ .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); max-width: 900px; margin: 0 auto; } /* Sticker color indicator badge */ .color-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; margin-bottom: var(--space-sm); } .color-badge-white { background: #333; color: var(--color-white); border: 1px solid #555; } .color-badge-black { background: var(--color-white); color: var(--color-bg); border: 1px solid #555; } /* Pack contents list */ .pack-contents { margin-bottom: var(--space-md); } .pack-contents li { font-size: 0.9rem; color: var(--color-text-muted); padding: 2px 0; } .pack-contents li::before { content: '>'; color: var(--color-red-primary); margin-right: var(--space-sm); font-weight: bold; } /* ============================================================ 11. PAGE - BUILDER (Custom 12-Pack) ============================================================ */ /* Builder layout - sidebar + grid */ .builder-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-lg); align-items: start; } /* Grid of available stickers to pick from */ .sticker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } /* Individual sticker option in the builder */ .sticker-option { background: var(--color-bg-alt); border: 2px solid #222; border-radius: var(--border-radius); padding: var(--space-md); text-align: center; cursor: pointer; /* Shows clickable hand */ transition: all 0.3s ease; user-select: none; /* Prevents text selection when clicking fast */ } .sticker-option:hover { border-color: var(--color-text-muted); transform: translateY(-2px); } /* Selected state - glows red with a check indicator */ .sticker-option.selected { border-color: var(--color-red-primary); background: rgba(217, 4, 41, 0.1); box-shadow: 0 0 15px var(--color-red-glow); position: relative; } .sticker-option.selected::after { content: '✓'; position: absolute; top: var(--space-xs); right: var(--space-xs); background: var(--color-red-primary); color: var(--color-white); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; } .sticker-option .sticker-preview { width: 80px; height: 80px; margin: 0 auto var(--space-sm); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 2rem; border: 2px dashed #333; position: relative; } .sticker-option .sticker-preview .img-placeholder { opacity: 0.5; font-size: 2rem; } .sticker-option .sticker-name { font-family: var(--font-heading); font-size: 1rem; color: var(--color-white); text-transform: uppercase; margin-bottom: var(--space-xs); } .sticker-option .sticker-color { font-size: 0.8rem; color: var(--color-text-muted); } /* Builder sidebar - shows selected and progress */ .builder-sidebar { background: var(--color-bg-alt); border: 1px solid #222; border-radius: var(--border-radius); padding: var(--space-lg); position: sticky; top: calc(var(--header-height) + var(--space-lg)); } .builder-sidebar h3 { font-size: 1.5rem; margin-bottom: var(--space-md); } /* Progress bar showing how many of 12 selected */ .progress-bar { width: 100%; height: 8px; background: #222; border-radius: 4px; overflow: hidden; margin-bottom: var(--space-md); } .progress-fill { height: 100%; background: var(--color-red-primary); width: 0%; transition: width 0.3s ease; border-radius: 4px; } .progress-text { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-white); text-align: center; margin-bottom: var(--space-md); } .progress-text .count { color: var(--color-red-primary); } /* Selected items list in sidebar */ .selected-list { max-height: 300px; overflow-y: auto; margin-bottom: var(--space-md); } .selected-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) 0; border-bottom: 1px solid #222; font-size: 0.9rem; } .selected-item:last-child { border-bottom: none; } .selected-item .remove-btn { background: none; border: none; color: var(--color-red-primary); cursor: pointer; font-size: 1.1rem; padding: 0 var(--space-xs); transition: color 0.2s; } .selected-item .remove-btn:hover { color: var(--color-red-bright); } /* Empty state message in builder */ .builder-empty { text-align: center; padding: var(--space-xl); color: var(--color-text-muted); font-family: var(--font-subheading); } .builder-empty .empty-icon { font-size: 4rem; margin-bottom: var(--space-md); opacity: 0.5; } /* ============================================================ 12. PAGE - CART ============================================================ */ .cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-xl); align-items: start; } /* Cart items list */ .cart-items { background: var(--color-bg-alt); border: 1px solid #222; border-radius: var(--border-radius); overflow: hidden; } .cart-item { display: grid; grid-template-columns: 80px 1fr auto auto; gap: var(--space-md); align-items: center; padding: var(--space-md); border-bottom: 1px solid #222; } .cart-item:last-child { border-bottom: none; } .cart-item-image { width: 80px; height: 80px; background: var(--color-bg-darker); border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; font-size: 2rem; } .cart-item-info h4 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-white); margin-bottom: 2px; } .cart-item-info .item-detail { font-size: 0.85rem; color: var(--color-text-muted); } .cart-item-quantity { display: flex; align-items: center; gap: var(--space-sm); } .qty-btn { background: #222; border: 1px solid #333; color: var(--color-white); width: 30px; height: 30px; border-radius: var(--border-radius); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .qty-btn:hover { background: var(--color-red-primary); border-color: var(--color-red-primary); } .cart-item-total { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-red-primary); text-align: right; } .cart-item-remove { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 0.8rem; padding: var(--space-xs); transition: color 0.2s; } .cart-item-remove:hover { color: var(--color-red-primary); } /* Cart sidebar / summary */ .cart-summary { background: var(--color-bg-alt); border: 1px solid #222; border-radius: var(--border-radius); padding: var(--space-lg); position: sticky; top: calc(var(--header-height) + var(--space-lg)); } .cart-summary h3 { font-size: 1.5rem; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid #222; } .summary-row { display: flex; justify-content: space-between; margin-bottom: var(--space-md); font-size: 0.95rem; } .summary-row.total { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-white); padding-top: var(--space-md); border-top: 2px solid var(--color-red-primary); margin-top: var(--space-md); } .summary-row.total .amount { color: var(--color-red-primary); } /* Empty cart state */ .cart-empty { text-align: center; padding: var(--space-xl); } .cart-empty .empty-icon { font-size: 5rem; margin-bottom: var(--space-md); opacity: 0.5; } /* Stripe / checkout notice */ .stripe-notice { background: rgba(217, 4, 41, 0.1); border: 1px dashed var(--color-red-dark); border-radius: var(--border-radius); padding: var(--space-md); margin-top: var(--space-md); font-size: 0.85rem; color: var(--color-text-muted); } .stripe-notice strong { color: var(--color-red-primary); display: block; margin-bottom: var(--space-xs); font-family: var(--font-subheading); text-transform: uppercase; } /* ============================================================ 13. FOOTER ============================================================ */ .site-footer { background: var(--color-bg-darker); border-top: 2px solid var(--color-red-primary); padding: var(--space-xl) 0 var(--space-lg); margin-top: auto; /* Pushes footer to bottom with flex */ } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-xl); } .footer-brand { font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-white); margin-bottom: var(--space-sm); } .footer-brand .brand-red { color: var(--color-red-primary); } .footer-description { font-size: 0.9rem; color: var(--color-text-muted); max-width: 350px; } .footer-heading { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-white); margin-bottom: var(--space-md); text-transform: uppercase; } .footer-links li { margin-bottom: var(--space-sm); } .footer-links a { color: var(--color-text-muted); font-size: 0.9rem; transition: color 0.2s; } .footer-links a:hover { color: var(--color-red-primary); } .footer-bottom { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid #222; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); } /* ============================================================ 14. RESPONSIVE (MOBILE) STYLES ============================================================ These kick in at different screen widths to make the site look good on phones and tablets. */ /* Tablet and below - screens smaller than 900px */ @media (max-width: 900px) { h1 { font-size: 2.8rem; } h2 { font-size: 2rem; } .hero-title { font-size: 3.5rem; } .hero-subtitle { font-size: 1.2rem; } .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .shop-grid, .packs-grid-3 { grid-template-columns: 1fr; } .builder-layout { grid-template-columns: 1fr; } .builder-sidebar { position: static; /* No longer sticky on mobile */ } .cart-layout { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .sticker-grid { grid-template-columns: repeat(2, 1fr); } .cart-item { grid-template-columns: 60px 1fr; gap: var(--space-sm); } .cart-item-total, .cart-item-remove { grid-column: 2; } } /* Mobile - screens smaller than 600px */ @media (max-width: 600px) { h1 { font-size: 2.2rem; } h2 { font-size: 1.6rem; } .container { padding: 0 var(--space-md); } .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1rem; } .hero { min-height: 60vh; } /* Mobile nav - hamburger menu */ .menu-toggle { display: block; } .nav-links { display: none; /* Hidden by default on mobile */ position: absolute; top: var(--header-height); left: 0; right: 0; background: rgba(10, 10, 10, 0.98); flex-direction: column; padding: var(--space-lg); border-bottom: 2px solid var(--color-red-primary); gap: var(--space-md); } .nav-links.open { display: flex; /* Shown when toggled */ } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .packs-grid-3 { grid-template-columns: 1fr; } .shop-grid { grid-template-columns: 1fr; } .sticker-grid { grid-template-columns: repeat(2, 1fr); } .custom-url-group { flex-direction: column; } .btn-design-link { width: 100%; text-align: center; } .footer-grid { grid-template-columns: 1fr; } .cart-item { grid-template-columns: 1fr; text-align: center; } .cart-item-image { margin: 0 auto; } .hero-cta { flex-direction: column; align-items: center; } .btn-lg { width: 100%; text-align: center; } .section-title { font-size: 2rem; } } /* ============================================================ 15. ANIMATIONS ============================================================ */ /* Fade-in animation for page content */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.6s ease forwards; } .fade-in-delay-1 { animation-delay: 0.1s; } .fade-in-delay-2 { animation-delay: 0.2s; } .fade-in-delay-3 { animation-delay: 0.3s; } /* Pulsing glow effect - good for call-to-action elements */ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 10px var(--color-red-glow); } 50% { box-shadow: 0 0 25px var(--color-red-glow), 0 0 50px rgba(217, 4, 41, 0.1); } } .pulse-glow { animation: pulseGlow 2s ease-in-out infinite; } /* Drip animation - makes the drips slowly grow */ @keyframes drip { 0% { height: 0; opacity: 0; } 50% { opacity: 1; } 100% { height: var(--drip-height, 30px); opacity: 0.8; } } .drip-decoration { animation: drip 3s ease-in-out infinite; } .drip-decoration:nth-child(2) { animation-delay: 0.5s; } .drip-decoration:nth-child(3) { animation-delay: 1s; } .drip-decoration:nth-child(4) { animation-delay: 1.5s; } .drip-decoration:nth-child(5) { animation-delay: 2s; } /* Spray flick / shake for hover effects */ @keyframes sprayFlick { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(2px, -1px) rotate(0.5deg); } 50% { transform: translate(-1px, 1px) rotate(-0.5deg); } 75% { transform: translate(1px, 2px) rotate(0.3deg); } 100% { transform: translate(0, 0) rotate(0deg); } }