<link href="https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ruluko&display=swap" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<div class="header">
<!--Content before waves-->
<div class="inner-header flex column">
<h1>Foundational APIs and Architecture</h1>
<div id="actions">
<div class="action">
<div class="action-title">Onboard with US</div>
<div class="subactions">
<a href="https://migration-test3.atlassian.net/wiki/display/APISERV/Onboard+with+our+APIs" class="subaction">Integrate with our APIs</a>
</div>
</div>
<div class="action">
<div class="action-title">Enhancements</div>
<div class="subactions">
<a href="https://migration-test3.atlassian.net/wiki/display/APISERV/Enhancement+to+APIs" class="subaction">API Enhancement Request</a>
</div>
</div>
<div class="action">
<div class="action-title">Support Request</div>
<div class="subactions">
<a href="https://migration-test3.atlassian.net/wiki/display/APISERV/Non-Prod+Issues" class="subaction">Non-Prod Issue</a>
<a href="https://migration-test3.atlassian.net/wiki/pages/viewpage.action?pageId=62325083" class="subaction">Production Issue</a>
</div>
</div>
<div class="action">
<div class="action-title">Consultation</div>
<div class="subactions">
<a href="https://migration-test3.atlassian.net/wiki/x/9wG3Aw" class="subaction">PI Tech Architecture</a>
<a href="https://migration-test3.atlassian.net/wiki/display/CDA/Account+Product+Family+Office+Hours" class="subaction">Consult with Account APIs</a>
</div>
</div>
<!--
<div class="action">
<div class="action-title">AAN with BAB</div>
<div class="subactions">
<a href="https://migration-test3.atlassian.net/wiki/display/APISERV/AAN+Transition+to+BAB" class="subaction">AAN Transition to BAB</a>
</div>
</div>-->
</div>
</div>
<div>
<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use>
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use>
</g>
</svg>
</div>
</div>
<style>
.page-metadata, #title-text { display: none; }
.header {
position: relative;
margin-top: 60px !important;
background: linear-gradient(60deg, #37649c 0%, #17687e 100%);
}
.header h1 {
color: #fff;
font-weight: 100;
font-size: 5.6em;
line-height: 40px;
margin: 0px;
font-family: "Ruluko";
}
.header h2 {
color: #eee;
font-weight: 100;
font-size: 2em;
margin: 0px;
}
.header h2 .cop-name {
font-family: 'Satisfy', cursive;
font-size: 1.1em;
color: #e2cb89;
}
.header p {
letter-spacing: 1px;
font-size: 16px;
color: #333333;
margin: 0px;
color: #eee;
}
.header #actions {
display: flex;
width: 90%;
justify-content: space-evenly;
}
.header #actions .action {
width: inherit;
margin: 50px 20px 0px 20px;
}
.header #actions .action .subactions a.subaction,
.header #actions .action div.action-title {
display: block;
background-color: rgba(0,0,0,0.13);
text-align: center;
transition: background-color 0.3s;
font-family: 'Arima Madurai', 'Calibri Light', sans-serif;
text-decoration: none;
border-radius: 2px;
font-weight: 500;
color: #fff;
}
.header #actions .action > div.action-title {
font-size: 1.5em;
padding: 27px 20px;
}
.header #actions .action .subactions { visibility: hidden; }
.header #actions .action .subactions a.subaction {
padding: 12px 0px;
margin: 6px 0px;
background-color: rgba(0,0,0,0.13);
color: #fff !important;
font-size: 1.2em;
}
.header #actions .action:hover > div.action-title {
background-color: rgba(0,0,0,0.4);
text-decoration: none;
cursor: initial;
transition: background-color 0.3s;
}
.header #actions .action:hover .subactions {
visibility: visible;
}
.header #actions .action .subactions a.subaction:hover {
background-color: rgba(0,0,0,0.4);
cursor: pointer;
transition: background-color 0.3s;
}
.inner-header {
height: 55vh;
width: 100%;
margin: 0;
padding: 0;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.flex.column {
flex-direction: column;
}
.waves {
position: relative;
width: 100%;
height: 20vh;
margin-bottom: -7px;
}
.content {
position: relative;
height: 20vh;
text-align: center;
background-color: white;
}
.parallax>use {
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax>use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax>use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax>use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0px, 0px);
}
100% {
transform: translate3d(85px, 0px, 0px);
}
}
</style>
<script>
setTimeout(function(){$("#comments-section").remove();},500);
var isTeams = navigator.userAgent.toLowerCase().indexOf("teams/") > -1;
if(isTeams) {
$(".chat-with-us").replaceWith("<a class='subaction' href='#'>Go to the Posts tab to chat with us</a>");
}
</script> | 
