/* ========================================================================= aaryans-hero-split.css Aaryans.cz — 62/38 hero split layout + 2 fixed side promo tiles + "Oblíbené kategorie" heading background. ----------------------------------------------------------------------- Upload (FileZilla) to: /usr/documents/upload/CSSkodyCLAUDE/aaryans-hero-split.css Public URL after upload: https://www.aaryans.cz/user/documents/upload/CSSkodyCLAUDE/aaryans-hero-split.css Reference in Shoptet Admin → Vzhled a obsah → Editor → block: Companion JS (required): aaryans-hero-split.js (builds the wrapper DOM + tile anchors) Converted from LIVE-INJECT_hero-option-A-split-v24.js. All class names are scoped under #aaryans-hero-split-wrap so nothing bleeds into the rest of the FV Studio / OnBoard theme. ========================================================================= */ /* --- Parent container: allow dynamic height set by JS --------------- */ .homepage-box.before-carousel { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* --- Mobile stack (default, <768px) -------------------------------- */ html body #aaryans-hero-split-wrap { display: flex !important; flex-direction: column !important; width: 100% !important; box-sizing: border-box !important; background: transparent !important; } /* --- Desktop/tablet 62/38 split (>=768px) -------------------------- */ @media (min-width: 768px) { html body #aaryans-hero-split-wrap { display: grid !important; grid-template-columns: 62% 38% !important; grid-template-rows: auto !important; overflow: hidden !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-left, html body #aaryans-hero-split-wrap .aaryans-hero-split-left #carousel, html body #aaryans-hero-split-wrap .aaryans-hero-split-left #carousel .carousel-inner, html body #aaryans-hero-split-wrap .aaryans-hero-split-left #carousel .carousel-inner .item { height: 100% !important; margin-top: 0 !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-right { display: flex !important; flex-direction: column !important; height: 100% !important; align-self: stretch !important; border-left: 4px solid #fff !important; border-top: none !important; background: transparent !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile + .aaryans-hero-split-tile { border-top: 4px solid #fff !important; border-left: none !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-left #carousel .carousel-inner .item img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile img { object-fit: cover !important; } } /* --- Left & right panels ------------------------------------------- */ html body #aaryans-hero-split-wrap .aaryans-hero-split-left { overflow: hidden !important; position: relative !important; background: transparent !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-right { overflow: hidden !important; background: transparent !important; } /* --- Tile (side promo banner) -------------------------------------- */ html body #aaryans-hero-split-wrap .aaryans-hero-split-tile { flex: 1 !important; display: block !important; position: relative !important; overflow: hidden !important; text-decoration: none !important; cursor: pointer !important; transition: filter .25s ease !important; background: transparent !important; min-height: 0 !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile:hover { filter: brightness(1.08) !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-position: center center !important; display: block !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to top, rgba(0,22,35,.65) 0%, rgba(0,22,35,.12) 45%, transparent 100%) !important; pointer-events: none !important; } /* --- Tile label (text overlay) ------------------------------------- */ html body #aaryans-hero-split-wrap .aaryans-hero-split-tile-label { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 8px 12px !important; z-index: 2 !important; pointer-events: none !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile-title { display: block !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.25 !important; text-shadow: 0 1px 4px rgba(0,0,0,.45) !important; margin: 0 !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile-sub { display: block !important; color: rgba(255,255,255,.78) !important; font-size: 10px !important; margin-top: 2px !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile-arrow { display: inline-block !important; font-size: 12px !important; opacity: .85 !important; margin-left: 5px !important; transition: transform .18s ease !important; vertical-align: middle !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile:hover .aaryans-hero-split-tile-arrow { transform: translateX(4px) !important; } /* --- Large desktop (>=1200px): bigger label typography ------------- */ @media (min-width: 1200px) { html body #aaryans-hero-split-wrap .aaryans-hero-split-tile-label { padding: 12px 16px !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile-title { font-size: 13px !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile-sub { font-size: 11px !important; } html body #aaryans-hero-split-wrap .aaryans-hero-split-tile-arrow { font-size: 13px !important; } } /* --- "Oblíbené kategorie" heading wrapper -------------------------- */ #aaryans-hero-split-cats-heading-wrap { background: #ffffff !important; box-sizing: border-box !important; padding: 20px 15px 10px !important; } #aaryans-hero-split-cats-heading-wrap .homepage-group-title > h1 { background-color: #ffffff !important; }