<style media="screen">
  @media only screen and (max-width: 550px) {
    #desktop-title {
      display: none;
    }
  }

  @media only screen and (min-width: 551px) {
    #mobile-n-tablet-title {
      display: none;
    }
  }
  .elliptical-geometry-top {
    border-top-left-radius: 70px 25px;
    border-top-right-radius: 70px 25px;
  }
  .elliptical-geometry {
    border-bottom-left-radius: 70px 25px;
    border-bottom-right-radius: 70px 25px;
    border-top-left-radius: 70px 25px;
    border-top-right-radius: 70px 25px;
  }
  .shadow-geometry {
    box-shadow: 4px 6px 6px #86888f;
  }
  .shadow-geometry:hover {
    box-shadow: 4px 6px 6px #575757;
    transition: 500ms;
  }
</style>

<div class="bg-gray-100 roboto-font text-gray-800">
  <%- include ("./partials/ucs-specialized-sites-navbar.ejs") %>
  <br>
  <div class="mx-4">
    <!-- this title is for the desktop view in which the entire title is visable -->
    <h1 class="arial-rounded-mt-bold-font flex justify-center text-4xl" id="desktop-title">Our Standards</h1>

    <!-- As screens get smaller, we want the "About" to be above the "Urban Cruise Ship" -->
    <h1 class="arial-rounded-mt-bold-font flex justify-center text-3xl" id="mobile-n-tablet-title">Our Standards</h1>
    <h4 class="bpg-arial-font flex justify-center">Urban Cruise Ship operates according to the following principles:</h4>
  </div>

  <br><br><br>

  <div>
    <div class="arial-rounded-mt-bold-font border-b-4 border-gray-500 text-3xl">
      <div class="mx-3">Content</div>
    </div>
  </div>

  <div class="gap-2 justify-center grid lg:grid-cols-3 md:grid-cols-2 bg-gray-200 sm:p-10">
    <!-- this is needed to fill a gap that forms in the background without it (in mobile)-->
    <div class="sm:hidden bg-gray-200 h-8"></div>
    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Data-Driven',
          description: "Our work is driven by data and science, not ideology, opinion, and special interest."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Unconflicted',
          description: "Urban Cruise Ship does not accept funding from corporate entities which might skew our findings."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Revelatory',
          description: "We reveal what ought to be known -- not necessarily what is expected."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Comprehensive',
          description: "Urban Cruise Ship analyzes the issues from engineering, economic, social, and political perspectives.&nbsp; Comprehensiveness should increase the likelihood that solutions will be workable."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Effective',
          description: "Urban Cruise Ship seeks to provide for policymakers, business leaders, and individuals the most relevant and effective solutions to today's most pressing ecological challenges."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Applicable',
          description: "Widespread applicability is sought. Appropriate exceptions should be clearly noted."
        }
      )
    %>
  </div>

  <br><br><br><br><br>

  <div class="">
    <div class="arial-rounded-mt-bold-font border-b-4 border-gray-500 text-3xl">
      <div class="mx-3">Content/Presentation</div>
    </div>
  </div>

  <div class="gap-2 justify-center grid lg:grid-cols-3 md:grid-cols-2 bg-gray-200 sm:p-10">

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Concise',
          description: "To prevent important facts from being buried or obscured, Urban Cruise Ship presents only essential material. Links are provided for further detail. "
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'On Point',
          description: "To encourage reading the entire website, content is topically limited. Further worthy material belongs on separate web sites."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Self-motivated',
          description: "As this guides Urban Cruise Ship's future direction foremost, there is internal motivation to get it right and save readers time."
        }
      )
    %>
  </div>

  <br><br><br><br><br>

  <div class="">
    <div class="arial-rounded-mt-bold-font border-b-4 border-gray-500 text-3xl">
      <div class="mx-3">Presentation</div>
    </div>
  </div>

  <div class="gap-2 justify-center grid lg:grid-cols-3 md:grid-cols-2 bg-gray-200 sm:p-10">
    <!-- this is needed to fill a gap that forms in the background without it (in mobile)-->
    <div class="sm:hidden bg-gray-200 h-8"></div>
    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Readable',
          description: "Urban Cruise Ship recognizes the importance of using correct terminology, but also in making our findings understandable to the widest possible audience."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Summary-led',
          description: "To help the most readers, where possible, summary material is placed first, ahead of more detailed background material supporting it."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Graphic',
          description: "Where possible, metrics are portrayed graphically, accompanied by numbers."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Non-Color Dependent',
          description: "To be most versatile, where possible, graphics are composed well enough that color is not required."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Substantive',
          description: "Content quality must always exceed presentation polish."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'No Greenwashing',
          description: "Profuse flowery / leafy / heartwarming images and jargon are associated with so many polluting companies and underperforming organizations that we avoid using them.&nbsp; Let readers judge quality based on content."
        }
      )
    %>
  </div>

  <br><br><br><br><br>

  <div class="">
    <div class="arial-rounded-mt-bold-font border-b-4 border-gray-500 text-3xl">
      <div class="mx-3">Reference</div>
    </div>
  </div>

  <div class="gap-2 justify-center grid lg:grid-cols-3 md:grid-cols-2 bg-gray-200 sm:p-10">
    <!-- this is needed to fill a gap that forms in the background without it (in mobile)-->
    <div class="sm:hidden bg-gray-200 h-8"></div>
    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Footnoted',
          description: "Cursor-activated reference appearance saves readers' time."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title:'Referenced',
          description: "Fully. This also gives Urban Cruise Ship grounds for insisting proper credit is given to us in return."
        }
      )
    %>

    <%- include
      ("./partials/ucs-first-panel.ejs",
        {
          title: 'Copyrighted',
          description: "Urban Cruise Ship wants to be able to prevent misuse or misrepresentation of its material."
        }
      )
    %>

  </div>

</div>
