/* ============================================ Sefuma Homepage Styles Design System v1.0 ============================================ *//* ============================================ CSS Variables ============================================ */:root{/* Colors - from existing app */ --bg-dark:#1a1a1a;--bg-medium:#2a2a2a;--bg-light:#3a3a3a;--text-primary:#e0e0e0;--text-secondary:#b0b0b0;--border:#4a4a4a;--border-light:#5a5a5a;--accent-gold:#d4af37;--accent-gold-hover:#c19b2b;--accent-brown:#8b4513;--accent-brown-hover:#a0522d;--error:#ff6b6b;--success:#51cf66;/* Typography */ --font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;/* Spacing */ --spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--spacing-3xl:64px;/* Breakpoints */ --mobile-max:767px;--tablet-min:768px;--tablet-max:1023px;--desktop-min:1024px;/* Transitions */ --transition-fast:0.2s ease;--transition-medium:0.3s ease;}/* ============================================ Reset & Base Styles ============================================ */*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}body{font-family:var(--font-family);background-color:var(--bg-dark);color:var(--text-primary);font-size:16px;line-height:1.6;overflow-x:hidden;}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg);}.hidden{display:none !important;}/* Prevent .hidden from affecting mobile navigation */.mobile-nav.hidden,.mobile-nav-overlay.hidden{display:block !important;}/* ============================================ Age Verification Modal ============================================ */.age-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(26,26,26,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:var(--spacing-lg);}.age-modal-content{background-color:#ffffff;border:1px solid #e0e0e0;border-radius:8px;padding:var(--spacing-3xl);max-width:600px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.2);}.age-modal-logo{height:50px;width:auto;margin-bottom:var(--spacing-xl);}.age-modal-title{font-size:48px;font-weight:700;margin-bottom:var(--spacing-xl);color:#1a1a1a;letter-spacing:2px;}.age-modal-text{font-size:18px;line-height:1.6;margin-bottom:var(--spacing-2xl);color:#1a1a1a;}.age-modal-buttons{display:flex;gap:var(--spacing-lg);justify-content:center;}/* ============================================ Cookie Consent Banner ============================================ */.cookie-banner{position:fixed;bottom:0;left:0;right:0;background-color:var(--bg-medium);border-top:1px solid var(--border);padding:var(--spacing-md) var(--spacing-lg);z-index:9000;box-shadow:0 -2px 8px rgba(0,0,0,0.4);}.cookie-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg);}.cookie-text{font-size:14px;color:var(--text-secondary);margin:0;}.cookie-buttons{display:flex;gap:var(--spacing-md);}/* ============================================ Buttons ============================================ */.btn-primary{background-color:var(--accent-gold);color:var(--bg-dark);border:none;padding:12px 24px;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;display:inline-block;}.btn-primary:hover{background-color:var(--accent-gold-hover);transform:translateY(-2px);}.btn-primary-small{background-color:var(--accent-gold);color:var(--bg-dark);border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);}.btn-primary-small:hover{background-color:var(--accent-gold-hover);}.btn-secondary-small{background-color:var(--bg-light);color:var(--text-primary);border:1px solid var(--border);padding:10px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);}.btn-secondary-small:hover{background-color:var(--bg-medium);border-color:var(--border-light);}.btn-secondary{background-color:var(--bg-light);color:var(--text-primary);border:1px solid var(--border);padding:12px 24px;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;display:inline-block;}.btn-secondary:hover{background-color:var(--bg-medium);border-color:var(--border-light);}.btn-primary-nav{background-color:var(--accent-gold);color:var(--bg-dark);padding:8px 16px;border-radius:6px;font-weight:600;text-decoration:none;transition:all var(--transition-fast);}.btn-primary-nav:hover{background-color:var(--accent-gold-hover);}/* ============================================ Header & Navigation ============================================ */.header{background-color:rgba(26,26,26,0.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.1);padding:var(--spacing-md) 0;position:sticky;top:0;z-index:1000;}.nav-wrapper{display:flex;align-items:center;justify-content:space-between;}.logo-container{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}.logo-link{display:block;}.logo{height:40px;width:auto;}.logo-subtitle{font-size:11px;color:var(--text-secondary);margin:0;text-transform:uppercase;letter-spacing:0.5px;font-weight:500;}.nav{display:flex;align-items:center;gap:var(--spacing-xl);}.nav-link{color:var(--text-primary);text-decoration:none;font-size:16px;font-weight:500;transition:color var(--transition-fast);}.nav-link:hover{color:var(--accent-gold);}.mobile-menu-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px;}.mobile-menu-toggle span{width:24px;height:2px;background-color:var(--text-primary);transition:all var(--transition-fast);}.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}.mobile-menu-toggle.active span:nth-child(2){opacity:0;}.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-6px);}/* Mobile Navigation Overlay */.mobile-nav-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:9998;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;pointer-events:none;}.mobile-nav-overlay.open{opacity:1;visibility:visible;pointer-events:auto;}/* Mobile Navigation Slide Menu */.mobile-nav{position:fixed;top:0;right:0;width:80%;max-width:350px;height:100%;background-color:var(--bg-dark);z-index:9999;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto;box-shadow:-4px 0 12px rgba(0,0,0,0.3);pointer-events:none;}.mobile-nav.open{transform:translateX(0) !important;pointer-events:auto !important;}.mobile-nav-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--border);}.mobile-nav-logo{height:32px;width:auto;}.mobile-nav-close{background:none;border:none;color:var(--text-primary);font-size:40px;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast);}.mobile-nav-close:hover{color:var(--accent-gold);}.mobile-nav-links{padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm);}.mobile-nav-link{display:block;color:var(--text-primary);text-decoration:none;padding:var(--spacing-md);font-size:18px;font-weight:500;transition:all var(--transition-fast);border-radius:4px;}.mobile-nav-link:hover{background-color:var(--bg-medium);color:var(--accent-gold);}.mobile-nav-link.btn-primary{margin-top:var(--spacing-md);text-align:center;background-color:var(--accent-gold);color:#1a1a1a;}/* ============================================ Hero Section ============================================ */.hero{padding:var(--spacing-3xl) 0;background:linear-gradient(to right,transparent,var(--bg-dark)),url('../images/homewrapper-mobile.webp');background-size:cover;background-position:center;background-repeat:no-repeat;}/* Tablet hero background */@media (min-width:768px) and (max-width:1023px){.hero{background:linear-gradient(to right,transparent,var(--bg-dark)),url('../images/homewrapper-tablet.webp');background-size:cover;background-position:center;background-repeat:no-repeat;}}/* Desktop hero background */@media (min-width:1024px){.hero{background:linear-gradient(to right,transparent,var(--bg-dark)),url('../images/homewrapper.webp');background-size:cover;background-position:center;background-repeat:no-repeat;}}.hero-grid{display:grid;grid-template-columns:6fr 4fr;gap:var(--spacing-3xl);align-items:center;max-width:1200px;margin:0 auto;}.hero-content{padding-right:var(--spacing-xl);}.hero-title{font-size:48px;font-weight:700;line-height:1.2;margin-bottom:var(--spacing-lg);color:var(--text-primary);text-align:left;}.hero-description{font-size:18px;line-height:1.6;margin-bottom:var(--spacing-2xl);color:var(--text-secondary);text-align:left;}.hero-cta{display:flex;gap:var(--spacing-md);justify-content:flex-start;flex-wrap:wrap;}.hero-video{width:100%;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.3);}.video-thumbnail{position:relative;width:100%;cursor:pointer;transition:transform var(--transition-fast);}.video-thumbnail:hover{transform:scale(1.02);}.video-thumbnail img{width:100%;height:auto;display:block;}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background-color:rgba(212,175,55,0.95);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);box-shadow:0 4px 16px rgba(0,0,0,0.3);}.play-button:hover{background-color:rgba(212,175,55,1);transform:translate(-50%,-50%) scale(1.1);}.play-button svg{width:32px;height:32px;color:#1a1a1a;margin-left:4px;}.video-duration{text-align:center;font-size:0.875rem;color:#a0a0a0;margin-top:0.75rem;font-style:italic;}/* ============================================ What Section ============================================ */.what-section{padding:var(--spacing-3xl) 0;background-color:var(--bg-medium);text-align:center;}.what-description{font-size:18px;line-height:1.6;max-width:800px;margin:0 auto var(--spacing-lg);color:var(--text-secondary);}.what-tagline{font-size:20px;font-weight:600;color:var(--text-primary);}/* ============================================ Features Section ============================================ */.features{padding:var(--spacing-3xl) 0;}.section-title{font-size:36px;font-weight:600;line-height:1.3;text-align:center;margin-bottom:var(--spacing-2xl);color:var(--text-primary);}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-xl);max-width:1200px;margin:0 auto;}.feature-card-wrapper{position:relative;min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;}/* Individual Card Positioning *//* Uniform scaling hover effect for all cards with backgrounds */.card-one,.card-two,.card-three,.card-four{position:relative;}.card-one::before,.card-two::before,.card-three::before,.card-four::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:8px;transition:transform var(--transition-fast);z-index:0;}/* Individual card background images */.card-one::before{background-image:url('/images/panel2.webp');}.card-two::before{background-image:url('/images/panel5.webp');}.card-three::before{background-image:url('/images/panel3.webp');}.card-four::before{background-image:url('/images/panel4.webp');}.card-one:hover::before,.card-two:hover::before,.card-three:hover::before,.card-four:hover::before{transform:scale(1.05);}.card-one .feature-card{margin-top:20%;position:relative;z-index:1;}.card-two .feature-card{margin-top:auto;position:relative;z-index:1;}.card-three .feature-card{margin-top:20%;position:relative;z-index:1;}.card-four .feature-card{margin-top:30%;position:relative;z-index:1;}.feature-card{position:relative;z-index:2;background-color:rgba(26,26,26,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:8px;padding:var(--spacing-xl);transition:all var(--transition-fast);width:100%;max-width:500px;}.feature-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(212,175,55,0.2);}.feature-title{font-size:24px;font-weight:600;line-height:normal;margin-bottom:var(--spacing-md);color:var(--text-primary);}.feature-description{font-size:16px;line-height:1.6;color:var(--text-secondary);}/* ============================================ Designed for Cigar Makers Section ============================================ */.makers-section{padding:var(--spacing-3xl) 0;background-color:#ffffff;}.makers-grid{display:grid;grid-template-columns:7fr 3fr;gap:var(--spacing-3xl);align-items:center;max-width:1200px;margin:0 auto;}.makers-content{padding-right:var(--spacing-xl);}.makers-content .section-title{text-align:left;margin-bottom:var(--spacing-lg);color:#1a1a1a;}.makers-description{font-size:20px;line-height:1.6;color:#1a1a1a;}.makers-image{width:100%;max-width:300px;height:auto;border-radius:8px;overflow:hidden;margin:0 auto;}.makers-image img{width:100%;height:auto;display:block;object-fit:cover;}/* Tablet and Mobile */@media (max-width:1023px){.makers-grid{grid-template-columns:1fr;gap:var(--spacing-xl);}.makers-content{padding-right:0;text-align:center;}.makers-content .section-title{text-align:center;}}/* ============================================ Beta Section ============================================ */.beta-section{padding:var(--spacing-3xl) 0;background-color:var(--bg-medium);background-image:url('../images/tobaccofield.webp');background-size:cover;background-position:center;background-repeat:no-repeat;}.beta-grid{display:flex;flex-direction:column;gap:var(--spacing-2xl);background-color:rgba(255,255,255,0.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:var(--spacing-2xl);border:1px solid rgba(255,255,255,0.3);}.beta-content{flex:1;}.beta-section .section-title{color:#1a1a1a;}.beta-description{font-size:18px;line-height:1.6;text-align:center;max-width:800px;margin:0 auto var(--spacing-md);color:#1a1a1a;}.beta-center{margin:0 auto;max-width:600px;display:flex;justify-content:center;}.beta-list{margin:12px 0;padding-left:var(--spacing-xl);list-style-position:outside;text-align:left;}.beta-list li{font-size:18px;font-weight:600;line-height:1.8;color:#1a1a1a;}.beta-list-subtext{font-size:14px;color:#4a4a4a;font-weight:400;}.beta-cta-text{font-size:18px;font-weight:600;text-align:center;margin:var(--spacing-xl) 0;color:#1a1a1a;}/* ============================================ Beta Form ============================================ */.beta-form{max-width:600px;margin:0 auto;}.form-row{display:flex;gap:var(--spacing-lg);margin-bottom:0;}.form-row .form-group{flex:1;margin-bottom:var(--spacing-lg);}.form-group{margin-bottom:var(--spacing-lg);}.form-label{display:block;font-size:14px;font-weight:600;margin-bottom:var(--spacing-sm);color:#1a1a1a;}.required{color:var(--accent-gold);}.form-input,.form-textarea{width:100%;padding:var(--spacing-md);background-color:rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.2);border-radius:4px;color:#1a1a1a;font-family:var(--font-family);font-size:16px;transition:border-color var(--transition-fast);}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--accent-gold);}.form-textarea{resize:vertical;min-height:100px;}.beta-form button[type="submit"]{width:100%;margin-top:var(--spacing-md);padding:18px 24px;}.form-success{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:rgba(81,207,102,0.2);border:1px solid var(--success);border-radius:4px;color:#1a1a1a;font-weight:600;text-align:center;}.form-error{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:rgba(255,107,107,0.2);border:1px solid var(--error);border-radius:4px;color:#1a1a1a;font-weight:600;text-align:center;}/* ============================================ Footer ============================================ */.footer{background-color:#ffffff;border-top:1px solid #e0e0e0;padding:var(--spacing-2xl) 0;}.footer-content{display:flex;flex-direction:column;gap:var(--spacing-lg);align-items:center;}.footer-legal{text-align:center;}.legal-notice{font-size:14px;line-height:1.6;color:#4a4a4a;}.footer-right{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);}.copyright{font-size:14px;color:#1a1a1a;margin:0;}.footer-nav{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);}/* Desktop layout - side by side */@media (min-width:1024px){.beta-grid{display:grid;grid-template-columns:2fr 3fr;gap:var(--spacing-3xl);align-items:start;}.beta-content .section-title{text-align:left;}.beta-description{text-align:left;margin:0 0 var(--spacing-md);}.beta-cta-text{text-align:left;}.beta-center{justify-content:flex-start;margin:0;}.beta-form{max-width:none;margin:0;}.footer-content{flex-direction:row;justify-content:space-between;align-items:flex-start;}.footer-legal{text-align:left;}.footer-right{align-items:flex-end;}.footer-nav{justify-content:flex-end;}}.footer-link{color:var(--accent-brown);text-decoration:none;font-size:14px;transition:color var(--transition-fast);}.footer-link:hover{color:var(--accent-brown-hover);}.footer-separator{color:#cccccc;}/* ============================================ Video Modal ============================================ */.video-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);}.video-modal.hidden{display:none;}.video-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.9);cursor:pointer;}.video-modal-content{position:relative;z-index:10001;max-width:1200px;width:100%;background-color:#000;border-radius:8px;overflow:hidden;}.video-modal-close{position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;font-size:40px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast);z-index:10002;}.video-modal-close:hover{color:var(--accent-gold);}.video-modal-content video{width:100%;height:auto;display:block;}/* ============================================ Responsive Design ============================================ *//* Tablet (768px - 1023px) */@media (max-width:1023px){.hero-grid{grid-template-columns:1fr;gap:var(--spacing-2xl);}.hero-content{padding-right:0;text-align:center;}.hero-title{font-size:36px;text-align:center;}.hero-description{text-align:center;}.hero-cta{justify-content:center;}.features-grid{grid-template-columns:1fr;max-width:600px;}}/* Mobile (320px - 767px) */@media (max-width:767px){.desktop-nav{display:none;}.mobile-menu-toggle{display:flex;}.hero-grid{grid-template-columns:1fr;gap:var(--spacing-xl);}.hero-content{padding-right:0;text-align:center;}.hero-title{font-size:32px;text-align:center;}.hero-description{font-size:16px;text-align:center;}.hero-cta{flex-direction:column;justify-content:center;}.hero-cta .btn-primary,.hero-cta .btn-secondary{width:100%;}.hero-video{order:2;}.form-row{flex-direction:column;}.section-title{font-size:28px;margin-bottom:var(--spacing-md);}.what-section{padding:var(--spacing-2xl) 0;}.features{padding:var(--spacing-2xl) 0;}.makers-section,.beta-section{padding:var(--spacing-2xl) 0;}.features-grid{grid-template-columns:1fr;gap:var(--spacing-lg);max-width:100%;}.feature-card-wrapper{min-height:500px;}/* Card two - show full before/after image on mobile */ .card-two{background-size:100% auto !important;background-position:top center !important;background-repeat:no-repeat !important;}.card-two::before{background-size:100% auto !important;background-position:top center !important;background-repeat:no-repeat !important;}/* Card three - center three cigars properly on mobile */ .card-three,.card-three::before{background-size:cover !important;background-position:center center !important;}/* Card four - show full cigar on mobile */ .card-four,.card-four::before{background-size:cover !important;background-position:center center !important;}/* Mobile card positioning adjustments - all bottom aligned */ .card-one .feature-card,.card-two .feature-card,.card-three .feature-card,.card-four .feature-card{margin-top:auto;}.feature-title{margin-bottom:var(--spacing-sm);}.feature-description{line-height:1.4;}.feature-card{padding-top:calc(var(--spacing-xl) * 0.75);padding-bottom:calc(var(--spacing-xl) * 0.75);}.beta-grid{padding:var(--spacing-md);}.beta-description{line-height:1.4;}.beta-list{margin:0;}.beta-cta-text{margin:var(--spacing-md) 0;}.cookie-text{font-size:11px;}.cookie-content{gap:var(--spacing-md);}.hero{padding:var(--spacing-xl) 0;background:linear-gradient(to bottom right,transparent,var(--bg-dark)),url('../images/homewrapper-mobile.webp');background-size:cover;background-position:center;background-repeat:no-repeat;}.hero-description{margin-bottom:var(--spacing-xl);}.age-modal-content{padding:var(--spacing-xl);}.age-modal-logo{height:40px;}.age-modal-title{font-size:36px;}.age-modal-text{font-size:16px;}.age-modal-buttons{flex-direction:column;width:100%;}.age-modal-buttons .btn-primary,.age-modal-buttons .btn-secondary{width:100%;}.cookie-content{flex-direction:column;text-align:center;}.cookie-buttons{width:100%;}.btn-primary-small{width:100%;}.form-row{gap:0;}.form-row .form-group{margin-bottom:var(--spacing-lg);}.beta-form button[type="submit"]{margin-top:0;}.footer{padding:var(--spacing-xl) 0;}.footer-nav{flex-wrap:wrap;}}