<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY amp   "&#38;">
<!ENTITY copy   "&#169;">
<!ENTITY gt   "&#62;">
<!ENTITY hellip "&#8230;">
<!ENTITY laquo  "&#171;">
<!ENTITY lsaquo   "&#8249;">
<!ENTITY lsquo   "&#8216;">
<!ENTITY lt   "&#60;">
<!ENTITY nbsp   "&#160;">
<!ENTITY quot   "&#34;">
<!ENTITY raquo  "&#187;">
<!ENTITY rsaquo   "&#8250;">
<!ENTITY rsquo   "&#8217;">
]>

<!--
Implementations Skeleton - 08/24/2018

Home XSL
Defines the page structure for the home page 
-->

<xsl:stylesheet version="3.0" expand-text="yes"
				xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
				xmlns:xs="http://www.w3.org/2001/XMLSchema"
				xmlns:ou="http://omniupdate.com/XSL/Variables"
				xmlns:fn="http://omniupdate.com/XSL/Functions"
				xmlns:ouc="http://omniupdate.com/XSL/Variables"
				exclude-result-prefixes="ou xsl xs fn ouc">

	<xsl:import href="common-03-25-2026.xsl"/>

	<xsl:template name="template-headcode"/>
	<xsl:template name="template-footcode"/>

	<xsl:template name="page-content">		
		<xsl:apply-templates select="ouc:div[@label='main-content']" />
	</xsl:template>

	<!-- override common-header for alert banner -->
	<xsl:template name="common-header">
		<header class="header-global" style="background: white;">

			<xsl:if test="ou:pcf-param('alert-banner') = 'yes'">				
				<div class="header-alert">
					<xsl:apply-templates select="ouc:div[@label='alert-banner']" />                
					<a href="#" class="header-alert-close">Close</a>
				</div>
				<!-- /.header-alert -->				
			</xsl:if>

		</header>
		<div class="navigation-mobile"></div>
	</xsl:template>

	<!-- Hero override from common.xsl -->
	<xsl:template name="hero" expand-text="yes">
		<!-- <div class="hero-global" style="background-image: url('{ou:pcf-param('background-image')}');"> -->

		
		<div class="menu-global-insert"></div>
		
		
        
<div class="hero-jumbotron position-relative overflow-hidden text-center text-white d-none d-lg-block">
    <!-- Background Video -->
    				<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" poster="/_resources/upload/video/02-23-2026-ED-02_uscb_loop_update_jan26_1080p.png" style="position:fixed; center: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: -1;"><source src="/_resources/upload/video/02-23-2026-ED-02_uscb_loop_update_jan26_1080p.mp4" type="video/mp4"></source>
				</video>
    
    <!-- Dark Overlay -->
    <div class="hero-overlay"></div>
    
    <!-- Scrolling Banner Image -->
    <img src="https://www.uscb.edu/USCBe-Extraordinary-DS-FOR-MOVIE.png" alt="" class="hero-scroll-image" aria-hidden="true" >
