:root { --red: #e01a2f; --red-dark: #b5102a; --red-glow: rgba(224,26,47,0.25); --black: #0a0a0a; --dark-1: #111111; --dark-2: #181818; --dark-3: #222222; --dark-4: #2a2a2a; --gray: #888888; --gray-light: #aaaaaa; --white: #ffffff; --white-90: rgba(255,255,255,0.9); --white-70: rgba(255,255,255,0.7); --white-30: rgba(255,255,255,0.3); --white-10: rgba(255,255,255,0.08); --glass-bg: rgba(255,255,255,0.05); --glass-border: rgba(255,255,255,0.1); --section-bg: var(--dark-1); --card-bg: var(--dark-2); --nav-height: 72px; --font-display: 'Bebas Neue', 'Barlow Condensed', Impact, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-condensed: 'Barlow Condensed', 'Bebas Neue', sans-serif; --transition: 0.3s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1); --radius: 12px; --radius-lg: 20px; --shadow-red: 0 8px 32px rgba(224,26,47,0.3); --shadow-dark: 0 8px 32px rgba(0,0,0,0.5); } body.light-mode { --section-bg: #f5f5f5; --card-bg: #ffffff; --black: #f5f5f5; --dark-1: #f5f5f5; --dark-2: #ffffff; --dark-3: #eeeeee; --dark-4: #e0e0e0; --glass-bg: rgba(0,0,0,0.04); --glass-border: rgba(0,0,0,0.1); --white: #0a0a0a; --white-90: rgba(10,10,10,0.9); --white-70: rgba(10,10,10,0.7); --white-30: rgba(10,10,10,0.3); --white-10: rgba(10,10,10,0.06); --gray: #555555; --gray-light: #777777; --shadow-dark: 0 8px 32px rgba(0,0,0,0.12); } *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background: var(--dark-1); color: var(--white); overflow-x: hidden; transition: background var(--transition), color var(--transition); } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: var(--font-body); } input, select, textarea { font-family: var(--font-body); outline: none; } section { position: relative; } #loader { position: fixed; inset: 0; background: #0a0a0a; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; } #loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader-inner { text-align: center; } .loader-logo { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6rem); color: #fff; letter-spacing: 0.05em; animation: pulse 1s ease infinite alternate; } .loader-logo span { color: var(--red); } .loader-bar { width: 200px; height: 3px; background: #222; border-radius: 99px; margin: 24px auto 16px; overflow: hidden; } .loader-fill { height: 100%; background: var(--red); border-radius: 99px; width: 0; animation: loadBar 2s ease forwards; } .loader-text { color: var(--gray); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; } @keyframes loadBar { to { width: 100%; } } @keyframes pulse { from { opacity: 1; } to { opacity: 0.6; } } .popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 8000; display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(6px); transition: opacity 0.3s; animation: fadeIn 0.3s ease; } .popup-overlay.hidden { display: none; } .popup-box { background: var(--dark-2); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 40px 36px; max-width: 440px; width: 100%; text-align: center; position: relative; animation: slideUp 0.4s cubic-bezier(0.4,0,0.2,1); } .popup-close { position: absolute; top: 16px; right: 20px; font-size: 1.6rem; color: var(--gray); background: none; transition: color var(--transition); } .popup-close:hover { color: var(--white); } .popup-badge { display: inline-block; background: var(--red); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; border-radius: 99px; margin-bottom: 16px; } .popup-box h2 { font-family: var(--font-display); font-size: 2rem; margin-bottom: 12px; color: var(--white); } .popup-box p { color: var(--gray-light); margin-bottom: 20px; } .popup-skip { display: block; margin-top: 16px; color: var(--gray); font-size: 0.8rem; text-decoration: underline; } .popup-skip:hover { color: var(--white); } .success-box { border-top: 4px solid var(--red); } .success-icon { font-size: 3rem; color: var(--red); margin-bottom: 16px; } .success-note { font-size: 0.85rem; color: var(--gray-light); margin-top: 8px; } #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-height); transition: background var(--transition), box-shadow var(--transition); } #navbar.scrolled { background: rgba(10,10,10,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 2px 24px rgba(0,0,0,0.5); } body.light-mode #navbar.scrolled { background: rgba(255,255,255,0.95); } .nav-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 32px; } .nav-logo { font-family: var(--font-display); font-size: 1.8rem; color: var(--white); letter-spacing: 0.08em; flex-shrink: 0; } .nav-logo span { color: var(--red); } .nav-links { display: flex; gap: 4px; margin-left: auto; } .nav-links a { padding: 8px 14px; color: var(--white-70); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; border-radius: 8px; transition: color var(--transition), background var(--transition); white-space: nowrap; } .nav-links a:hover { color: var(--white); background: var(--white-10); } .nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .theme-toggle { width: 38px; height: 38px; border-radius: 50%; background: var(--white-10); color: var(--white-70); display: flex; align-items: center; justify-content: center; transition: var(--transition); font-size: 0.9rem; } .theme-toggle:hover { background: var(--white-30); color: var(--white); } .btn-nav-join { background: var(--red); color: #fff; padding: 9px 20px; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; transition: var(--transition); white-space: nowrap; } .btn-nav-join:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: var(--shadow-red); } .hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hero { height: 100svh; min-height: 640px; position: relative; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, rgba(224,26,47,0.15) 100%); } .hero-content { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 24px; padding-top: var(--nav-height); } .hero-eyebrow { display: inline-block; color: var(--red); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 20px; opacity: 0; transform: translateY(20px); animation: revealUp 0.8s 0.3s forwards; } .hero-title { font-family: var(--font-display); line-height: 0.9; font-size: clamp(4rem, 12vw, 9rem); margin-bottom: 24px; } .hero-title-line { display: block; color: var(--white); opacity: 0; transform: translateX(-40px); } .hero-title-line:nth-child(1) { animation: revealLeft 0.8s 0.5s forwards; } .hero-title-line:nth-child(2) { animation: revealLeft 0.8s 0.65s forwards; } .hero-title-line:nth-child(3) { animation: revealLeft 0.8s 0.8s forwards; } .hero-title-line.accent { color: var(--red); } .hero-sub { color: var(--white-70); max-width: 480px; font-size: 1rem; line-height: 1.6; margin-bottom: 32px; opacity: 0; transform: translateY(20px); animation: revealUp 0.8s 0.9s forwards; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; opacity: 0; animation: revealUp 0.8s 1.1s forwards; } .hero-stats { display: flex; align-items: center; gap: 0; flex-wrap: wrap; opacity: 0; animation: revealUp 0.8s 1.3s forwards; } .stat-item { text-align: center; padding: 0 24px 0 0; } .stat-item:first-child { padding-left: 0; } .stat-num { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--white); line-height: 1; } .stat-plus { color: var(--red); font-family: var(--font-display); font-size: 1.6rem; } .stat-label { font-size: 0.75rem; color: var(--white-70); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; display: block; } .stat-divider { width: 1px; height: 44px; background: var(--white-30); margin: 0 24px 0 0; } .scroll-down-btn { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--white-10); border: 1px solid var(--white-30); color: var(--white); display: flex; align-items: center; justify-content: center; animation: bounce 2s ease infinite; transition: var(--transition); } .scroll-down-btn:hover { background: var(--red); border-color: var(--red); } @keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-8px)} } .btn-red { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; padding: 14px 28px; border-radius: var(--radius); font-weight: 600; font-size: 0.9rem; transition: var(--transition); border: 2px solid var(--red); } .btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-2px); box-shadow: var(--shadow-red); } .btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--white); padding: 14px 28px; border-radius: var(--radius); font-weight: 600; font-size: 0.9rem; border: 2px solid var(--white-30); transition: var(--transition); } .btn-outline:hover { border-color: var(--white); background: var(--white-10); transform: translateY(-2px); } .btn-lg { padding: 16px 36px; font-size: 1rem; } .btn-sm { padding: 9px 18px; font-size: 0.8rem; } .btn-full { width: 100%; justify-content: center; } .mt-1 { margin-top: 12px; } .section { padding: 96px 0; background: var(--section-bg); } .section:nth-child(even) { background: var(--dark-2); } body.light-mode .section:nth-child(even) { background: #efefef; } .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .section-header { text-align: center; margin-bottom: 60px; } .section-eyebrow { display: inline-block; color: var(--red); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; } .section-title { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--white); line-height: 1; margin-bottom: 16px; } .section-sub { color: var(--gray-light); max-width: 560px; margin: 0 auto; line-height: 1.6; } .red { color: var(--red); } .glass-card { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 32px; } .about-section { background: var(--dark-1) !important; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .about-image-wrap { position: relative; } .about-image-wrap img { width: 100%; height: 540px; object-fit: cover; border-radius: var(--radius-lg); position: relative; z-index: 1; } .about-badge { position: absolute; bottom: -20px; right: -20px; z-index: 2; background: var(--red); color: #fff; font-family: var(--font-display); font-size: 1.4rem; padding: 20px 24px; border-radius: var(--radius); text-align: center; line-height: 1.2; box-shadow: var(--shadow-red); } .about-img-accent { position: absolute; top: 20px; left: -20px; right: 20px; bottom: -20px; border: 2px solid var(--red); border-radius: var(--radius-lg); opacity: 0.3; } .about-content p { color: var(--gray-light); line-height: 1.8; margin-bottom: 16px; } .about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; } .feature-card { display: flex; gap: 14px; align-items: flex-start; background: var(--dark-2); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 18px; transition: var(--transition); } .feature-card:hover { border-color: var(--red); transform: translateY(-2px); } .feature-card i { font-size: 1.4rem; color: var(--red); margin-top: 2px; flex-shrink: 0; } .feature-card h4 { font-size: 0.9rem; font-weight: 600; color: var(--white); margin-bottom: 4px; } .feature-card p { font-size: 0.8rem; color: var(--gray-light); line-height: 1.5; } .programs-section { background: var(--dark-2) !important; } .programs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .program-card { background: var(--dark-3); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--glass-border); transition: var(--transition); group: true; } .program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-dark); border-color: var(--red); } .program-img { position: relative; height: 200px; overflow: hidden; } .program-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .program-card:hover .program-img img { transform: scale(1.08); } .program-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); } .program-body { padding: 20px; } .program-tag { display: inline-block; background: var(--red-glow); color: var(--red); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; margin-bottom: 10px; } .program-body h3 { font-weight: 700; font-size: 1.05rem; color: var(--white); margin-bottom: 8px; } .program-body p { font-size: 0.82rem; color: var(--gray-light); line-height: 1.6; margin-bottom: 12px; } .program-meta { font-size: 0.78rem; color: var(--gray); margin-bottom: 16px; } .program-meta i { margin-right: 6px; color: var(--red); } .btn-program { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-size: 0.82rem; font-weight: 600; transition: gap var(--transition); } .btn-program:hover { gap: 12px; } .membership-section { background: var(--dark-1) !important; } .membership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 64px; } .plan-card { background: var(--dark-2); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 32px; position: relative; transition: var(--transition); } .plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-dark); } .plan-popular { border-color: var(--red); background: linear-gradient(135deg, var(--dark-2) 0%, rgba(224,26,47,0.08) 100%); transform: scale(1.04); } .plan-popular:hover { transform: scale(1.04) translateY(-6px); } .plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 16px; border-radius: 99px; white-space: nowrap; } .plan-header { margin-bottom: 28px; } .plan-name { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray); margin-bottom: 12px; } .plan-price { font-family: var(--font-display); font-size: 3rem; color: var(--white); line-height: 1; } .price-currency { font-size: 1.5rem; vertical-align: top; margin-top: 8px; display: inline-block; } .price-period { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--gray); } .plan-features { list-style: none; margin-bottom: 28px; } .plan-features li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--white-10); font-size: 0.88rem; color: var(--white-70); } .plan-features li i { color: var(--red); width: 16px; } .plan-features li.disabled { color: var(--gray); } .plan-features li.disabled i { color: var(--dark-4); } .btn-plan { display: block; text-align: center; padding: 14px; border: 2px solid var(--white-30); color: var(--white); border-radius: var(--radius); font-weight: 600; font-size: 0.9rem; transition: var(--transition); } .btn-plan:hover { border-color: var(--red); color: var(--red); } .btn-plan-primary { background: var(--red); border-color: var(--red); color: #fff; } .btn-plan-primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; box-shadow: var(--shadow-red); } .comparison-wrap { text-align: center; } .comparison-title { font-family: var(--font-display); font-size: 2rem; color: var(--white); margin-bottom: 24px; } .table-scroll { overflow-x: auto; } .comparison-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .comparison-table th, .comparison-table td { padding: 14px 20px; text-align: center; border-bottom: 1px solid var(--white-10); } .comparison-table th { background: var(--dark-3); color: var(--white); font-weight: 700; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.1em; } .comparison-table td:first-child { text-align: left; color: var(--gray-light); } .highlight-col { background: rgba(224,26,47,0.08); } .comparison-table th.highlight-col { background: rgba(224,26,47,0.2); color: var(--red); } .green { color: #22c55e !important; } .red-x { color: #555 !important; } .trainers-section { background: var(--dark-2) !important; } .trainers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .trainer-card { background: var(--dark-3); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--glass-border); transition: var(--transition); text-align: center; } .trainer-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-dark); border-color: var(--red); } .trainer-img { position: relative; height: 260px; overflow: hidden; } .trainer-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s ease; } .trainer-card:hover .trainer-img img { transform: scale(1.05); } .trainer-social { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; transform: translateY(60px); transition: var(--transition); } .trainer-card:hover .trainer-social { transform: translateY(0); } .trainer-social a { width: 34px; height: 34px; border-radius: 50%; background: var(--white-10); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: var(--transition); border: 1px solid var(--white-30); } .trainer-social a:hover { background: var(--red); border-color: var(--red); } .trainer-body { padding: 20px; } .trainer-body h3 { font-weight: 700; color: var(--white); margin-bottom: 4px; } .trainer-role { font-size: 0.8rem; color: var(--red); font-weight: 600; } .trainer-exp { font-size: 0.78rem; color: var(--gray); margin: 8px 0 16px; } .trainer-exp i { margin-right: 4px; color: var(--red); } .btn-trainer { display: inline-block; background: var(--red); color: #fff; padding: 9px 20px; border-radius: var(--radius); font-size: 0.82rem; font-weight: 600; transition: var(--transition); } .btn-trainer:hover { background: var(--red-dark); transform: translateY(-1px); } .diet-section { background: var(--dark-1) !important; } .diet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .diet-card { background: var(--dark-2); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 32px; text-align: center; transition: var(--transition); } .diet-card:hover { transform: translateY(-4px); border-color: var(--red); box-shadow: var(--shadow-dark); } .diet-card-featured { background: linear-gradient(135deg, var(--dark-2), rgba(224,26,47,0.1)); border-color: var(--red); } .diet-icon { font-size: 2.4rem; color: var(--red); margin-bottom: 16px; } .diet-card h3 { font-weight: 700; font-size: 1.2rem; color: var(--white); margin-bottom: 12px; } .diet-price { font-family: var(--font-display); font-size: 2rem; color: var(--red); margin-bottom: 20px; } .diet-price span { font-family: var(--font-body); font-size: 0.85rem; color: var(--gray); } .diet-card ul { list-style: none; margin-bottom: 28px; text-align: left; } .diet-card li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--white-10); font-size: 0.85rem; color: var(--white-70); } .diet-card li i { color: var(--red); font-size: 0.75rem; } .btn-diet { display: block; padding: 14px; border: 2px solid var(--white-30); color: var(--white); border-radius: var(--radius); font-weight: 600; font-size: 0.9rem; transition: var(--transition); } .btn-diet:hover { border-color: var(--red); color: var(--red); } .btn-diet-primary { background: var(--red); border-color: var(--red); color: #fff !important; } .btn-diet-primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff !important; } .bmi-section { background: var(--dark-2) !important; } .bmi-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .bmi-info p { color: var(--gray-light); line-height: 1.7; margin-bottom: 24px; } .bmi-categories { display: flex; flex-direction: column; gap: 10px; } .bmi-cat { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--gray-light); } .bmi-range { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; } .bmi-range.underweight { background: rgba(59,130,246,0.2); color: #60a5fa; } .bmi-range.normal { background: rgba(34,197,94,0.2); color: #4ade80; } .bmi-range.overweight { background: rgba(234,179,8,0.2); color: #facc15; } .bmi-range.obese { background: rgba(239,68,68,0.2); color: #f87171; } .bmi-calculator h3 { font-weight: 700; font-size: 1.3rem; margin-bottom: 24px; color: var(--white); } .bmi-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .bmi-result { margin-top: 24px; text-align: center; animation: fadeIn 0.4s ease; } .bmi-score-wrap { margin-bottom: 12px; } .bmi-score-ring { width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--red); background: var(--dark-3); display: flex; align-items: center; justify-content: center; margin: 0 auto; } #bmiScore { font-family: var(--font-display); font-size: 2.4rem; color: var(--white); } .bmi-category-label { font-size: 1rem; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; } .bmi-advice { font-size: 0.85rem; color: var(--gray-light); max-width: 300px; margin: 0 auto 12px; line-height: 1.6; } .gallery-section { background: var(--dark-1) !important; } .gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 32px; } .filter-btn { padding: 9px 20px; border-radius: 99px; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--glass-border); color: var(--gray-light); background: transparent; transition: var(--transition); } .filter-btn:hover, .filter-btn.active { background: var(--red); border-color: var(--red); color: #fff; } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; aspect-ratio: 4/3; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.08); } .gallery-overlay { position: absolute; inset: 0; background: rgba(224,26,47,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); color: #fff; font-size: 1.5rem; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-item.hidden { display: none; } .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; } .lightbox.hidden { display: none; } .lightbox img { max-height: 90vh; max-width: 90vw; border-radius: var(--radius); object-fit: contain; } .lightbox-close { position: absolute; top: 20px; right: 24px; font-size: 2.4rem; color: #fff; background: none; cursor: pointer; line-height: 1; } .testimonials-section { background: var(--dark-2) !important; } .testimonials-slider { overflow: hidden; } .testimonials-track { display: flex; gap: 24px; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); } .testimonial-card { min-width: calc(33.333% - 16px); background: var(--dark-3); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 28px; flex-shrink: 0; } .testimonial-stars { color: #f59e0b; font-size: 0.9rem; margin-bottom: 12px; } .testimonial-card > p { color: var(--gray-light); font-size: 0.9rem; line-height: 1.8; margin-bottom: 20px; font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--red); } .testimonial-author h4 { font-size: 0.9rem; font-weight: 700; color: var(--white); } .testimonial-author span { font-size: 0.75rem; color: var(--gray); } .testimonial-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; } .t-nav-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--dark-3); border: 1px solid var(--glass-border); color: var(--white); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .t-nav-btn:hover { background: var(--red); border-color: var(--red); } .t-dots { display: flex; gap: 8px; } .t-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dark-4); transition: var(--transition); cursor: pointer; } .t-dot.active { background: var(--red); transform: scale(1.3); } .online-section { background: var(--dark-1) !important; } .online-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .online-card { background: var(--dark-2); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 22px; transition: var(--transition); } .online-card:hover { border-color: var(--red); transform: translateY(-2px); } .online-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .online-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--gray); letter-spacing: 0.1em; } .online-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; letter-spacing: 0.08em; background: rgba(34,197,94,0.15); color: #4ade80; } .online-badge.live { background: rgba(239,68,68,0.2); color: #f87171; animation: blink 1.5s ease infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} } .online-card h4 { font-weight: 700; color: var(--white); margin-bottom: 6px; } .online-card p { font-size: 0.82rem; color: var(--gray-light); margin-bottom: 14px; } .trial-section { background: var(--dark-2) !important; } .trial-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .trial-info p { color: var(--gray-light); line-height: 1.7; margin-bottom: 24px; } .trial-perks { list-style: none; } .trial-perks li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--white-10); color: var(--white-70); font-size: 0.9rem; } .trial-perks li i { color: var(--red); font-size: 1rem; } .trial-form-card h3 { font-weight: 700; font-size: 1.2rem; color: var(--white); margin-bottom: 24px; } .input-group { margin-bottom: 16px; } .input-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--gray-light); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; } .input-group input, .input-group select, .input-group textarea { width: 100%; padding: 13px 16px; background: var(--dark-3); border: 1px solid var(--glass-border); border-radius: var(--radius); color: var(--white); font-size: 0.9rem; transition: border-color var(--transition); } .input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: var(--red); } .input-group input::placeholder, .input-group textarea::placeholder { color: var(--gray); } .input-group select option { background: var(--dark-3); color: var(--white); } .blog-section { background: var(--dark-1) !important; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .blog-card { background: var(--dark-2); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-dark); border-color: var(--red); } .blog-img { height: 200px; overflow: hidden; } .blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .blog-card:hover .blog-img img { transform: scale(1.06); } .blog-body { padding: 22px; } .blog-tag { display: inline-block; background: var(--red-glow); color: var(--red); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; margin-bottom: 10px; } .blog-body h3 { font-weight: 700; font-size: 1rem; color: var(--white); margin-bottom: 8px; line-height: 1.4; } .blog-body p { font-size: 0.82rem; color: var(--gray-light); line-height: 1.6; margin-bottom: 14px; } .blog-link { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: 0.82rem; font-weight: 600; transition: gap var(--transition); } .blog-link:hover { gap: 10px; } .faq-section { background: var(--dark-2) !important; } .faq-list { max-width: 820px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--white-10); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 0; text-align: left; font-size: 0.95rem; font-weight: 600; color: var(--white); transition: color var(--transition); } .faq-question:hover { color: var(--red); } .faq-question i { flex-shrink: 0; transition: transform var(--transition); color: var(--red); } .faq-question.open i { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; } .faq-answer.open { max-height: 200px; padding-bottom: 20px; } .faq-answer p { color: var(--gray-light); font-size: 0.88rem; line-height: 1.8; } .contact-section { background: var(--dark-1) !important; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .contact-info { display: flex; flex-direction: column; gap: 24px; } .contact-detail { display: flex; align-items: flex-start; gap: 16px; } .contact-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--red-glow); border: 1px solid var(--red); display: flex; align-items: center; justify-content: center; color: var(--red); flex-shrink: 0; } .contact-detail h4 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 4px; } .contact-detail p, .contact-detail a { color: var(--white-70); font-size: 0.9rem; line-height: 1.6; } .contact-detail a:hover { color: var(--red); } .map-embed { border-radius: var(--radius); overflow: hidden; } .contact-form-wrap .glass-card h3 { font-weight: 700; font-size: 1.2rem; color: var(--white); margin-bottom: 24px; } .newsletter-section { background: linear-gradient(135deg, var(--dark-1) 0%, rgba(224,26,47,0.15) 100%); padding: 64px 0; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); } .newsletter-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; } .newsletter-text h3 { font-family: var(--font-display); font-size: 2rem; color: var(--white); margin-bottom: 6px; } .newsletter-text p { color: var(--gray-light); font-size: 0.9rem; } .newsletter-form { display: flex; gap: 12px; flex-wrap: wrap; } .newsletter-form input { padding: 14px 20px; border-radius: var(--radius); background: var(--dark-2); border: 1px solid var(--glass-border); color: var(--white); width: 300px; font-size: 0.9rem; transition: border-color var(--transition); } .newsletter-form input:focus { border-color: var(--red); } .newsletter-form input::placeholder { color: var(--gray); } .footer { background: #0a0a0a; padding: 64px 0 0; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 48px; margin-bottom: 48px; } .footer-brand .nav-logo { font-size: 2rem; margin-bottom: 14px; display: block; } .footer-brand p { color: var(--gray); font-size: 0.85rem; line-height: 1.7; margin-bottom: 20px; } .footer-socials { display: flex; gap: 10px; } .footer-socials a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--dark-4); color: var(--gray); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: var(--transition); } .footer-socials a:hover { background: var(--red); border-color: var(--red); color: #fff; } .footer-links h4 { font-weight: 700; color: var(--white); margin-bottom: 16px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; } .footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-links li, .footer-links a { font-size: 0.85rem; color: var(--gray); transition: color var(--transition); display: flex; align-items: center; gap: 8px; } .footer-links a:hover { color: var(--red); } .footer-links i { font-size: 0.8rem; color: var(--red); } .footer-bottom { border-top: 1px solid var(--dark-3); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: 0.8rem; color: var(--gray); } .floating-btn { position: fixed; right: 20px; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; z-index: 999; transition: var(--transition); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .whatsapp-btn { background: #25d366; color: #fff; bottom: 100px; } .whatsapp-btn:hover { background: #1aaf55; transform: scale(1.1); } .call-btn { background: var(--red); color: #fff; bottom: 48px; } .call-btn:hover { background: var(--red-dark); transform: scale(1.1); } .scroll-top-btn { background: var(--dark-3); color: var(--white); bottom: 160px; border: 1px solid var(--glass-border); } .scroll-top-btn:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); } .scroll-top-btn.hidden { opacity: 0; pointer-events: none; transform: translateY(20px); } .reveal, .reveal-up, .reveal-left, .reveal-right { opacity: 0; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4,0,0.2,1); } .reveal { transform: translateY(30px); } .reveal-up { transform: translateY(50px); } .reveal-left { transform: translateX(-40px); } .reveal-right { transform: translateX(40px); } .reveal.visible, .reveal-up.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; } @keyframes revealUp { to { opacity:1; transform: none; } } @keyframes revealLeft { to { opacity:1; transform: none; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes slideUp { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: none; } } @media (max-width: 1100px) { .programs-grid { grid-template-columns: repeat(2, 1fr); } .trainers-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .about-grid, .trial-wrap, .contact-grid, .bmi-wrap { grid-template-columns: 1fr; gap: 40px; } .membership-grid, .diet-grid { grid-template-columns: 1fr; } .plan-popular { transform: none; } .plan-popular:hover { transform: translateY(-6px); } .online-grid { grid-template-columns: 1fr 1fr; } .blog-grid { grid-template-columns: 1fr; } .about-image-wrap img { height: 380px; } .about-badge { right: 0; bottom: -12px; } .about-img-accent { display: none; } .about-features { grid-template-columns: 1fr; } .testimonial-card { min-width: calc(100% - 0px); } } @media (max-width: 768px) { :root { --nav-height: 60px; } .nav-links { position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background: rgba(10,10,10,0.97); backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 8px; transform: translateX(100%); transition: transform var(--transition-slow); z-index: 900; } body.light-mode .nav-links { background: rgba(245,245,245,0.98); } .nav-links.open { transform: translateX(0); } .nav-links a { font-size: 1.1rem; padding: 14px 32px; } .hamburger { display: flex; } .btn-nav-join { display: none; } .section { padding: 64px 0; } .programs-grid { grid-template-columns: 1fr 1fr; } .gallery-grid { grid-template-columns: 1fr 1fr; } .hero-title { font-size: clamp(3rem, 14vw, 6rem); } .newsletter-wrap { flex-direction: column; text-align: center; } .newsletter-form { justify-content: center; } .newsletter-form input { width: 260px; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } .bmi-inputs { grid-template-columns: 1fr; } .online-grid { grid-template-columns: 1fr; } .hero-stats { gap: 4px; } .stat-item { padding: 0 16px 0 0; } .stat-divider { margin: 0 16px 0 0; } } @media (max-width: 520px) { .programs-grid, .gallery-grid { grid-template-columns: 1fr; } .trainers-grid { grid-template-columns: 1fr 1fr; } .hero-cta { flex-direction: column; align-items: flex-start; } .btn-lg { width: 100%; justify-content: center; } .comparison-table { font-size: 0.78rem; } .comparison-table th, .comparison-table td { padding: 10px 12px; } .trial-form-card { padding: 20px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { overflow-x: hidden; } .container, .section, main { max-width: 100%; } @media (max-width: 768px) { .btn, .nav-links a, .nav-pills a { min-height: 44px; align-items: center; } .section { padding-block: 3rem; } .form-panel, .form-card, .form-elegant, .inquiry-float { padding: 1.25rem; } .inquiry-sidebar { padding: 2rem 1.25rem; } .form-area { padding: 2rem 1.25rem; } .hero-split { min-height: auto; } .hero-panel { padding: 2.5rem 0; } .hero-visual { min-height: 40vh; } .hero-center { min-height: auto; padding: 6rem 0 2.5rem; } .hero-portal { min-height: auto; padding-bottom: 2rem; } .hero-top { padding-top: 3rem; } .hero-img-wrap img { height: 40vh; min-height: 220px; } .product-row--reverse .product-row-img, .product-row--reverse .product-row-body { order: unset; } .product-num { font-size: 2.5rem; } .stat-pill { min-width: calc(50% - 0.5rem); flex: 1 1 calc(50% - 0.5rem); } .nav-float { top: 0.5rem; } .page-wrap { padding-top: 4.75rem; } .tab-label { flex: 1 1 auto; text-align: center; border-radius: 8px !important; margin-bottom: 0.25rem; } .tab-row { gap: 0.35rem; } } @media (min-width: 1200px) { .container { width: min(100% - 3rem, var(--max)); } } .inquiry-form input, .inquiry-form select, .inquiry-form textarea { max-width: 100%; }