/* ============================================================ OnFoot – Custom Styles Place this file in your css/ folder and link it in ============================================================ */ /* ── Navbar: Transparent → Solid on Scroll ── */ .header-section-3 .header-top-section { position: relative; z-index: 1000; transition: all 0.4s ease; } /* White nav bar sits directly under the red bar (same stack as Portfolio / pages without hero.css). */ .header-section-3 #header-sticky { position: relative; top: auto; left: auto; right: auto; width: 100%; z-index: 999; background: transparent !important; box-shadow: none; padding: 0; transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease; } body:not(.page-home) .header-section-3 #header-sticky:not(.scrolled) { background: #ffffff !important; } .header-section-3 #header-sticky .header-main { align-items: center; } /* Nav links – transparent state */ .header-section-3 #header-sticky .main-menu nav ul li a { color: #ffffff !important; transition: color 0.3s; } .header-section-3 #header-sticky .main-menu nav ul li a:hover, .header-section-3 #header-sticky .main-menu nav ul li.active > a { color: #E8132A !important; } /* Icons – transparent state */ .header-section-3 #header-sticky .search-icon i, .header-section-3 #header-sticky .cart-icon i, .header-section-3 #header-sticky .sidebar__toggle i { color: #ffffff !important; transition: color 0.3s; } /* Submenu */ .header-section-3 #header-sticky .main-menu nav ul li .submenu { background: #111111; border-top: 2px solid #E8132A; } .header-section-3 #header-sticky .main-menu nav ul li .submenu li a { color: #ccc !important; } .header-section-3 #header-sticky .main-menu nav ul li .submenu li a:hover { color: #E8132A !important; } /* ── Scrolled state: pin to top of viewport (Portfolio uses theme .sticky at scroll; we use .scrolled on many pages) ── */ .header-section-3 #header-sticky.scrolled { position: fixed; top: 0 !important; left: 0; right: 0; width: 100%; background: #ffffff !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important; padding: 8px 0; } .header-section-3 #header-sticky.scrolled .main-menu nav ul li a { color: #222222 !important; } .header-section-3 #header-sticky.scrolled .main-menu nav ul li a:hover, .header-section-3 #header-sticky.scrolled .main-menu nav ul li.active > a { color: #E8132A !important; } .header-section-3 #header-sticky.scrolled .search-icon i, .header-section-3 #header-sticky.scrolled .cart-icon i, .header-section-3 #header-sticky.scrolled .sidebar__toggle i { color: #222222 !important; } .header-section-3 #header-sticky.scrolled .submenu { background: #ffffff !important; } .header-section-3 #header-sticky.scrolled .submenu li a { color: #444 !important; } /* ── Homepage: light hero gradient; keep nav + icons dark at top and when scrolled ── */ body.page-home .header-section-3 #header-sticky .main-menu nav ul li a { color: #222222 !important; } body.page-home .header-section-3 #header-sticky .main-menu nav ul li a:hover, body.page-home .header-section-3 #header-sticky .main-menu nav ul li.active > a { color: #E8132A !important; } body.page-home .header-section-3 #header-sticky .search-icon i, body.page-home .header-section-3 #header-sticky .cart-icon i, body.page-home .header-section-3 #header-sticky .sidebar__toggle i { color: #222222 !important; } body.page-home .header-section-3 #header-sticky .main-menu nav ul li .submenu { background: #ffffff !important; border-top: 2px solid #E8132A; } body.page-home .header-section-3 #header-sticky .main-menu nav ul li .submenu li a { color: #444444 !important; } body.page-home .header-section-3 #header-sticky .main-menu nav ul li .submenu li a:hover, body.page-home .header-section-3 #header-sticky .main-menu nav ul li .submenu li.active > a { color: #E8132A !important; } /* ── Mobile offcanvas (burger panel) spacing ── */ @media (max-width: 768px) { .fix-area .offcanvas__wrapper { padding-top: 20px; padding-left: 18px; padding-right: 18px; } .fix-area .offcanvas__top.mb-5 { margin-bottom: 1rem !important; } } /* ── Hero Section ── */ .onfoot-hero { background: url('../../bg-2.png') center center / cover no-repeat; min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 130px 0 80px; } .onfoot-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.08); pointer-events: none; } /* Homepage: headline sits under header (not vertically centered in full viewport) */ body.page-home .onfoot-hero { align-items: flex-start; padding-top: 168px; padding-bottom: 0; min-height: auto; } body.page-home .hero-section-3 { margin-bottom: 0; } body.page-home .onfoot-hero > .container > .row.align-items-center { align-items: flex-start !important; } body.page-home .hero-left-content { padding-top: 0; } /* Why Choose Us: stretch row so both columns share one height; image fills left to bottom (no gap under photo) */ body.page-home .about-wrapper-3 .about-content { margin-left: 0 !important; max-width: 100%; } body.page-home .about-wrapper-3 > .row { align-items: stretch !important; } body.page-home .about-wrapper-3 > .row > .col-lg-6:first-child { display: flex; flex-direction: column; min-height: 0; } body.page-home .about-wrapper-3 .about-image-3 { margin-left: 0 !important; margin-bottom: 0 !important; position: relative; flex: 1 1 auto; width: 100%; min-height: 200px; overflow: hidden; } body.page-home .about-wrapper-3 .about-image-3 img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } body.page-home .about-section.section-padding { padding-top: clamp(22px, 2.8vw, 36px); padding-bottom: clamp(22px, 2.8vw, 36px); } body.page-home .about-wrapper-3 .about-content .about-author { margin-top: 18px; } body.page-home .about-wrapper-3 .about-content .video-items { margin-top: 18px; } body.page-home .about-wrapper-3 .about-content .section-title { margin-bottom: 14px; } body.page-home .about-wrapper-3 .section-title .sub-title { margin-bottom: 10px; padding: 5px 18px; } body.page-home .about-wrapper-3 .section-title h2 { margin-bottom: 0; line-height: 1.18; } body.page-home .about-wrapper-3 .about-content > p { margin-top: 12px !important; margin-bottom: 0; } body.page-home .about-wrapper-3 .video-items .list li:not(:last-child) { margin-bottom: 5px; } body.page-home .about-wrapper-3 .video-items .list li { font-size: 16px; line-height: 1.35; } body.page-home .about-wrapper-3 .about-author .theme-btn { display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; box-sizing: border-box; min-height: 52px; padding: 14px 24px !important; } /* Headline */ .hero-big-title { font-size: clamp(30px, 3.8vw, 56px); font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -2px; margin-bottom: 24px; color: #1a1a1a; white-space: normal; display: flex; flex-direction: column; align-items: flex-start; } .hero-title-line1 { display: block; white-space: nowrap; line-height: 0.92; } .hero-title-line2 { display: block; white-space: nowrap; margin-top: 0.06em; line-height: 0.92; } .hero-big-title .line-white, .hero-big-title .line-red, .hero-big-title .line-outline { transition: none !important; } .hero-big-title .line-white { display: inline-block; margin-right: 0.28em; } .hero-big-title .line-red { color: #E8132A; display: inline-block; } .hero-big-title .line-outline { -webkit-text-stroke: 2px #1a1a1a; color: transparent; display: inline-block; } /* Subtext */ .hero-sub { font-size: 15px; color: #444; line-height: 1.7; max-width: 420px; margin-bottom: 32px; } /* Buttons */ .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; } .hero-btn-primary { background: #E8132A; color: #fff; padding: 14px 30px; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s; } .hero-btn-primary:hover { background: #c0101f; color: #fff; } .hero-btn-outline { background: rgba(255, 255, 255, 0.4); color: #1a1a1a; border: 1.5px solid rgba(0, 0, 0, 0.2); padding: 14px 30px; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; backdrop-filter: blur(4px); } .hero-btn-outline:hover { border-color: #E8132A; color: #E8132A; } /* Stats */ .hero-stats { display: flex; gap: 40px; flex-wrap: wrap; } .hero-stat .num { font-size: 32px; font-weight: 800; color: #1a1a1a; line-height: 1; } .hero-stat .num span { color: #E8132A; } .hero-stat .lbl { font-size: 12px; color: #666; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .hero-divider { width: 1px; background: rgba(0, 0, 0, 0.15); align-self: stretch; } /* Floating image animation */ @keyframes heroFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-18px); } 100% { transform: translateY(0px); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* Hero image card */ .hero-right { position: relative; height: 500px; } /* Homepage only: floating print mockup sits lower — clear space below sticky header/nav */ body.page-home .onfoot-hero .hero-right { padding-top: 72px; min-height: 340px; height: auto; } body.page-home .onfoot-hero .hero-card-main { top: 24px; } .hero-card { position: absolute; background: transparent; border: none; box-shadow: none; overflow: visible; } .hero-card-main { width: 420px; height: auto; top: 0; right: 20px; z-index: 2; animation: heroFloat 3.5s ease-in-out infinite; } .hero-card-main img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(232, 19, 42, 0.2)); } .hero-card-info { display: none; } .hero-card-back { display: none; } /* Slide nav dots */ .hero-slide-dots { display: flex; gap: 8px; margin-top: 20px; } .hero-dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.2); cursor: pointer; border: none; transition: all 0.3s; } .hero-dot.active { width: 28px; background: #E8132A; } /* Responsive */ @media (max-width: 992px) { .hero-right { display: none; } .hero-big-title { font-size: clamp(22px, 6vw, 40px); } body.page-home .hero-left-content { padding-top: 0; } } @media (max-width: 768px) { .onfoot-hero { padding: 120px 0 50px !important; min-height: auto; } .hero-stats { gap: 20px; } .hero-btns { flex-direction: column; } .hero-btn-primary, .hero-btn-outline { width: 100%; justify-content: center; } } @media (max-width: 768px) { .header-section-3 #header-sticky:not(.scrolled) { padding: 0 !important; } .header-section-3 #header-sticky.scrolled { padding: 6px 0 !important; } /* Size both logo variants: default uses .header-logo-2; scrolled/sticky uses .header-logo */ .header-section-3 #header-sticky .logo img, .header-section-3 #header-sticky .header-logo img, .header-section-3 #header-sticky .header-logo-2 img { height: auto !important; max-height: 48px !important; width: auto !important; max-width: min(280px, 62vw) !important; object-fit: contain !important; transform: scale(1.08); transform-origin: left center; } .header-section-3 #header-sticky .header-main { justify-content: space-between !important; } /* Logo inset from edge; room for icons on the right */ .header-section-3 #header-sticky .container-fluid { padding-left: 14px !important; padding-right: 10px !important; } .header-section-3 #header-sticky .header-left { margin-right: auto !important; flex: 1 1 auto; min-width: 0; padding-left: 0 !important; } } @media (max-width: 768px) { body.page-home .onfoot-hero { align-items: flex-start !important; padding-top: 120px !important; padding-bottom: 50px !important; } } /* Space for absolute header (red + white); tuned to match compact Portfolio stack */ .header-section-3 ~ .page-hero { padding-top: 142px !important; } @media (max-width: 992px) { .header-section-3 ~ .page-hero { padding-top: 132px !important; } } @media (max-width: 768px) { .header-section-3 ~ .page-hero { padding-top: 118px !important; } } /* Homepage: small bottom pad on hero + breathing room before services row */ body.page-home .hero-section-3, body.page-home .onfoot-hero { margin-bottom: 0 !important; } body.page-home .onfoot-hero { height: auto !important; min-height: 540px !important; padding-bottom: clamp(28px, 4vw, 48px) !important; } body.page-home .onfoot-hero .hero-right { min-height: 430px !important; } body.page-home .shop-catagories-section-3, body.page-home .shop-catagories-section-3.section-padding { margin-top: 0 !important; padding-top: clamp(48px, 7vw, 96px) !important; } .header-section-3 #header-sticky .logo img, .header-section-3 #header-sticky .header-logo img, .header-section-3 #header-sticky .header-logo-2 img { max-height: 52px; width: auto !important; height: auto !important; } @media (max-width: 768px) { .header-section-3 #header-sticky.scrolled { padding-top: 6px !important; padding-bottom: 6px !important; } .header-section-3 #header-sticky .header-main { min-height: 58px; } .header-section-3 #header-sticky .container-fluid { padding-left: 16px !important; padding-right: 14px !important; } .header-section-3 #header-sticky .logo img, .header-section-3 #header-sticky .header-logo img, .header-section-3 #header-sticky .header-logo-2 img { max-height: 48px !important; transform: none; } .header-section-3 #header-sticky .header-right { gap: 0; } .header-section-3 #header-sticky .sidebar__toggle { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.35); } .header-section-3 #header-sticky .sidebar__toggle i { font-size: 28px; line-height: 1; } body.page-home .onfoot-hero { min-height: 620px !important; padding: 118px 15px 34px !important; } body.page-home .hero-left-content { text-align: center; } body.page-home .hero-big-title { font-size: clamp(28px, 8vw, 34px); letter-spacing: -1px; line-height: 0.98; margin-bottom: 24px; align-items: center; } body.page-home .hero-big-title .line-outline { -webkit-text-stroke-width: 1.4px; } body.page-home .hero-sub { font-size: 15px; line-height: 1.65; max-width: 100%; margin-bottom: 28px; } body.page-home .hero-btns { gap: 12px; margin-bottom: 34px; align-items: center; } body.page-home .hero-btn-primary, body.page-home .hero-btn-outline { min-height: 48px; padding: 11px 20px; border-radius: 7px; font-size: 14px; width: min(100%, 380px); } body.page-home .hero-slide-dots { justify-content: center; margin-top: 8px !important; } }