</div>              
             
          

            </div>


             
             
             
             

             
             
             
             
             
             
             
            <div class="hero-global-navigation">
               <div class="menu-global-insert"></div>
            </div>
            <div class="hero-global-content">

            </div>

                    <div id="home-hero-image" class="hero-global hero-global-right" style="background-image: url('https://uscb.edu/_resources/upload/mobile_homepage_hero_image.jpg');"></div>
				
				
			<!-- /.hero-global-navigation -->
			<div class="hero-global-content">
			
			</div>
			<!-- /.hero-global-content -->
		</div>
		<!-- /.hero-global -->
	</xsl:template>

	<!-- HOME INTRO LANDING -->
	<xsl:template match="table[@class='ou-intro-landing-header']" mode="intro-landing-header">
		<div class="intro-landing-header">
			<div class="row align-items-center">
				<div class="col-12 col-md-5 order-md-2">
					<xsl:apply-templates select="tbody/tr[@data-row='image']/td/node()" />
				</div>
				<!-- /.col -->
				<div class="col-12 col-md-7">
					<xsl:apply-templates select="tbody/tr[@data-row='title']/td/node()" />
					<xsl:apply-templates select="tbody/tr[@data-row='content']/td/node()" />
					<p><a href="{tbody/tr[@data-row='link']/td//@href}"
						  class="button button-big">{tbody/tr[@data-row='link']/td//a}</a></p>
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.intro-landing-header -->
	</xsl:template>

	<xsl:template match="table[@class='ou-intro-landing-content']" mode="intro-landing-content">
		<div class="intro-landing-content">
			<div class="row">
				<div class="col-12 col-md-6 col-lg-7">
					<xsl:apply-templates select="tbody/tr[@data-row='content']/td[4]/node()" />
				</div>
				<!-- /.col -->
				<div class="col-12 col-md-6 col-lg-5">

					<xsl:apply-templates select="tbody/tr[@data-row='image-buttons']/td" mode="intro-landing-content" />

					<xsl:apply-templates select="tbody/tr[@data-row='content']/td[1]/node()" />
					<xsl:apply-templates select="tbody/tr[@data-row='content']/td[2]/node()" />
					<p><a href="{tbody/tr[@data-row='content']/td[3]//@href}">{tbody/tr[@data-row='content']/td[3]//a}</a>
					</p>

				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.intro-landing-content -->
	</xsl:template>

	<xsl:template match="table[@class='ou-intro-landing-content-images']" mode="intro-landing-content">
		<div class="row">
			<!-- apply-templates -->
			<xsl:apply-templates select="tbody/tr[@data-row='image-content']" mode="intro-landing-content" />
		</div>
		<!-- /.row -->
	</xsl:template>

	<xsl:template match="tr[@data-row='image-content']" mode="intro-landing-content">
		<div class="col-6">
			<a href="{td[2]//@href}" class="landing-campus-link" style="background-image: url('{td[3]//@src}');">
				<span class="landing-campus-title">{td[1]}</span>
			</a>
		</div>
		<!-- /.col -->
	</xsl:template>

	<xsl:template match="table[@class='ou-intro-landing-numbers']" mode="intro-landing-image">
		<div class="intro-landing-numbers">
			<div class="row align-items-center">
				<div class="col-12 col-lg-3">
					<xsl:apply-templates select="tbody/tr[@data-row='image']/td/node()" />
				</div>
				<!-- /.col -->

				<xsl:apply-templates select="tbody/tr[@data-row='numbers']/td/node()" mode="intro-landing-number"/>

			</div>
			<!-- /.row -->
		</div>
		<!-- /.intro-landing-numbers -->
	</xsl:template>

	<xsl:template match="table[@class='ou-intro-landing-numbers-number']" mode="intro-landing-number">
		<div class="col-12 col-lg-9">
			<div class="row">

				<xsl:apply-templates select="tbody/tr[@data-row='number']" mode="intro-landing-number" />

			</div>
			<!-- /.row -->
		</div>
		<!-- /.col -->
	</xsl:template>

	<xsl:template match="tr[@data-row='number']" mode="intro-landing-number">
		<div class="col-6">
			<div class="intro-global-num">
				<div class="intro-global-num-title">{td[1]}</div>
				{td[2]}
			</div>
			<!-- /.intro-global-num -->
		</div>
		<!-- /.col -->
	</xsl:template>

	<xsl:template match="table[@class='ou-intro-landing']">
		<div class="intro-landing" style="background-image: url('{tbody/tr[@data-row='background-image']/td//@src}');">
			<div class="intro-landing-mask"></div>
			<div class="container">

				<xsl:apply-templates select="tbody/tr[@data-row='header']/td/node()" mode="intro-landing-header" />
				<xsl:apply-templates select="tbody/tr[@data-row='content']/td/node()" mode="intro-landing-content" />
				<xsl:apply-templates select="tbody/tr[@data-row='numbers']/td/node()" mode="intro-landing-image" />

			</div>
			<!-- /.container -->
		</div>
		<!-- /.intro-landing -->
	</xsl:template>

	<!-- HOME STORIES LANDING -->
	<xsl:template match="table[@class='ou-home-stories-landing']">
		<div class="stories-landing">
			<a href="{tbody/tr[@data-row='images'][1]/td[2]//@href}" class="story-landing" style="background-image: url('{tbody/tr[@data-row='images'][1]/td[3]//@src}');">{tbody/tr[@data-row='images'][1]/td[1]}</a>
			<div class="story-landing-text">
				<xsl:apply-templates select="tbody/tr[@data-row='stories-landing-text-title']/td/node()"/>
				<xsl:apply-templates select="tbody/tr[@data-row='stories-landing-text-content']/td/node()"/>
				<div class="story-landing-more"><a href="{tbody/tr[@data-row='stories-landing-text-link']/td//@href}">{tbody/tr[@data-row='stories-landing-text-link']/td//a}</a></div>
			</div>
			<!-- /.story-landing-text -->
			<a href="{tbody/tr[@data-row='images'][2]/td[2]//@href}" class="story-landing" style="background-image: url('{tbody/tr[@data-row='images'][2]/td[3]//@src}');">{tbody/tr[@data-row='images'][2]/td[1]}</a>
			<a href="{tbody/tr[@data-row='images'][3]/td[2]//@href}" class="story-landing" style="background-image: url('{tbody/tr[@data-row='images'][3]/td[3]//@src}');">{tbody/tr[@data-row='images'][3]/td[1]}</a>
		</div>
		<!-- /.stories-landing -->
	</xsl:template>

	<!-- HOME SECTION EVENTS -->
	<xsl:template match="table[@class='ou-home-section-events']">
		<div class="section-events" style="background: white;">
			<div class="container">
				<div class="row">

					<div class="col-12 col-lg-4">
						<xsl:apply-templates select="tbody/tr[@data-row='featured']/td" mode="campus-section"/>
					</div>
					<!-- /.col -->

					<div class="col-12 col-lg-4">
						<xsl:apply-templates select="tbody/tr[@data-row='col1']/td" mode="campus-section"/>
					</div>
					<!-- /.col -->

					<div class="col-12 col-lg-4">
						<xsl:apply-templates select="tbody/tr[@data-row='col2']/td" mode="campus-section"/>
					</div>
					<!-- /.col -->

				</div>
				<!-- /.row -->
			</div>
			<!-- /.container -->
		</div>
		<!-- /.section-events -->
	</xsl:template>

	<!-- HOME PROGRAMS LIST -->
	<xsl:template match="table[@class='ou-home-academic-programs']">
		<div class="programs">
			<div class="programs-list">
				<div class="programs-content">
					<div class="programs-content-wrap">
						<xsl:apply-templates select="tbody/tr[@data-row='title']/td/node()" />
						<xsl:apply-templates select="tbody/tr[@data-row='summary']/td/node()" />
					</div>
				</div>

				<xsl:apply-templates select="tbody/tr[@data-row='content']/td/node()" mode="academic-programs-cards" />

			</div>
			<!-- /.programs-list -->
		</div>
		<!-- /.programs -->
	</xsl:template>

	<!-- HOME ATHLETIC FOLLOW -->
	<xsl:template match="table[@class='ou-home-athletic-follow']">
		<div class="athletic-follow athletic-follow-landing" style="background-image: url('{tbody/tr[@data-row='background']/td//@src}');">
			<div class="athletic-follow-mask"></div>
			<div class="container">
				<div class="row">
					<div class="col-12">
						<xsl:apply-templates select="tbody/tr[@data-row='title']/td/node()" mode="athletic-follow"/>
						<xsl:apply-templates select="tbody/tr[@data-row='gallery']/td/node()" mode="athletic-follow"/>
					</div>
					<!-- /.col -->

				</div>
				<!-- /.row -->
			</div>
			<!-- /.container -->
		</div>
		<!-- /.athletic-follow -->
	</xsl:template>

	<!-- DYNAMIC EVENTS FEED -->
	<xsl:template match="table[@class='ou-events-dynamic']">
		<div class="section-events">
			<div class="container">
				<div class="row">
					
					<div class="col-12 col-lg-4">
						<div class="featured-event">
							<span class="featured-event-title">
								<xsl:apply-templates select="tbody/tr[@data-row='feature']/td[@data-type='heading']//p/node()"/>
							</span>

							<!-- DMC Call -->
							<xsl:call-template name="dmc">
								<xsl:with-param name="options">
									<datasource>{tbody/tr[@data-row='feature']/td[@data-type='feed']}</datasource>
									<xpath>item</xpath>
									<type>featured_events</type>
									<max>1</max>				
									<sort>date(localstart) desc</sort>
									<button>{tbody/tr[@data-row='feature']/td[@data-type='text']}</button>
								</xsl:with-param>
								<xsl:with-param name="script-name">events</xsl:with-param>
								<!-- <xsl:with-param name="debug" select="true()" /> -->
							</xsl:call-template>		

						</div>
						<!-- /.featured-event -->
					</div>
					<!-- /.col -->


					<div class="col-12 col-lg-4">
						<div class="events-line"></div>
						<div class="events">
							<div class="events-title">{tbody/tr[@data-row='col1']/td[@data-type='heading']/node()}</div>

							<div class="events-list">

								<!-- DMC Call -->
								<xsl:call-template name="dmc">
									<xsl:with-param name="options">
										<datasource>{tbody/tr[@data-row='feature']/td[@data-type='feed']}</datasource>
										<xpath>item</xpath>
										<type>listing_events</type>
										<items_per_page>4</items_per_page>
										<sort>date(localstart) desc</sort>
									</xsl:with-param>
									<xsl:with-param name="script-name">events</xsl:with-param>
									<!-- <xsl:with-param name="debug" select="true()" /> -->
								</xsl:call-template>
								
							</div>
							<div class="events-more">
								<xsl:apply-templates select="tbody/tr[@data-row='col1']/td[@data-type='link']/node()"/>
							</div>
						</div>
						<!-- /.events -->
					</div>
					<!-- /.col -->

					<div class="col-12 col-lg-4">
						<div class="events-line"></div>
						<div class="events">
							<div class="events-title">{tbody/tr[@data-row='col2']/td[@data-type='heading']/node()}</div>						

							<div class="events-list">
								
								<!-- DMC Call -->
								<xsl:call-template name="dmc">
									<xsl:with-param name="options">
										<datasource>{tbody/tr[@data-row='feature']/td[@data-type='feed']}</datasource>
										<xpath>item</xpath>
										<type>listing_events</type>
										<items_per_page>4</items_per_page>
										<sort>date(localstart) desc</sort>
									</xsl:with-param>
									<xsl:with-param name="script-name">events</xsl:with-param>
									<!-- <xsl:with-param name="debug" select="true()" /> -->
								</xsl:call-template>
								
							</div>
							<div class="events-more">
								<xsl:apply-templates select="tbody/tr[@data-row='col2']/td[@data-type='link']/node()"/>
							</div>
						</div>
						<!-- /.events -->
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
				
			</div>
			<!-- /.container -->
		</div>
		<!-- /.section-events -->
	</xsl:template>


</xsl:stylesheet>