/* Theme Name: Enfold Child Template: enfold Version: 1.0 Author: Kriesi */ /* ========================================================= FOX HOUND — VISUAL POLISH v1 P0.5 Scope: - spacing - typography - cards - hover - buttons - responsive - micro interaction - accessibility Header + Floating Nav intentionally preserved. ========================================================= */ /* ========================================================= DESIGN TOKENS ========================================================= */ :root { --fox-dark: #121116; --fox-dark-soft: #18161E; --fox-light: #F3F1F7; --fox-white: #FFFFFF; --fox-purple: #7048F5; --fox-electric: #8B68FF; --fox-lime: #C9FF3F; --fox-text: #242129; --fox-muted: #6E6876; --fox-soft-muted: #96919E; --fox-border: #DDD9E3; --fox-dark-border: rgba(255,255,255,.10); --fox-radius-sm: 10px; --fox-radius-md: 16px; --fox-radius-lg: 24px; --fox-shadow-soft: 0 12px 35px rgba(18,17,22,.08); --fox-shadow-dark: 0 20px 60px rgba(0,0,0,.20); --fox-transition: .28s cubic-bezier(.2,.7,.2,1); } /* ========================================================= GLOBAL ========================================================= */ html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { background: var(--fox-light); color: var(--fox-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #top { background: var(--fox-light); } #top .container { max-width: 1280px; } #top .fox-section { position: relative; overflow: hidden; } #top .fox-section .container { position: relative; z-index: 2; } /* ========================================================= SECTION SPACING ========================================================= */ #top #story, #top #categories, #top #hardware, #top #brands, #top #why, #top #lab, #top #dealers, #top #contact, #top #fox-footer { scroll-margin-top: 40px; } /* Give sections a stronger editorial rhythm */ #top #story .container, #top #categories .container, #top #hardware .container, #top #brands .container, #top #why .container, #top #lab .container, #top #dealers .container, #top #contact .container, #top #fox-footer .container { padding-top: 12px; padding-bottom: 12px; } /* ========================================================= EYEBROW SYSTEM ========================================================= */ #top .fox-eyebrow { display: inline-block; margin: 0 0 20px; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--fox-purple); transition: color var(--fox-transition), transform var(--fox-transition); } #top .fox-eyebrow:before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 9px; vertical-align: middle; background: currentColor; opacity: .65; } #top .fox-eyebrow-light { color: var(--fox-lime); } /* ========================================================= HEADINGS ========================================================= */ #top .fox-section-title { margin: 0 0 24px; } #top .fox-section-title .av-special-heading-tag { margin: 0; font-size: clamp(38px,4.7vw,68px); line-height: .93; font-weight: 800; letter-spacing: -.047em; text-transform: uppercase; color: inherit; text-wrap: balance; } #top .fox-card-title { margin: 0 0 14px; } #top .fox-card-title .av-special-heading-tag { margin: 0; font-size: clamp(18px,1.6vw,23px); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; } /* ========================================================= BODY COPY ========================================================= */ #top .fox-section-lede { max-width: 650px; margin: 0; font-size: 16px; line-height: 1.72; color: var(--fox-muted); } #top .fox-section-lede-light { color: #BEB9C8; } #top .fox-lead { margin: 0 0 22px; max-width: 630px; font-size: clamp(18px,1.8vw,22px); line-height: 1.54; color: var(--fox-text); text-wrap: balance; } #top .fox-light-copy { max-width: 420px; color: #BEB9C8; font-size: 14px; line-height: 1.72; } /* ========================================================= GENERAL BUTTON SYSTEM ========================================================= */ #top .avia-button { position: relative; border-radius: 999px !important; box-shadow: none !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase; transition: transform var(--fox-transition), background-color var(--fox-transition), color var(--fox-transition), border-color var(--fox-transition), box-shadow var(--fox-transition); } #top .avia-button:hover { transform: translateY(-2px); } #top .avia-button:focus-visible { outline: 2px solid var(--fox-lime) !important; outline-offset: 4px; } /* ========================================================= PRIMARY BUTTON ========================================================= */ #top .fox-button-primary { background: var(--fox-lime) !important; color: var(--fox-dark) !important; border: 1px solid var(--fox-lime) !important; box-shadow: 0 10px 25px rgba(201,255,63,.10) !important; } #top .fox-button-primary:hover { background: var(--fox-white) !important; border-color: var(--fox-white) !important; color: var(--fox-dark) !important; box-shadow: 0 12px 32px rgba(0,0,0,.10) !important; } /* ========================================================= SECONDARY BUTTON ========================================================= */ #top .fox-button-secondary { background: transparent !important; color: var(--fox-white) !important; border: 1px solid rgba(255,255,255,.34) !important; } #top .fox-button-secondary:hover { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.65) !important; color: var(--fox-white) !important; } /* ========================================================= TEXT BUTTON ========================================================= */ #top .fox-text-button, #top .fox-text-button-light { position: relative; background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; } #top .fox-text-button { color: var(--fox-dark) !important; } #top .fox-text-button-light { color: var(--fox-lime) !important; } #top .fox-text-button:before, #top .fox-text-button-light:before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; transform: scaleX(.35); transform-origin: left center; background: currentColor; opacity: .45; transition: transform var(--fox-transition), opacity var(--fox-transition); } #top .fox-text-button:hover:before, #top .fox-text-button-light:hover:before { transform: scaleX(1); opacity: 1; } /* ========================================================= HERO — KEEP EXISTING HERO 3 VISUAL SYSTEM ========================================================= */ #top #home.fox-hero-v3 { position: relative; min-height: 100vh !important; padding-top: 145px !important; background: radial-gradient( circle at 72% 42%, rgba(112,72,245,.34), transparent 26% ), radial-gradient( circle at 52% 88%, rgba(139,104,255,.09), transparent 34% ), var(--fox-dark) !important; color: var(--fox-white) !important; } #top #home.fox-hero-v3 .container { min-height: calc(100vh - 145px); display: flex; align-items: center; } #top #home .fox-hero-copy-v3 { position: relative; z-index: 10; padding-right: 25px; } #top #home .fox-hero-title-v3 { margin: 0 0 26px; animation: foxPolishTitleIn .90s cubic-bezier(.2,.7,.2,1) both; } #top #home .fox-hero-title-v3 .av-special-heading-tag { max-width: 860px; margin: 0; font-size: clamp(58px,7.2vw,108px); line-height: .84; font-weight: 800; letter-spacing: -.068em; text-transform: uppercase; color: var(--fox-white) !important; text-wrap: balance; } #top #home .fox-hero-lede-v3 { max-width: 570px; margin-bottom: 28px; font-size: 16px; line-height: 1.68; color: #C5C0CD; animation: foxPolishCopyIn .90s .15s cubic-bezier(.2,.7,.2,1) both; } #top #home .fox-hero-copy-v3 .avia-button-wrap { animation: foxPolishCopyIn .90s .28s cubic-bezier(.2,.7,.2,1) both; } #top #home .fox-hero-meta-v3 { margin-top: 18px; font-size: 9px; font-weight: 800; letter-spacing: .17em; color: #85808D; animation: foxPolishCopyIn .90s .40s cubic-bezier(.2,.7,.2,1) both; } /* Hero visual slot refinement */ #top #home .fox-stage-image-slot { transition: filter .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); } #top #home .fox-stage-image-slot:hover { filter: brightness(1.08) saturate(1.08); transform: translate(-50%,-53%) rotate(-3deg) scale(1.015); } /* ========================================================= STORY — EDITORIAL ========================================================= */ #top #story .fox-story-statement { padding-right: 50px; } #top #story .fox-story-content { padding-left: 35px; } #top #story .fox-story-content p { max-width: 620px; } #top #story .fox-story-content .avia-button-wrap { margin-top: 18px; } /* ========================================================= CATEGORY CARDS ========================================================= */ #top #categories { } #top .fox-category-card { position: relative; min-height: 300px; padding: 30px 27px; border-top: 1px solid var(--fox-border); border-right: 1px solid var(--fox-border); background: linear-gradient( 145deg, rgba(255,255,255,.18), rgba(255,255,255,0) ); transition: transform var(--fox-transition), background var(--fox-transition), border-color var(--fox-transition), box-shadow var(--fox-transition); } #top .fox-category-card:before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 2px; background: var(--fox-purple); transition: width .35s cubic-bezier(.2,.7,.2,1); } #top .fox-category-card:hover { background: var(--fox-white); border-color: #D4CEDD; transform: translateY(-7px); box-shadow: var(--fox-shadow-soft); } #top .fox-category-card:hover:before { width: 100%; } #top .fox-category-card-dark { background: linear-gradient( 145deg, #18161E, #121116 ); color: var(--fox-white); border-color: rgba(255,255,255,.10); } #top .fox-category-card-dark:before { background: var(--fox-lime); } #top .fox-card-number { margin-bottom: 48px; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--fox-purple); } #top .fox-card-number-light { color: var(--fox-lime); } #top .fox-category-card p { color: var(--fox-muted); font-size: 13px; line-height: 1.7; } #top .fox-category-card-dark p { color: #BEB9C8; } #top .fox-card-button { margin-top: 14px !important; padding: 8px 13px !important; } /* ========================================================= FEATURED HARDWARE ========================================================= */ #top #hardware { color: var(--fox-white) !important; } #top .fox-product-card { position: relative; min-height: 365px; padding: 20px; background: linear-gradient( 145deg, rgba(255,255,255,.025), rgba(255,255,255,.008) ); border: 1px solid rgba(255,255,255,.09); transition: transform var(--fox-transition), border-color var(--fox-transition), background var(--fox-transition), box-shadow var(--fox-transition); } #top .fox-product-card:after { content: ""; position: absolute; right: 18px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: rgba(201,255,63,.45); box-shadow: 0 0 0 0 rgba(201,255,63,.12); transition: box-shadow .4s ease, background .4s ease; } #top .fox-product-card:hover { transform: translateY(-7px); border-color: rgba(201,255,63,.28); background: linear-gradient( 145deg, rgba(112,72,245,.09), rgba(255,255,255,.02) ); box-shadow: 0 18px 45px rgba(0,0,0,.18); } #top .fox-product-card:hover:after { background: var(--fox-lime); box-shadow: 0 0 0 7px rgba(201,255,63,.07), 0 0 18px rgba(201,255,63,.35); } #top .fox-product-placeholder { min-height: 185px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient( 145deg, rgba(112,72,245,.12), rgba(255,255,255,.015) ); color: rgba(255,255,255,.26); font-size: 9px; font-weight: 800; letter-spacing: .14em; transition: background var(--fox-transition), color var(--fox-transition); } #top .fox-product-card:hover .fox-product-placeholder { background: linear-gradient( 145deg, rgba(112,72,245,.20), rgba(139,104,255,.07) ); color: rgba(255,255,255,.44); } /* ========================================================= BRAND GRID ========================================================= */ #top #brands { } #top .fox-brand-card { min-height: 145px; padding: 8px; } #top .fox-brand-placeholder { position: relative; min-height: 128px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--fox-border); background: linear-gradient( 145deg, rgba(255,255,255,.56), rgba(255,255,255,.16) ); color: #9B95A2; font-size: 9px; font-weight: 800; letter-spacing: .13em; transition: transform var(--fox-transition), border-color var(--fox-transition), background var(--fox-transition), box-shadow var(--fox-transition), color var(--fox-transition); } #top .fox-brand-card:hover .fox-brand-placeholder { transform: translateY(-6px); border-color: rgba(112,72,245,.35); background: var(--fox-white); color: var(--fox-purple); box-shadow: var(--fox-shadow-soft); } /* ========================================================= WHY FOX HOUND ========================================================= */ #top #why { color: var(--fox-white); } #top .fox-value-card { min-height: 255px; padding: 28px 22px; border-top: 1px solid rgba(255,255,255,.10); transition: background var(--fox-transition), transform var(--fox-transition), border-color var(--fox-transition); } #top .fox-value-card:hover { background: rgba(255,255,255,.025); transform: translateY(-4px); border-top-color: rgba(201,255,63,.30); } /* ========================================================= HARDWARE JOURNAL ========================================================= */ #top #lab { } #top .fox-article-card { position: relative; padding: 10px 20px 18px; border-top: 1px solid var(--fox-border); transition: transform var(--fox-transition); } #top .fox-article-card:hover { transform: translateY(-5px); } #top .fox-article-placeholder { min-height: 170px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; border: 1px solid var(--fox-border); background: linear-gradient( 145deg, rgba(112,72,245,.06), rgba(255,255,255,.35) ); color: #9B95A2; font-size: 9px; font-weight: 800; letter-spacing: .13em; transition: transform var(--fox-transition), border-color var(--fox-transition), background var(--fox-transition); } #top .fox-article-card:hover .fox-article-placeholder { transform: scale(1.015); border-color: rgba(112,72,245,.28); background: linear-gradient( 145deg, rgba(112,72,245,.10), rgba(255,255,255,.55) ); } /* ========================================================= DEALERS ========================================================= */ #top #dealers { color: var(--fox-white); } #top #dealers .fox-section-title .av-special-heading-tag { color: var(--fox-white) !important; } /* ========================================================= CONTACT ========================================================= */ #top #contact { color: var(--fox-white); } #top #contact .fox-section-title .av-special-heading-tag { color: var(--fox-white) !important; } #top #contact .fox-light-copy { color: rgba(255,255,255,.88); } /* ========================================================= FOOTER ========================================================= */ #top #fox-footer { color: var(--fox-white); border-top: 1px solid rgba(255,255,255,.06); } #top #fox-footer .fox-footer-title .av-special-heading-tag { color: var(--fox-white) !important; font-size: 27px; font-weight: 800; letter-spacing: .05em; } #top #fox-footer .fox-footer-heading { color: var(--fox-lime); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } #top #fox-footer .fox-footer-copy { color: #817C89; font-size: 11px; line-height: 1.75; } #top #fox-footer .fox-footer-link { display: block; padding: 4px 0 !important; background: transparent !important; border: 0 !important; color: var(--fox-white) !important; font-size: 9px !important; text-align: left; } #top #fox-footer .fox-footer-link:hover { color: var(--fox-lime) !important; } /* ========================================================= SECTION TRANSITIONS ========================================================= */ #top #story:after, #top #categories:after, #top #brands:after, #top #lab:after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(112,72,245,.10), transparent ); pointer-events: none; } /* ========================================================= MICRO INTERACTION — NUMBERS ========================================================= */ #top .fox-card-number { transition: transform var(--fox-transition), letter-spacing var(--fox-transition); } #top .fox-category-card:hover .fox-card-number, #top .fox-product-card:hover .fox-card-number, #top .fox-value-card:hover .fox-card-number, #top .fox-article-card:hover .fox-card-number { transform: translateX(3px); letter-spacing: .18em; } /* ========================================================= ACCESSIBILITY ========================================================= */ #top a:focus-visible, #top button:focus-visible { outline: 2px solid var(--fox-lime); outline-offset: 4px; } /* ========================================================= TABLET ========================================================= */ @media only screen and (max-width: 989px) { #top .container { max-width: 920px; } #top #home.fox-hero-v3 { padding-top: 130px !important; } #top #home.fox-hero-v3 .container { min-height: auto; display: block; padding-top: 55px; padding-bottom: 60px; } #top #home .fox-hero-copy-v3 { padding-right: 0; } #top #home .fox-hero-visual-v3 { min-height: 520px; margin-top: 25px; } #top #home .fox-hero-stage-v3 { height: 520px; } #top .fox-category-card { min-height: 270px; } #top .fox-product-card { min-height: 335px; } #top .fox-value-card { min-height: 230px; } #top .fox-article-card { padding-left: 14px; padding-right: 14px; } } /* ========================================================= MOBILE ========================================================= */ @media only screen and (max-width: 767px) { html { scroll-padding-top: 60px; } #top .fox-section .container { padding-left: 20px; padding-right: 20px; } #top .fox-section-title .av-special-heading-tag { font-size: clamp(34px,9vw,48px); line-height: .94; } #top .fox-section-lede { font-size: 15px; } #top .fox-lead { font-size: 18px; } #top #home.fox-hero-v3 { padding-top: 100px !important; } #top #home.fox-hero-v3 .container { padding-top: 40px; padding-bottom: 50px; } #top #home .fox-hero-title-v3 .av-special-heading-tag { font-size: clamp(40px,11vw,62px); line-height: .90; } #top #home .fox-hero-lede-v3 { font-size: 15px; } #top #home .fox-hero-visual-v3 { min-height: 390px; } #top #home .fox-hero-stage-v3 { height: 390px; } #top .fox-category-card { min-height: 235px; padding: 24px 21px; } #top .fox-product-card { min-height: 320px; } #top .fox-product-placeholder { min-height: 160px; } #top .fox-brand-card { min-height: 116px; } #top .fox-brand-placeholder { min-height: 104px; } #top .fox-value-card { min-height: 220px; } #top .fox-article-card { padding-left: 0; padding-right: 0; margin-bottom: 24px; } #top .fox-article-placeholder { min-height: 150px; } #top #story:after, #top #categories:after, #top #brands:after, #top #lab:after { left: 20px; right: 20px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #top *, #top *:before, #top *:after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================= LOAD ANIMATIONS ========================================================= */ @keyframes foxPolishTitleIn { from { opacity: 0; transform: translate3d(0,35px,0); } to { opacity: 1; transform: translate3d(0,0,0); } } @keyframes foxPolishCopyIn { from { opacity: 0; transform: translate3d(0,20px,0); } to { opacity: 1; transform: translate3d(0,0,0); } } /* ========================================================= FOX HOUND — FLOATING NAV v4 DARK GLASS / iOS-STYLE ========================================================= */ #fox-floating-nav { position: fixed !important; left: 50% !important; bottom: 24px !important; top: auto !important; right: auto !important; z-index: 2147483000 !important; display: flex !important; align-items: center !important; width: max-content !important; max-width: calc(100vw - 32px) !important; margin: 0 !important; padding: 8px 14px !important; transform: translateX(-50%) !important; /* ----------------------------------------------------- GLASS BACKGROUND ----------------------------------------------------- */ background: linear-gradient( 115deg, rgba(8, 10, 24, .46) 0%, rgba(20, 22, 46, .42) 45%, rgba(53, 27, 92, .40) 100% ) !important; border: 1px solid rgba(101, 126, 255, .88) !important; border-radius: 999px !important; /* iOS-like glass */ backdrop-filter: blur(18px) saturate(165%) !important; -webkit-backdrop-filter: blur(18px) saturate(165%) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, .30), 0 0 0 1px rgba(91, 124, 255, .10), 0 0 24px rgba(91, 124, 255, .15), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.025) !important; overflow: hidden !important; isolation: isolate !important; } /* ========================================================= GLASS LIGHT REFLECTION ========================================================= */ #fox-floating-nav::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: linear-gradient( 120deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.025) 32%, transparent 54%, rgba(139,104,255,.08) 100% ) !important; pointer-events: none !important; z-index: 0 !important; } /* ========================================================= NAV ITEMS ========================================================= */ #fox-floating-nav a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 34px !important; margin: 0 !important; padding: 0 13px !important; color: rgba(226,231,247,.78) !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .075em !important; text-decoration: none !important; text-transform: uppercase !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; transition: color .18s ease, transform .18s ease, text-shadow .18s ease !important; z-index: 2 !important; } /* ========================================================= VERTICAL SEPARATORS ========================================================= */ #fox-floating-nav a:not(:last-child)::before { content: "|" !important; position: absolute !important; right: -1px !important; top: 50% !important; transform: translateY(-50%) !important; color: rgba(112,132,210,.38) !important; font-size: 10px !important; font-weight: 400 !important; } /* ========================================================= HOVER ========================================================= */ #fox-floating-nav a:hover { color: #FFFFFF !important; transform: translateY(-1px) !important; text-shadow: 0 0 10px rgba(108,137,255,.40) !important; } /* ========================================================= ACTIVE ========================================================= */ #fox-floating-nav a.is-active { color: #FFFFFF !important; text-shadow: 0 0 12px rgba(110,135,255,.32) !important; } /* ========================================================= ACTIVE INDICATOR ========================================================= */ #fox-floating-nav a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 3px !important; width: 0 !important; height: 2px !important; transform: translateX(-50%) !important; background: #C9FF3F !important; border-radius: 999px !important; box-shadow: 0 0 8px rgba(201,255,63,.50) !important; opacity: 0 !important; transition: width .18s ease, opacity .18s ease !important; } #fox-floating-nav a:hover::after { width: 14px !important; opacity: .75 !important; } #fox-floating-nav a.is-active::after { width: 18px !important; opacity: 1 !important; } /* ========================================================= FOCUS ========================================================= */ #fox-floating-nav a:focus-visible { outline: 1px solid #7C96FF !important; outline-offset: 4px !important; } /* ========================================================= TABLET ========================================================= */ @media only screen and (max-width: 989px) { #fox-floating-nav { bottom: 18px !important; max-width: calc(100vw - 24px) !important; padding: 7px 10px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } #fox-floating-nav::-webkit-scrollbar { display: none !important; } #fox-floating-nav a { flex: 0 0 auto !important; min-height: 32px !important; padding: 0 10px !important; font-size: 8px !important; } } /* ========================================================= MOBILE ========================================================= */ @media only screen and (max-width: 767px) { #fox-floating-nav { bottom: 10px !important; max-width: calc(100vw - 16px) !important; padding: 6px 8px !important; background: linear-gradient( 115deg, rgba(8,10,24,.50), rgba(35,20,66,.44) ) !important; backdrop-filter: blur(16px) saturate(155%) !important; -webkit-backdrop-filter: blur(16px) saturate(155%) !important; } #fox-floating-nav a { min-height: 29px !important; padding: 0 8px !important; font-size: 7px !important; letter-spacing: .045em !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #fox-floating-nav, #fox-floating-nav a, #fox-floating-nav a::after { transition: none !important; } } /* ========================================================= FOX HOUND — HERO MICRO POLISH v2 Static composition refinement ========================================================= */ /* --------------------------------------------------------- HERO GLOBAL DEPTH --------------------------------------------------------- */ #top #home.fox-hero-v3 { position: relative !important; isolation: isolate !important; } /* Subtle cinematic darkening toward the hardware side. Keeps the left typography readable without flattening image. */ #top #home.fox-hero-v3::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient( 90deg, rgba(8, 7, 14, .03) 0%, rgba(8, 7, 14, .05) 42%, rgba(8, 7, 14, .16) 72%, rgba(8, 7, 14, .26) 100% ) !important; } /* --------------------------------------------------------- HERO CONTAINER LAYER --------------------------------------------------------- */ #top #home.fox-hero-v3 .container { position: relative !important; z-index: 5 !important; } /* --------------------------------------------------------- HERO COPY — REFINED SCALE --------------------------------------------------------- */ #top #home .fox-hero-copy-v3 { position: relative !important; z-index: 10 !important; padding-right: 38px !important; } #top #home .fox-hero-title-v3 .av-special-heading-tag { max-width: 820px !important; letter-spacing: -.058em !important; text-shadow: 0 4px 24px rgba(0,0,0,.18) !important; } #top #home .fox-hero-lede-v3 { max-width: 560px !important; color: rgba(245,243,248,.82) !important; text-shadow: 0 2px 14px rgba(0,0,0,.35) !important; } /* --------------------------------------------------------- HERO META / SECONDARY VISUAL COPY --------------------------------------------------------- */ #top #home .fox-hero-visual-v3 { position: relative !important; z-index: 6 !important; } /* Text blocks sitting over the hardware visual */ #top #home .fox-hero-visual-v3 .avia_textblock { color: rgba(231,234,246,.74) !important; font-size: 10px !important; line-height: 1.55 !important; letter-spacing: .06em !important; text-shadow: 0 2px 12px rgba(0,0,0,.72) !important; } /* Headline-like visual labels */ #top #home .fox-hero-visual-v3 .avia_textblock strong, #top #home .fox-hero-visual-v3 .avia_textblock b { color: #FFFFFF !important; letter-spacing: .10em !important; text-shadow: 0 2px 16px rgba(0,0,0,.82), 0 0 12px rgba(112,72,245,.14) !important; } /* --------------------------------------------------------- "2007 — SEKARANG" --------------------------------------------------------- */ #top #home .fox-hero-visual-v3 .fox-hero-meta-v3 { color: var(--fox-lime) !important; text-shadow: 0 0 14px rgba(201,255,63,.16) !important; } /* --------------------------------------------------------- STAGE / HARDWARE --------------------------------------------------------- */ #top #home .fox-hero-stage-v3, #top #home .fox-stage-image-slot { position: relative !important; z-index: 3 !important; } /* Slightly soften the visual edge where hardware meets copy */ #top #home .fox-stage-image-slot { filter: saturate(1.04) contrast(1.02) !important; } /* --------------------------------------------------------- DESKTOP BALANCE --------------------------------------------------------- */ @media only screen and (min-width: 990px) { #top #home .fox-hero-copy-v3 { transform: translateY(4px); } #top #home .fox-hero-visual-v3 { transform: translateY(2px); } } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media only screen and (max-width: 989px) { #top #home.fox-hero-v3::after { background: linear-gradient( 180deg, rgba(8,7,14,.06) 0%, rgba(8,7,14,.12) 46%, rgba(8,7,14,.24) 100% ) !important; } #top #home .fox-hero-copy-v3 { padding-right: 0 !important; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media only screen and (max-width: 767px) { #top #home.fox-hero-v3::after { background: linear-gradient( 180deg, rgba(8,7,14,.08) 0%, rgba(8,7,14,.06) 38%, rgba(8,7,14,.20) 100% ) !important; } #top #home .fox-hero-title-v3 .av-special-heading-tag { letter-spacing: -.045em !important; text-shadow: 0 3px 18px rgba(0,0,0,.28) !important; } #top #home .fox-hero-lede-v3 { color: rgba(245,243,248,.86) !important; } /* Secondary visual metadata is unnecessary on small screens */ #top #home .fox-hero-visual-v3 .avia_textblock { display: none !important; } #top #home .fox-hero-visual-v3 .fox-hero-meta-v3 { display: none !important; } #top #home .fox-hero-stage-v3, #top #home .fox-stage-image-slot { transform: none !important; } } /* ========================================================= FOX HOUND — HERO BACKGROUND VIDEO Full Cover / No Side Bars ========================================================= */ #top #home.fox-hero-v3 .av-section-video-bg, #top #home.fox-hero-v3 .av-section-video-bg .mejs-container { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; overflow: hidden !important; } /* Actual background video */ #top #home.fox-hero-v3 .av-section-video-bg video { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; } /* Prevent Enfold MediaElement wrapper from creating an undersized video area */ #top #home.fox-hero-v3 .av-section-video-bg .mejs-container, #top #home.fox-hero-v3 .av-section-video-bg .mejs-inner, #top #home.fox-hero-v3 .av-section-video-bg .mejs-mediaelement { width: 100% !important; height: 100% !important; } /* --------------------------------------------------------- CONTENT ABOVE VFX --------------------------------------------------------- */ #top #home.fox-hero-v3 > .container, #top #home .fox-hero-copy-v3, #top #home .fox-hero-visual-v3, #top .fox-custom-header { position: relative !important; z-index: 10 !important; } /* Floating nav remains above the Hero VFX. */ #top #fox-floating-nav { z-index: 2147483000 !important; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media only screen and (max-width: 989px) { #top #home .fox-hero-vfx .fox-smoke-left { inset: -10% -20% !important; width: 140% !important; height: 120% !important; opacity: .18 !important; } #top #home .fox-hero-vfx .fox-smoke-floor { left: -18% !important; width: 136% !important; height: 38% !important; opacity: .15 !important; } #top #home .fox-hero-vfx .fox-light-purple { opacity: .09 !important; } #top #home .fox-hero-vfx .fox-light-lime { opacity: .05 !important; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media only screen and (max-width: 767px) { #top #home .fox-hero-vfx .fox-smoke-left { inset: -6% -24% !important; width: 148% !important; height: 114% !important; opacity: .13 !important; animation-duration: 6.2s !important; } #top #home .fox-hero-vfx .fox-smoke-floor { left: -24% !important; width: 148% !important; height: 30% !important; opacity: .10 !important; animation-duration: 6.8s !important; } #top #home .fox-hero-vfx .fox-light-purple { opacity: .055 !important; animation-duration: 6.2s !important; } #top #home .fox-hero-vfx .fox-light-lime { opacity: .03 !important; animation-duration: 6.8s !important; } } /* --------------------------------------------------------- REDUCED MOTION --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #top #home .fox-hero-vfx img { animation: none !important; transition: none !important; } } /* FOXHOUND — HERO VIDEO = EXACT 16:9 */ #top #home.fox-hero-v3 { height: 56.25vw !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } #top #home.fox-hero-v3 .avia-slideshow { height: 56.25vw !important; min-height: 0 !important; } #top #home.fox-hero-v3 .avia-slideshow-inner { height: 56.25vw !important; } #top #home.fox-hero-v3 .container { height: 100% !important; min-height: 0 !important; } /* ========================================================= FOX HOUND — MOBILE HERO FIX v1 Scope: <= 767px ONLY Desktop Hero LOCKED ========================================================= */ @media only screen and (max-width: 767px) { /* ----------------------------------------------------- 1. HERO FRAME Keep video at 16:9. ----------------------------------------------------- */ #top #home.fox-hero-v3 { height: 56.25vw !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; position: relative !important; } /* ----------------------------------------------------- 2. VIDEO Let Enfold fill the exact Hero frame. ----------------------------------------------------- */ #top #home.fox-hero-v3 .avia-slideshow, #top #home.fox-hero-v3 .avia-slideshow-inner, #top #home.fox-hero-v3 .avia-slideshow-slide, #top #home.fox-hero-v3 .avia-slide-wrap { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; } #top #home.fox-hero-v3 .av-section-video-bg, #top #home.fox-hero-v3 .av-section-video-bg .mejs-container, #top #home.fox-hero-v3 .av-section-video-bg .mejs-inner, #top #home.fox-hero-v3 .av-section-video-bg .mejs-mediaelement { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; } #top #home.fox-hero-v3 .av-section-video-bg video { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } /* ----------------------------------------------------- 3. CONTENT CONTAINER Stop Enfold from creating a tall content section. ----------------------------------------------------- */ #top #home.fox-hero-v3 > .container { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; display: block !important; padding: 0 20px !important; margin: 0 !important; box-sizing: border-box !important; z-index: 10 !important; } /* ----------------------------------------------------- 4. CONTENT AREA Actual HTML structure from current Hero. ----------------------------------------------------- */ #top #home.fox-hero-v3 .entry-content-wrapper { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- 5. LEFT HERO COLUMN Actual current Enfold .av_one_half column. ----------------------------------------------------- */ #top #home.fox-hero-v3 .entry-content-wrapper > .flex_column.av_one_half:first-child { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; display: flex !important; flex-direction: column !important; justify-content: center !important; box-sizing: border-box !important; } /* ----------------------------------------------------- 6. RIGHT VISUAL COLUMN Desktop visual metadata is removed on mobile. ----------------------------------------------------- */ #top #home.fox-hero-v3 .entry-content-wrapper > .flex_column.av_one_half:last-child { display: none !important; } /* ----------------------------------------------------- 7. EYEBROW ----------------------------------------------------- */ #top #home.fox-hero-v3 .fox-eyebrow { margin: 0 0 10px !important; font-size: 8px !important; line-height: 1.2 !important; letter-spacing: .16em !important; } /* ----------------------------------------------------- 8. ACTUAL H1 IMPORTANT: This targets the real HTML structure. ----------------------------------------------------- */ #top #home.fox-hero-v3 .av-special-heading-h1 .av-special-heading-tag { max-width: 100% !important; margin: 0 0 10px !important; font-size: clamp(27px, 7.8vw, 34px) !important; line-height: .92 !important; letter-spacing: -.045em !important; text-wrap: balance !important; color: #FFFFFF !important; text-shadow: 0 3px 18px rgba(0,0,0,.42) !important; } /* ----------------------------------------------------- 9. HERO DESCRIPTION ----------------------------------------------------- */ #top #home.fox-hero-v3 .fox-hero-lede-v3 { max-width: 310px !important; margin: 0 0 12px !important; font-size: 10px !important; line-height: 1.42 !important; color: rgba(245,243,248,.88) !important; } /* ----------------------------------------------------- 10. BUTTONS Keep them compact on mobile. ----------------------------------------------------- */ #top #home.fox-hero-v3 .avia-button-wrap { margin: 3px 4px 3px 0 !important; display: inline-block !important; } #top #home.fox-hero-v3 .avia-button { min-height: 28px !important; padding: 0 12px !important; font-size: 7px !important; letter-spacing: .06em !important; } /* ----------------------------------------------------- 11. META ----------------------------------------------------- */ #top #home.fox-hero-v3 .fox-hero-meta-v3 { margin-top: 7px !important; font-size: 6px !important; letter-spacing: .13em !important; } /* ----------------------------------------------------- 12. REMOVE SECONDARY HERO VISUAL CONTENT ----------------------------------------------------- */ #top #home.fox-hero-v3 .fox-hero-stage-v3 { display: none !important; } /* ----------------------------------------------------- 13. DARK OVERLAY FOR TEXT LEGIBILITY ----------------------------------------------------- */ #top #home.fox-hero-v3::after { background: linear-gradient( 90deg, rgba(8,7,14,.48) 0%, rgba(8,7,14,.22) 58%, rgba(8,7,14,.08) 100% ) !important; z-index: 2 !important; } /* ----------------------------------------------------- 14. VFX STAYS BEHIND CONTENT ----------------------------------------------------- */ #top #home.fox-hero-v3 .fox-hero-vfx { z-index: 3 !important; } #top #home.fox-hero-v3 > .container { z-index: 10 !important; } } /* ========================================================= FOX HOUND — MOBILE HERO COMPOSITION v2 Fix actual Hero content at 390px Video remains EXACT 16:9 ========================================================= */ @media only screen and (max-width: 767px) { /* ----------------------------------------------------- HERO CONTENT — COMPACT MOBILE COMPOSITION ----------------------------------------------------- */ #top #home.fox-hero-v3 > .container { padding-left: 20px !important; padding-right: 20px !important; } #top #home.fox-hero-v3 .entry-content-wrapper { align-items: center !important; justify-content: center !important; } #top #home.fox-hero-v3 .entry-content-wrapper > .flex_column.av_one_half:first-child { width: 100% !important; justify-content: center !important; align-items: flex-start !important; padding: 0 !important; margin: 0 !important; } /* ----------------------------------------------------- EYEBROW ----------------------------------------------------- */ #top #home.fox-hero-v3 .fox-eyebrow { margin: 0 0 7px !important; font-size: 7px !important; line-height: 1 !important; letter-spacing: .15em !important; } /* ----------------------------------------------------- ACTUAL H1 Make headline fit inside 16:9 frame. ----------------------------------------------------- */ #top #home.fox-hero-v3 .av-special-heading-h1 { width: 100% !important; margin: 0 0 9px !important; padding: 0 !important; } #top #home.fox-hero-v3 .av-special-heading-h1 .av-special-heading-tag { width: 100% !important; max-width: 315px !important; margin: 0 !important; padding: 0 !important; font-size: clamp(22px, 6.4vw, 26px) !important; line-height: .90 !important; letter-spacing: -.045em !important; text-wrap: balance !important; } /* ----------------------------------------------------- DESCRIPTION Compact but KEEP it visible. ----------------------------------------------------- */ #top #home.fox-hero-v3 .fox-hero-lede-v3 { max-width: 285px !important; margin: 0 0 9px !important; font-size: 8px !important; line-height: 1.35 !important; } /* ----------------------------------------------------- BUTTON ROW ----------------------------------------------------- */ #top #home.fox-hero-v3 .avia-button-wrap { display: inline-block !important; width: auto !important; margin: 0 4px 0 0 !important; vertical-align: middle !important; } #top #home.fox-hero-v3 .avia-button { min-height: 24px !important; height: 24px !important; padding: 0 10px !important; font-size: 6px !important; letter-spacing: .055em !important; line-height: 24px !important; } /* ----------------------------------------------------- META ----------------------------------------------------- */ #top #home.fox-hero-v3 .fox-hero-meta-v3 { margin-top: 6px !important; font-size: 5.5px !important; line-height: 1.2 !important; letter-spacing: .12em !important; } /* ----------------------------------------------------- SECONDARY RIGHT-SIDE VISUAL Already unnecessary on mobile. ----------------------------------------------------- */ #top #home.fox-hero-v3 .entry-content-wrapper > .flex_column.av_one_half:last-child { display: none !important; } /* ----------------------------------------------------- REMOVE OLD MOBILE HEIGHT LOGIC ----------------------------------------------------- */ #top #home.fox-hero-v3 .fox-hero-visual-v3, #top #home.fox-hero-v3 .fox-hero-stage-v3 { min-height: 0 !important; height: auto !important; } /* ----------------------------------------------------- KEEP VIDEO BEHIND EVERYTHING ----------------------------------------------------- */ #top #home.fox-hero-v3 .avia-slideshow, #top #home.fox-hero-v3 .avia-slideshow-inner { z-index: 1 !important; } #top #home.fox-hero-v3 > .container { z-index: 10 !important; } } /* ========================================================= FOX HOUND — MOBILE HEADER CLEAN v1 Desktop untouched Mobile: LOGO ↓ JURNAL / MEREK / PRODUK KONTAK / DEALER ========================================================= */ @media only screen and (max-width: 767px) { /* HEADER SECTION */ #top #fox-header { height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* HEADER CONTAINER */ #top #fox-header > .container { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 14px 20px 16px !important; box-sizing: border-box !important; } /* MAIN HEADER ROW → STACK */ #top #fox-header .entry-content-wrapper { width: 100% !important; max-width: 350px !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; box-sizing: border-box !important; } /* ===================================================== LOGO COLUMN ===================================================== */ #top #fox-header .entry-content-wrapper > .av_one_third { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* LOGO IMAGE */ #top #fox-header .av_one_third .avia-image-container { width: 150px !important; max-width: 150px !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; } #top #fox-header .av_one_third .avia-image-container-inner { width: 100% !important; margin: 0 !important; padding: 0 !important; } #top #fox-header .av_one_third .avia-image-container img { display: block !important; width: 150px !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; } /* ===================================================== NAV COLUMN ===================================================== */ #top #fox-header .entry-content-wrapper > .av_two_third { width: 100% !important; max-width: 330px !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; float: none !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: 27px 27px !important; column-gap: 5px !important; row-gap: 5px !important; align-items: center !important; justify-items: center !important; box-sizing: border-box !important; } /* ===================================================== RESET ENFOLD COLUMN SPACING ===================================================== */ #top #fox-header .av_two_third .flex_column, #top #fox-header .av_two_third .avia-button-wrap { width: auto !important; height: 27px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* ===================================================== BUTTON ORDER Actual current DOM appears to be: 1 PRODUK 2 MEREK 3 JURNAL 4 DEALER 5 KONTAK Desired: JURNAL | MEREK | PRODUK KONTAK | DEALER ===================================================== */ #top #fox-header .av_two_third .avia-button-wrap:nth-child(1) { grid-column: 3 !important; grid-row: 1 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(3) { grid-column: 1 !important; grid-row: 1 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(5) { grid-column: 1 !important; grid-row: 2 !important; } /* ===================================================== BUTTON ===================================================== */ #top #fox-header .av_two_third .avia-button { display: flex !important; width: 100% !important; max-width: 96px !important; height: 27px !important; min-height: 27px !important; margin: 0 auto !important; padding: 0 8px !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; font-size: 7px !important; line-height: 27px !important; white-space: nowrap !important; } /* REMOVE DEFAULT TEXT SPACING */ #top #fox-header p { margin: 0 !important; padding: 0 !important; } } /* ========================================================= FOX HOUND — DESKTOP HEADER LOGO LEFT / NAV RIGHT ========================================================= */ @media only screen and (min-width: 990px) { #top #fox-header { position: relative !important; width: 100% !important; min-height: 80px !important; } #top #fox-header .entry-content-wrapper { position: relative !important; width: 100% !important; max-width: none !important; min-height: 80px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } /* ================================================ LOGO DESKTOP Sejajar dengan content utama halaman. ================================================ */ #top #fox-header .entry-content-wrapper > .av_one_third { position: absolute !important; top: 50% !important; /* ± kiri content utama */ left: calc(50% - 540px) !important; width: 220px !important; max-width: 220px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; z-index: 20 !important; } #top #fox-header .av_one_third .avia-image-container { width: 220px !important; max-width: 220px !important; margin: 0 !important; padding: 0 !important; } #top #fox-header .av_one_third .avia-image-container img { display: block !important; width: 220px !important; max-width: 220px !important; height: auto !important; margin: 0 !important; } /* ================================================ NAV DESKTOP — KANAN ================================================ */ #top #fox-header .entry-content-wrapper > .av_two_third { width: auto !important; max-width: none !important; margin: 0 24px 0 auto !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 5px !important; z-index: 30 !important; } /* JURNAL / MEREK / PRODUK / KONTAK / DEALER */ #top #fox-header .av_two_third .avia-button-wrap:nth-child(1) { order: 3 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(2) { order: 2 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(3) { order: 1 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(4) { order: 5 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(5) { order: 4 !important; } } /* FOX HOUND — DESKTOP LOGO +20px DOWN */ @media only screen and (min-width: 990px) { #top #fox-header .entry-content-wrapper > .av_one_third { top: calc(50% + 20px) !important; transform: translateY(-50%) !important; } } @media only screen and (min-width: 990px) { #top #fox-header .entry-content-wrapper > .av_two_third { transform: translateY(10px) !important; } } /* ========================================================= FOX HOUND — HEADER HEIGHT / WHITE SPACE FINAL FIX 768px+ = DESKTOP / TABLET DESKTOP 767px- = MOBILE, TIDAK DISENTUH ========================================================= */ @media only screen and (min-width: 768px) { /* ----------------------------------------------------- HEADER WHITE AREA ----------------------------------------------------- */ #top #fox-header { height: 80px !important; min-height: 80px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } #top #fox-header .container { height: 80px !important; min-height: 80px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } #top #fox-header .entry-content-wrapper { position: relative !important; width: 100% !important; max-width: none !important; height: 80px !important; min-height: 80px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ----------------------------------------------------- LOGO ----------------------------------------------------- */ #top #fox-header .entry-content-wrapper > .av_one_third { position: absolute !important; top: calc(50% + 20px) !important; /* * Align logo with main content. * Prevent it from disappearing at narrower desktop widths. */ left: max( 32px, calc(50% - 390px) ) !important; width: 220px !important; max-width: 220px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; z-index: 20 !important; } #top #fox-header .av_one_third .avia-image-container { width: 220px !important; max-width: 220px !important; margin: 0 !important; padding: 0 !important; } #top #fox-header .av_one_third .avia-image-container img { display: block !important; width: 220px !important; max-width: 220px !important; height: auto !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- TOP NAV ----------------------------------------------------- */ #top #fox-header .entry-content-wrapper > .av_two_third { position: absolute !important; top: calc(50% + 10px) !important; right: 24px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 5px !important; transform: translateY(-50%) !important; box-sizing: border-box !important; z-index: 30 !important; } /* ----------------------------------------------------- NAV ORDER DOM: PRODUK / MEREK / JURNAL / DEALER / KONTAK DISPLAY: JURNAL / MEREK / PRODUK / KONTAK / DEALER ----------------------------------------------------- */ #top #fox-header .av_two_third .avia-button-wrap:nth-child(1) { order: 3 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(2) { order: 2 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(3) { order: 1 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(4) { order: 5 !important; } #top #fox-header .av_two_third .avia-button-wrap:nth-child(5) { order: 4 !important; } } /* ========================================================= MOBILE — DO NOT TOUCH Existing ≤767px rules remain authoritative. ========================================================= */ @media only screen and (max-width: 767px) { #top #fox-header { height: auto !important; min-height: 0 !important; } } /* ========================================================= FOX HOUND — DESKTOP LOGO FINAL POSITION ========================================================= */ @media only screen and (min-width: 768px) { #top #fox-header { height: 80px !important; min-height: 80px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } #top #fox-header .entry-content-wrapper { height: 80px !important; min-height: 80px !important; margin: 0 !important; padding: 0 !important; position: relative !important; box-sizing: border-box !important; } /* LOGO */ #top #fox-header .entry-content-wrapper > .av_one_third { position: absolute !important; top: 20px !important; left: max(32px, calc(50% - 390px)) !important; width: 180px !important; max-width: 180px !important; margin: 0 !important; padding: 0 !important; transform: none !important; display: block !important; z-index: 20 !important; box-sizing: border-box !important; } #top #fox-header .av_one_third .avia-image-container { width: 180px !important; max-width: 180px !important; margin: 0 !important; padding: 0 !important; } #top #fox-header .av_one_third .avia-image-container img { display: block !important; width: 180px !important; max-width: 180px !important; height: auto !important; margin: 0 !important; padding: 0 !important; } /* NAV */ #top #fox-header .entry-content-wrapper > .av_two_third { position: absolute !important; top: 50% !important; right: 24px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 5px !important; z-index: 30 !important; } } /* MOBILE TETAP PAKAI RULE MOBILE */ @media only screen and (max-width: 767px) { #top #fox-header { height: auto !important; min-height: 0 !important; } } @media only screen and (min-width: 768px) { #top #fox-header .entry-content-wrapper > .av_one_third { width: clamp(130px, 11vw, 170px) !important; max-width: clamp(130px, 11vw, 170px) !important; top: 10px !important; left: max(32px, calc(50% - 390px)) !important; } #top #fox-header .av_one_third .avia-image-container, #top #fox-header .av_one_third .avia-image-container img { width: 100% !important; max-width: 100% !important; height: auto !important; } } /* ========================================================= FOXHOUND HERO V3 — FINAL RESPONSIVE POSITIONING DESKTOP / TABLET / MOBILE ========================================================= */ /* ========================================================= DESKTOP — 1101px+ HERO 16:9 + HEADER OVERLAY ========================================================= */ @media only screen and (min-width: 1101px) { /* HERO */ #top #home.fox-hero-v3 { height: 56.25vw !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } #top #home.fox-hero-v3 .container { position: relative !important; height: 100% !important; } /* RESET POSISI KONTEN */ #top #home.fox-hero-v3 .container .av_one_half:first-child, #top #home.fox-hero-v3 .container .av_one_third:first-child { transform: none !important; margin-top: 0 !important; } /* HEADLINE */ #top #home.fox-hero-v3 h1, #top #home.fox-hero-v3 h2 { font-size: clamp(38px, 3vw, 48px) !important; line-height: 1.03 !important; max-width: 540px !important; margin-bottom: 14px !important; } /* DESCRIPTION */ #top #home.fox-hero-v3 p { font-size: clamp(15px, 1.1vw, 18px) !important; line-height: 1.45 !important; max-width: 540px !important; } /* CTA */ #top #home.fox-hero-v3 .avia-button-wrap { margin-top: 16px !important; } /* ===================================================== HEADER OVER HERO ===================================================== */ #top #fox-header { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 80px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; z-index: 100 !important; box-shadow: none !important; border: 0 !important; } #top #fox-header .container, #top #fox-header .content, #top #fox-header .entry-content-wrapper { background: transparent !important; } /* ===================================================== LOGO DESKTOP ===================================================== */ #top #fox-header .entry-content-wrapper > .av_one_third { position: absolute !important; /* align dengan grid utama hero */ left: max(32px, calc(50% - 540px)) !important; /* jarak atas */ top: 10px !important; /* ukuran responsif */ width: clamp(130px, 11vw, 170px) !important; max-width: clamp(130px, 11vw, 170px) !important; margin: 0 !important; padding: 0 !important; } #top #fox-header .av_one_third .avia-image-container, #top #fox-header .av_one_third .avia-image-container img { width: 100% !important; max-width: 100% !important; height: auto !important; } } /* ========================================================= TABLET / SMALL LAPTOP — 768–1100px ========================================================= */ @media only screen and (min-width: 768px) and (max-width: 1100px) { /* HERO TETAP 16:9 */ #top #home.fox-hero-v3 { height: 56.25vw !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } #top #home.fox-hero-v3 .container { position: relative !important; height: 100% !important; /* jangan dorong konten ke atas/bawah */ padding-top: 0 !important; padding-bottom: 0 !important; } /* RESET POSISI */ #top #home.fox-hero-v3 .container .av_one_half:first-child, #top #home.fox-hero-v3 .container .av_one_third:first-child { transform: none !important; margin-top: 0 !important; } /* HEADLINE */ #top #home.fox-hero-v3 h1, #top #home.fox-hero-v3 h2 { font-size: clamp(34px, 4vw, 42px) !important; line-height: 1.03 !important; max-width: 440px !important; margin-bottom: 12px !important; } /* DESCRIPTION */ #top #home.fox-hero-v3 p { font-size: 15px !important; line-height: 1.45 !important; max-width: 440px !important; } /* CTA */ #top #home.fox-hero-v3 .avia-button-wrap { margin-top: 14px !important; } /* LOGO TABLET */ #top #fox-header .entry-content-wrapper > .av_one_third { position: absolute !important; top: 10px !important; left: 32px !important; width: clamp(120px, 14vw, 150px) !important; max-width: clamp(120px, 14vw, 150px) !important; margin: 0 !important; padding: 0 !important; } #top #fox-header .av_one_third .avia-image-container, #top #fox-header .av_one_third .avia-image-container img { width: 100% !important; max-width: 100% !important; height: auto !important; } } /* ========================================================= MOBILE — BELOW 768px JANGAN GANGGU LAYOUT MOBILE YANG SUDAH STABIL ========================================================= */ @media only screen and (max-width: 767px) { #top #home.fox-hero-v3 { height: auto !important; min-height: 0 !important; } #top #home.fox-hero-v3 .container { padding-top: 0 !important; padding-bottom: 0 !important; } } /* ========================================================= FOX HOUND — POST HERO FINAL POLISH SCOPE: STORY → CATEGORIES → HARDWARE → BRANDS → WHY → LAB → DEALERS → CONTACT → FOOTER HEADER + HERO: LOCKED / UNTOUCHED ========================================================= */ /* ========================================================= 01. SECTION CONTENT RHYTHM ========================================================= */ #top #story .content, #top #categories .content, #top #hardware .content, #top #brands .content, #top #why .content, #top #lab .content, #top #dealers .content, #top #contact .content, #top #fox-footer .content { padding-top: 64px !important; padding-bottom: 64px !important; } /* ========================================================= 02. STORY ========================================================= */ #top #story .fox-story-statement { padding-right: 60px !important; } #top #story .fox-story-content { padding-left: 40px !important; } #top #story .fox-story-statement .fox-eyebrow, #top #story .fox-story-content .fox-eyebrow { margin-bottom: 16px; } #top #story .fox-story-statement .av-special-heading-tag { font-size: clamp(30px, 3vw, 46px) !important; line-height: .96 !important; letter-spacing: -.045em !important; } #top #story .fox-story-content p { max-width: 560px !important; font-size: 15px !important; line-height: 1.75 !important; color: var(--fox-muted); } #top #story .fox-story-content .avia-button-wrap { margin-top: 22px !important; } /* ========================================================= 03. CATEGORY CARDS ========================================================= */ #top #categories .fox-category-card { min-height: 255px !important; padding: 25px 23px !important; } #top #categories .fox-card-number { margin-bottom: 34px !important; font-size: 9px !important; letter-spacing: .16em !important; } #top #categories .fox-card-title { margin-bottom: 12px !important; } #top #categories .fox-card-title .av-special-heading-tag { font-size: clamp(19px, 1.5vw, 22px) !important; line-height: 1.04 !important; } #top #categories .fox-category-card p { max-width: 260px; margin-bottom: 0; font-size: 12px !important; line-height: 1.65 !important; } #top #categories .fox-card-button { margin-top: 15px !important; } /* ========================================================= 04. FEATURED HARDWARE ========================================================= */ #top #hardware .fox-product-card { min-height: 325px !important; padding: 16px !important; } #top #hardware .fox-product-placeholder { min-height: 190px !important; margin-bottom: 18px !important; } #top #hardware .fox-product-card .fox-card-title { margin-bottom: 8px !important; } #top #hardware .fox-product-card .fox-card-title .av-special-heading-tag { font-size: 18px !important; } #top #hardware .fox-product-card p { font-size: 11px !important; line-height: 1.6 !important; } /* ========================================================= 05. BRANDS ========================================================= */ #top #brands .fox-brand-card { min-height: 120px !important; padding: 5px !important; } #top #brands .fox-brand-placeholder { min-height: 108px !important; font-size: 9px !important; letter-spacing: .14em !important; } /* ========================================================= 06. WHY FOX HOUND ========================================================= */ #top #why .fox-value-card { min-height: 205px !important; padding: 24px 20px !important; } #top #why .fox-value-card .fox-card-title { margin-bottom: 11px !important; } #top #why .fox-value-card .fox-card-title .av-special-heading-tag { font-size: 18px !important; } #top #why .fox-value-card p { font-size: 12px !important; line-height: 1.68 !important; color: #BEB9C8; } /* ========================================================= 07. HARDWARE JOURNAL ========================================================= */ #top #lab .fox-article-card { padding: 8px 14px 14px !important; } #top #lab .fox-article-placeholder { min-height: 175px !important; margin-bottom: 18px !important; } #top #lab .fox-article-card .fox-card-title { margin-bottom: 9px !important; } #top #lab .fox-article-card .fox-card-title .av-special-heading-tag { font-size: 18px !important; } #top #lab .fox-article-card p { font-size: 11px !important; line-height: 1.65 !important; } /* ========================================================= 08. DEALERS ========================================================= */ #top #dealers .content { padding-top: 52px !important; padding-bottom: 52px !important; } #top #dealers .fox-section-title { margin-bottom: 0 !important; } #top #dealers .fox-section-title .av-special-heading-tag { font-size: clamp(30px, 3.2vw, 48px) !important; } #top #dealers .avia-button { margin-top: 10px !important; } /* ========================================================= 09. CONTACT ========================================================= */ #top #contact .content { padding-top: 52px !important; padding-bottom: 52px !important; } #top #contact .fox-section-title .av-special-heading-tag { font-size: clamp(30px, 3.2vw, 48px) !important; } #top #contact .fox-light-copy { font-size: 13px !important; line-height: 1.7 !important; } /* ========================================================= 10. FOOTER ========================================================= */ #top #fox-footer .content { padding-top: 48px !important; padding-bottom: 48px !important; } #top #fox-footer .fox-footer-title .av-special-heading-tag { font-size: 24px !important; } #top #fox-footer .fox-footer-copy { font-size: 11px !important; line-height: 1.7 !important; } #top #fox-footer .fox-footer-link { font-size: 9px !important; } /* ========================================================= 11. DESKTOP — 1100px+ ========================================================= */ @media only screen and (min-width: 1100px) { #top #story .content, #top #categories .content, #top #hardware .content, #top #brands .content, #top #why .content, #top #lab .content { padding-top: 68px !important; padding-bottom: 68px !important; } } /* ========================================================= 12. TABLET — 768px–1099px ========================================================= */ @media only screen and (min-width: 768px) and (max-width: 1099px) { #top #story .content, #top #categories .content, #top #hardware .content, #top #brands .content, #top #why .content, #top #lab .content { padding-top: 52px !important; padding-bottom: 52px !important; } #top #story .fox-story-statement { padding-right: 25px !important; } #top #story .fox-story-content { padding-left: 25px !important; } #top #categories .fox-category-card { min-height: 235px !important; } #top #hardware .fox-product-card { min-height: 300px !important; } #top #hardware .fox-product-placeholder { min-height: 165px !important; } } /* ========================================================= 13. MOBILE — <768px ========================================================= */ @media only screen and (max-width: 767px) { #top #story .content, #top #categories .content, #top #hardware .content, #top #brands .content, #top #why .content, #top #lab .content { padding-top: 48px !important; padding-bottom: 48px !important; } #top #story .fox-story-statement { padding-right: 0 !important; margin-bottom: 28px; } #top #story .fox-story-content { padding-left: 0 !important; } #top #categories .fox-category-card { min-height: 220px !important; padding: 23px 20px !important; } #top #hardware .fox-product-card { min-height: 305px !important; } #top #hardware .fox-product-placeholder { min-height: 155px !important; } #top #brands .fox-brand-card { min-height: 105px !important; } #top #brands .fox-brand-placeholder { min-height: 94px !important; } #top #why .fox-value-card { min-height: 190px !important; } #top #lab .fox-article-placeholder { min-height: 145px !important; } #top #dealers .content, #top #contact .content { padding-top: 44px !important; padding-bottom: 44px !important; } #top #fox-footer .content { padding-top: 40px !important; padding-bottom: 40px !important; } } /* ========================================================= FOX HOUND — JOURNAL ANTI-SLOP V2.1 Appended to the supplied Enfold Child stylesheet. Scoped to .fox-journal-v2 components; existing CSS preserved. ========================================================= */ /* FOX HOUND — JOURNAL ANTI-SLOP V2.1 Install in Enfold Child Theme custom.css / child-theme stylesheet. Scoped to this journal template; does not change global header/footer or homepage. */ #top .fox-journal-v2{color:#242129;overflow:hidden} #top .fox-journal-v2 .container{max-width:1180px} #top .fox-journal-v2 .content{padding-top:0!important;padding-bottom:0!important} #top .fox-journal-v2 .av-special-heading{margin-top:0!important} /* HERO — force reliable contrast even if theme heading defaults override colors */ #top .fox-journal-v2-hero{background:#121116!important;color:#fff!important} #top .fox-journal-v2-hero .content{padding:78px 0 82px!important} #top .fox-journal-v2-hero .fox-journal-v2-intro{padding-right:52px!important} #top .fox-journal-v2-hero .fox-eyebrow, #top .fox-journal-v2-hero .fox-eyebrow p{color:#C9FF3F!important;margin-bottom:16px} #top .fox-journal-v2-hero .fox-section-title, #top .fox-journal-v2-hero .fox-section-title h1, #top .fox-journal-v2-hero h1, #top .fox-journal-v2-hero .av-special-heading-tag{color:#fff!important} #top .fox-journal-v2-hero .fox-section-title h1, #top .fox-journal-v2-hero h1, #top .fox-journal-v2-hero .av-special-heading-tag{font-size:clamp(46px,5.8vw,78px)!important;line-height:.91!important;letter-spacing:-.045em!important;font-weight:850!important;text-transform:uppercase;max-width:760px} #top .fox-journal-v2-hero .fox-section-lede, #top .fox-journal-v2-hero .fox-section-lede p{max-width:620px;color:rgba(255,255,255,.78)!important;font-size:16px;line-height:1.7;margin-bottom:24px} #top .fox-journal-v2-button a.avia-button{display:inline-flex!important;align-items:center;min-height:42px;background:#C9FF3F!important;color:#121116!important;border:1px solid #C9FF3F!important;border-radius:2px!important;font-size:10px!important;font-weight:850!important;letter-spacing:.09em;text-transform:uppercase;box-shadow:none!important;text-decoration:none!important} #top .fox-journal-v2-button a.avia-button:hover{background:#fff!important;border-color:#fff!important;color:#121116!important} #top .fox-journal-v2-index{border-left:1px solid rgba(255,255,255,.20);padding-left:42px!important} #top .fox-journal-v2-index-label, #top .fox-journal-v2-index-label p{color:#fff!important;font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:14px} #top .fox-journal-v2-index-list p{margin:0!important} #top .fox-journal-v2-index-item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);color:#fff!important} #top .fox-journal-v2-index-item:last-child{border-bottom:1px solid rgba(255,255,255,.14)} #top .fox-journal-v2-index-item .fox-index-no{font-size:10px;font-weight:850;letter-spacing:.08em;color:#C9FF3F!important;padding-top:2px} #top .fox-journal-v2-index-item strong{display:block;color:#fff!important;font-size:12px;letter-spacing:.11em;line-height:1.2} #top .fox-journal-v2-index-item small{display:block;margin-top:5px;color:rgba(255,255,255,.68)!important;font-size:12px;line-height:1.5} /* BROWSE BY — real spacing, usable touch targets */ #top .fox-journal-v2-filter-section{background:#fff!important;border-bottom:1px solid #DDD9E3} #top .fox-journal-v2-filter-section .content{padding:17px 0!important;display:flex;align-items:center;gap:20px} #top .fox-journal-v2-filter-label, #top .fox-journal-v2-filter-label p{color:#6E6876!important;font-size:9px;font-weight:850;letter-spacing:.16em;white-space:nowrap;margin:0!important} #top .fox-journal-v2-filter-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center} #top .fox-journal-v2-filter-links p{display:flex;flex-wrap:wrap;gap:8px;margin:0!important} #top .fox-journal-v2-filter-links a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 13px;border:1px solid #DDD9E3;background:#fff;color:#242129!important;font-size:9px;font-weight:850;letter-spacing:.10em;text-decoration:none!important;transition:background .15s ease,color .15s ease,border-color .15s ease} #top .fox-journal-v2-filter-links a:hover,#top .fox-journal-v2-filter-links a:focus{border-color:#7048F5;background:#7048F5;color:#fff!important} /* FEATURED — balanced split, no oversized uncontrolled note */ #top .fox-journal-v2-featured-section{background:#F3F1F7!important} #top .fox-journal-v2-featured-section .content{padding:66px 0!important} #top .fox-journal-v2-featured-story{padding-right:26px!important;min-width:0} #top .fox-journal-v2-editor-note{padding-left:34px!important;border-left:1px solid #DDD9E3;min-width:0} #top .fox-journal-v2-featured-section .fox-eyebrow{margin-bottom:14px} #top .fox-journal-v2-featured-section .fox-section-title{margin-bottom:16px} #top .fox-journal-v2-featured-section .fox-section-title h2, #top .fox-journal-v2-featured-section .fox-section-title .av-special-heading-tag{font-size:clamp(30px,3.5vw,48px)!important;line-height:.98!important;letter-spacing:-.04em!important;font-weight:850!important;text-transform:uppercase} #top .fox-journal-v2-featured-blog .slide-entry{background:#fff;border:1px solid #DDD9E3;overflow:hidden} #top .fox-journal-v2-featured-blog .slide-image img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} #top .fox-journal-v2-featured-blog .slide-content{padding:20px 22px 24px} #top .fox-journal-v2-featured-blog .slide-entry-title,#top .fox-journal-v2-featured-blog .slide-entry-title a{margin:0 0 9px;color:#242129!important;font-size:clamp(22px,2.2vw,31px);line-height:1.03;font-weight:850;letter-spacing:-.03em;text-transform:uppercase;text-decoration:none} #top .fox-journal-v2-featured-blog .slide-meta,#top .fox-journal-v2-featured-blog .slide-meta a{color:#7048F5!important;font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase} #top .fox-journal-v2-featured-blog .slide-entry-excerpt{margin-top:10px;color:#6E6876;font-size:13px;line-height:1.7} #top .fox-journal-v2-note-copy,#top .fox-journal-v2-note-copy p{max-width:500px;color:#6E6876!important;font-size:14px;line-height:1.75;margin-bottom:22px} #top .fox-journal-v2-note-points p{margin:0!important} #top .fox-journal-v2-note-points>div{display:grid;grid-template-columns:30px 94px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid #DDD9E3;align-items:baseline} #top .fox-journal-v2-note-points>div:last-child{border-bottom:1px solid #DDD9E3} #top .fox-journal-v2-note-points strong{font-size:10px;color:#7048F5} #top .fox-journal-v2-note-points span{font-size:10px;font-weight:850;letter-spacing:.1em;color:#242129} #top .fox-journal-v2-note-points small{font-size:11px;color:#6E6876;line-height:1.45} /* ALL STORIES — native av_blog query, two-column editorial rhythm */ #top .fox-journal-v2-grid-section{background:#F3F1F7!important} #top .fox-journal-v2-grid-section .content{padding:18px 0 72px!important} #top .fox-journal-v2-grid-intro,#top .fox-journal-v2-grid-intro p{max-width:620px;color:#6E6876!important;font-size:14px;line-height:1.7;margin:0 0 28px!important} #top .fox-journal-v2-grid .slide-entry{background:#fff;border:1px solid #DDD9E3;overflow:hidden;margin-bottom:26px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} #top .fox-journal-v2-grid .slide-entry:hover{transform:translateY(-3px);border-color:rgba(112,72,245,.38);box-shadow:0 10px 24px rgba(18,17,22,.07)} #top .fox-journal-v2-grid .slide-image img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} #top .fox-journal-v2-grid .slide-content{padding:18px 20px 22px} #top .fox-journal-v2-grid .slide-entry-title,#top .fox-journal-v2-grid .slide-entry-title a{margin:0 0 9px;color:#242129!important;font-size:clamp(19px,1.8vw,24px);line-height:1.05;font-weight:850;letter-spacing:-.025em;text-transform:uppercase;text-decoration:none} #top .fox-journal-v2-grid .slide-meta,#top .fox-journal-v2-grid .slide-meta a{color:#7048F5!important;font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase} #top .fox-journal-v2-grid .slide-entry-excerpt{margin-top:10px;color:#6E6876;font-size:12px;line-height:1.7} #top .fox-journal-v2-grid .read-more-link a{color:#7048F5!important;font-size:9px;font-weight:850;letter-spacing:.11em;text-transform:uppercase} #top .fox-journal-v2-grid .pagination-wrap{margin-top:18px} #top .fox-journal-v2-grid .pagination a,#top .fox-journal-v2-grid .pagination span{border-radius:0!important} /* CLOSE — light CTA background; all non-CTA styling preserved */ #top .fox-journal-v2-close-section{background:#F3F1F7!important;color:#242129!important} #top .fox-journal-v2-close-section .content{padding:58px 0!important} #top .fox-journal-v2-close-copy{padding-right:42px!important} #top .fox-journal-v2-close-copy .fox-eyebrow,#top .fox-journal-v2-close-copy .fox-eyebrow p{color:#7048F5!important;margin-bottom:14px} #top .fox-journal-v2-close-copy .fox-section-title, #top .fox-journal-v2-close-copy .fox-section-title h2, #top .fox-journal-v2-close-copy h2, #top .fox-journal-v2-close-copy .av-special-heading-tag{color:#121116!important;-webkit-text-fill-color:#121116!important;font-size:clamp(32px,3.7vw,50px)!important;line-height:.98!important;letter-spacing:-.035em!important;font-weight:850!important;text-transform:uppercase} #top .fox-journal-v2-close-action{padding-left:42px!important;border-left:1px solid rgba(36,33,41,.18)} #top .fox-journal-v2-close-meta,#top .fox-journal-v2-close-meta p{color:#6E6876!important;font-size:10px;font-weight:850;letter-spacing:.14em;margin-bottom:16px} @media only screen and (max-width:767px){ #top .fox-journal-v2-hero .content{padding:48px 0 52px!important} #top .fox-journal-v2-hero .fox-journal-v2-intro{padding-right:0!important} #top .fox-journal-v2-hero .fox-section-title h1,#top .fox-journal-v2-hero h1,#top .fox-journal-v2-hero .av-special-heading-tag{font-size:clamp(38px,10vw,56px)!important;line-height:.94!important} #top .fox-journal-v2-index{margin-top:34px;padding:22px 0 0!important;border-left:0;border-top:1px solid rgba(255,255,255,.2)} #top .fox-journal-v2-filter-section .content{display:block;padding:14px 0!important} #top .fox-journal-v2-filter-label{margin-bottom:10px!important} #top .fox-journal-v2-filter-links,#top .fox-journal-v2-filter-links p{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px} #top .fox-journal-v2-filter-links a{flex:0 0 auto} #top .fox-journal-v2-featured-section .content{padding:46px 0!important} #top .fox-journal-v2-featured-story{padding-right:0!important} #top .fox-journal-v2-editor-note{margin-top:34px;padding:28px 0 0!important;border-left:0;border-top:1px solid #DDD9E3} #top .fox-journal-v2-featured-section .fox-section-title h2,#top .fox-journal-v2-featured-section .fox-section-title .av-special-heading-tag{font-size:clamp(29px,8vw,42px)!important} #top .fox-journal-v2-grid-section .content{padding:12px 0 48px!important} #top .fox-journal-v2-grid .slide-entry{margin-bottom:18px} #top .fox-journal-v2-close-section .content{padding:44px 0!important} #top .fox-journal-v2-close-copy{padding-right:0!important} #top .fox-journal-v2-close-action{margin-top:28px;padding:24px 0 0!important;border-left:0;border-top:1px solid rgba(36,33,41,.18)} } @media (prefers-reduced-motion:reduce){#top .fox-journal-v2-grid .slide-entry{transition:none}#top .fox-journal-v2-grid .slide-entry:hover{transform:none}} /* ========================================================= FOX HOUND JOURNAL V2.1 — RUNTIME CONTRAST HOTFIX Added after screenshot review. Scope is limited to the Journal V2.1 template IDs/classes. Does not alter the homepage hero or global header/nav. ========================================================= */ /* HERO: enforce readable foreground on the dark section */ #top #fox-journal-v2-hero, #top #fox-journal-v2-hero .content, #top #fox-journal-v2-hero .container, #top #fox-journal-v2-hero .flex_column, #top #fox-journal-v2-hero .avia_textblock, #top #fox-journal-v2-hero .avia_textblock p { color: #FFFFFF !important; } #top #fox-journal-v2-hero .av-special-heading, #top #fox-journal-v2-hero .av-special-heading .av-special-heading-tag, #top #fox-journal-v2-hero h1, #top #fox-journal-v2-hero h1 a { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } #top #fox-journal-v2-hero .fox-eyebrow, #top #fox-journal-v2-hero .fox-eyebrow p { color: #C9FF3F !important; } #top #fox-journal-v2-hero .fox-section-lede, #top #fox-journal-v2-hero .fox-section-lede p { color: rgba(255,255,255,.82) !important; } /* Editorial index: prevent dark inherited text */ #top #fox-journal-v2-hero .fox-journal-v2-index, #top #fox-journal-v2-hero .fox-journal-v2-index * { color: rgba(255,255,255,.78) !important; } #top #fox-journal-v2-hero .fox-journal-v2-index-label, #top #fox-journal-v2-hero .fox-journal-v2-index-label p, #top #fox-journal-v2-hero .fox-journal-v2-index-item strong { color: #FFFFFF !important; } #top #fox-journal-v2-hero .fox-journal-v2-index-item .fox-index-no, #top #fox-journal-v2-hero .fox-journal-v2-index-item strong { color: #C9FF3F !important; } /* Browse By: make categories visibly separate and tappable */ #top #fox-journal-v2-filter .fox-journal-v2-filter-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px 22px !important; } #top #fox-journal-v2-filter .fox-journal-v2-filter-links p { display: contents !important; } #top #fox-journal-v2-filter .fox-journal-v2-filter-links a { display: inline-flex !important; margin: 0 12px 8px 0 !important; color: #5E7E20 !important; text-decoration: none !important; line-height: 1.6 !important; } #top #fox-journal-v2-filter .fox-journal-v2-filter-links a:hover, #top #fox-journal-v2-filter .fox-journal-v2-filter-links a:focus-visible { color: #7048F5 !important; text-decoration: underline !important; text-underline-offset: 4px; } /* Featured story/editor note: keep text contrast predictable */ #top #fox-journal-v2-featured .fox-journal-v2-featured-story, #top #fox-journal-v2-featured .fox-journal-v2-editor-note { color: #242129 !important; } #top #fox-journal-v2-featured .fox-journal-v2-editor-note .av-special-heading-tag, #top #fox-journal-v2-featured .fox-journal-v2-editor-note h2 { color: #121116 !important; -webkit-text-fill-color: #121116 !important; } /* Closing CTA: enforce white heading and legible supporting copy */ #top #fox-journal-v2-close, #top #fox-journal-v2-close .content, #top #fox-journal-v2-close .container, #top #fox-journal-v2-close .flex_column, #top #fox-journal-v2-close .avia_textblock, #top #fox-journal-v2-close .avia_textblock p { color: rgba(255,255,255,.78) !important; } #top #fox-journal-v2-close .av-special-heading, #top #fox-journal-v2-close .av-special-heading .av-special-heading-tag, #top #fox-journal-v2-close h2, #top #fox-journal-v2-close h2 a { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } #top #fox-journal-v2-close .fox-eyebrow, #top #fox-journal-v2-close .fox-eyebrow p { color: #C9FF3F !important; } #top #fox-journal-v2-close .fox-journal-v2-close-meta, #top #fox-journal-v2-close .fox-journal-v2-close-meta p { color: rgba(255,255,255,.72) !important; } /* Journal-only mobile safeguards */ @media only screen and (max-width: 767px) { #top #fox-journal-v2-hero .av-special-heading .av-special-heading-tag, #top #fox-journal-v2-hero h1 { font-size: clamp(38px, 10vw, 56px) !important; line-height: .94 !important; } #top #fox-journal-v2-filter .fox-journal-v2-filter-links { gap: 8px 14px !important; } #top #fox-journal-v2-filter .fox-journal-v2-filter-links a { margin-right: 8px !important; } } /* ========================================================= FOX HOUND JOURNAL V2.1 — EDITORIAL INDEX WIDTH PATCH Corrects narrow wrapping in index descriptions. Scoped to the Journal hero only. ========================================================= */ #top #fox-journal-v2-hero .fox-journal-v2-index { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; } #top #fox-journal-v2-hero .fox-journal-v2-index-list { width: 100% !important; min-width: 0 !important; } #top #fox-journal-v2-hero .fox-journal-v2-index-item { grid-template-columns: 28px minmax(0, 1fr) !important; column-gap: 14px !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #top #fox-journal-v2-hero .fox-journal-v2-index-item > span:last-child { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; overflow-wrap: normal !important; word-break: normal !important; } #top #fox-journal-v2-hero .fox-journal-v2-index-item strong, #top #fox-journal-v2-hero .fox-journal-v2-index-item small { display: block !important; width: 100% !important; max-width: none !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; } @media only screen and (max-width: 767px) { #top #fox-journal-v2-hero .fox-journal-v2-index { padding-left: 0 !important; border-left: 0 !important; margin-top: 28px !important; } } /* ========================================================= FOX HOUND — PAGES v1 Halaman: Tentang, Merek, Produk, Mengapa Fox Hound, Dealer, Kontak Memakai token :root --fox-* dan class lama (fox-eyebrow, fox-section-title, fox-category-card, fox-value-card, fox-button-primary, fox-text-button, dll). Class baru berawalan fxp-*. Tidak mengubah aturan di atas. ========================================================= */ #top .fxp-page { scroll-margin-top: 40px; } #top .fxp-page .container { padding-top: 12px; padding-bottom: 12px; } #top .fxp-page .content { padding-top: 40px !important; padding-bottom: 40px !important; } #top .fxp-page .fxp-section-head { margin-bottom: 40px; } /* ---------- Warna teks dasar per tema section ---------- */ #top .fxp-dark { color: var(--fox-white); } #top .fxp-dark .fox-section-title .av-special-heading-tag { color: var(--fox-white) !important; } #top .fxp-light .fox-section-title .av-special-heading-tag { color: var(--fox-dark) !important; } /* ---------- Hero ---------- */ #top .fxp-hero { background-image: radial-gradient(60% 80% at 85% 20%, rgba(112,72,245,.28), transparent 70%), radial-gradient(40% 50% at 10% 100%, rgba(201,255,63,.06), transparent 70%); } #top .fxp-hero .content { padding-top: 72px !important; padding-bottom: 72px !important; } #top .fxp-hero .fox-section-title .av-special-heading-tag { font-size: clamp(40px, 5.4vw, 78px); } #top .fxp-hero .avia-button-wrap { margin: 8px 18px 0 0; display: inline-block; } #top .fxp-hero-list { padding-left: 32px; } #top .fxp-hero-item { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 20px 0; border-top: 1px solid var(--fox-dark-border); } #top .fxp-hero-item:last-child { border-bottom: 1px solid var(--fox-dark-border); } #top .fxp-hero-no { grid-row: 1 / span 2; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--fox-lime); padding-top: 4px; } #top .fxp-hero-item strong { font-size: 15px; letter-spacing: .06em; color: var(--fox-white); } #top .fxp-hero-item small { font-size: 13px; line-height: 1.6; color: #BEB9C8; } /* ---------- Teks isi ---------- */ #top .fxp-body { max-width: 560px; font-size: 16px; line-height: 1.75; color: var(--fox-muted); } #top .fxp-dark .fxp-body { color: #BEB9C8; } #top .fxp-card-copy p { margin: 0; max-width: 270px; font-size: 13px; line-height: 1.7; color: var(--fox-muted); } #top .fxp-card-copy-light p { color: #BEB9C8; } #top .fox-category-card .fox-card-title, #top .fox-value-card .fox-card-title { margin-bottom: 12px; } #top .fox-category-card .fox-card-title .av-special-heading-tag, #top .fox-value-card .fox-card-title .av-special-heading-tag { margin: 0; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.04; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; } #top .fox-category-card .avia-button-wrap { margin-top: 16px; } /* ---------- Tombol gelap (CTA di section terang) ---------- */ #top .fox-button-dark { background: var(--fox-dark) !important; color: var(--fox-white) !important; border: 1px solid var(--fox-dark) !important; } #top .fox-button-dark:hover { background: var(--fox-purple) !important; border-color: var(--fox-purple) !important; color: var(--fox-white) !important; } /* ---------- Merek: tile ---------- */ #top .fxp-brand-tile { padding: 8px; } #top .fxp-brand-tile-inner { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 130px; padding: 22px 20px; border: 1px solid var(--fox-border); background: var(--fox-white); transition: transform var(--fox-transition), border-color var(--fox-transition), box-shadow var(--fox-transition), color var(--fox-transition); } #top .fxp-brand-tile-inner strong { font-size: 17px; font-weight: 800; letter-spacing: .04em; color: var(--fox-dark); } #top .fxp-brand-tile-inner small { font-size: 12px; line-height: 1.5; color: var(--fox-muted); } #top .fxp-brand-tile:hover .fxp-brand-tile-inner { transform: translateY(-6px); border-color: rgba(112,72,245,.35); box-shadow: var(--fox-shadow-soft); } #top .fxp-brand-tile:hover .fxp-brand-tile-inner strong { color: var(--fox-purple); } /* ---------- Merek: daftar semua ---------- */ #top .fxp-chip-list { display: flex; flex-wrap: wrap; gap: 10px; } #top .fxp-chip-list span { padding: 10px 16px; border: 1px solid var(--fox-border); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fox-text); background: var(--fox-light); transition: background var(--fox-transition), color var(--fox-transition), border-color var(--fox-transition); } #top .fxp-chip-list span:hover { background: var(--fox-dark); border-color: var(--fox-dark); color: var(--fox-lime); } /* ---------- Dealer ---------- */ #top .fxp-region-tile { padding: 8px; } #top .fxp-region-tile-inner a { display: flex; flex-direction: column; gap: 22px; min-height: 130px; padding: 20px; border: 1px solid var(--fox-border); background: var(--fox-white); text-decoration: none; transition: transform var(--fox-transition), background var(--fox-transition), border-color var(--fox-transition); } #top .fxp-region-tile-inner span { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--fox-purple); } #top .fxp-region-tile-inner strong { font-size: 18px; font-weight: 800; letter-spacing: .02em; color: var(--fox-dark); } #top .fxp-region-tile-inner a:hover { transform: translateY(-6px); background: var(--fox-dark); border-color: var(--fox-dark); } #top .fxp-region-tile-inner a:hover strong { color: var(--fox-white); } #top .fxp-region-tile-inner a:hover span { color: var(--fox-lime); } #top .fxp-region-block { margin-bottom: 36px; } #top .fxp-region-anchor { height: 0; margin: 0; } #top .fxp-region-block .fox-card-title .av-special-heading-tag { margin: 0 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; } #top .fxp-dealer-table { border-top: 2px solid var(--fox-dark); } #top .fxp-dealer-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--fox-border); font-size: 14px; color: var(--fox-text); } #top .fxp-dealer-head { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--fox-soft-muted); } #top .fxp-dealer-empty { color: var(--fox-muted); } /* ---------- CTA penutup ---------- */ #top .fxp-cta .content { padding-top: 56px !important; padding-bottom: 56px !important; } #top .fxp-cta .avia-button-wrap { margin: 6px 18px 6px 0; display: inline-block; } #top .fxp-cta-action { padding-left: 24px; } /* ---------- Kontak ---------- */ #top .fxp-contact-meta { margin-top: 28px; display: flex; flex-direction: column; gap: 6px; } #top .fxp-contact-meta span { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: var(--fox-lime); } #top .fxp-contact-meta a { font-size: 18px; color: var(--fox-white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); align-self: flex-start; } #top .fxp-contact-meta a:hover { color: var(--fox-lime); border-color: var(--fox-lime); } /* ---------- Responsif ---------- */ @media only screen and (max-width: 767px) { #top .fxp-hero .content { padding-top: 48px !important; padding-bottom: 48px !important; } #top .fxp-hero-list { padding-left: 0; margin-top: 28px; } #top .fxp-cta-action { padding-left: 0; margin-top: 12px; } #top .fxp-dealer-row { grid-template-columns: 1fr; gap: 4px; } #top .fxp-dealer-head { display: none; } #top .fxp-brand-tile-inner, #top .fxp-region-tile-inner a { min-height: 104px; } }