/*
 * athenaps.com — the two Flash movies of the public site, rebuilt in HTML + CSS (2026-10-03).
 *
 *   inc/main_img.swf   767 x 211  the main banner      ->  .aps-banner
 *   inc/left_menu.swf  233 x 211  the left menu        ->  .aps-leftmenu
 *   (left_menu_01..05.swf = the same menu with one item selected -> a.is-current)
 *
 * Every number below is read out of the movies themselves (stage size, bitmaps, text
 * positions, colours, the 290-frame / 30 fps timeline), not eyeballed:
 *
 *   banner timeline (one loop = 290 frames = 9.667 s, linear tweens)
 *     photo 1        f1-20 fades in from 20 % with a blur, holds, f110-143 blurs out
 *     photo 2        f132-159 fades in, holds, f250-290 blurs out to 20 %
 *     white veil     303 x 101 behind the words, f14-20 to 50 %
 *     YOU DO         f14-26 in,  f242-251 out      (Myriad Pro Light, #333)
 *     THE PRACTICE   f21-33 in (slides 9 px left / 4 px down), f259-268 out   (Bold, #000)
 *     AND WE DO      f29-38 in,  f250-259 out
 *     THE REST       f34-45 in (slides 10 px left), f260-269 out
 *   A keyframe percentage is (frame - 1) / 290.
 *
 * Myriad Pro (the movies' typeface) is not a web font. Where it is not installed the text
 * is set in Source Sans 3 — Adobe's open-source sans by the same foundry, near-identical
 * in shape and width (SIL Open Font License; the file and its licence are in inc/fonts/,
 * served from this site, no third-party request). Both banner lines are right-aligned on
 * the movie's right edge (x = 713.5), so a small width difference moves the left end only.
 */

@font-face {
  font-family: "APS Source Sans";
  src: url(fonts/SourceSans3-latin.woff2) format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ───────────────────────── main banner ───────────────────────── */

.aps-banner {
  position: relative;
  width: 767px;
  height: 211px;
  overflow: hidden;
  background: #fff url(../images/banner_bg.png) no-repeat 0 0;
  font-family: "Myriad Pro", "APS Source Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.aps-banner__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 767px;
  height: 211px;
  border: 0;
  opacity: 0;
  animation: 9.667s linear infinite;
}
.aps-banner__photo--1 { animation-name: aps-banner-photo1; }
.aps-banner__photo--2 { animation-name: aps-banner-photo2; }

.aps-banner__veil {
  position: absolute;
  left: 435px;      /* 586.3 - 151.45 */
  top: 38px;        /* 88.6 - 50.65 */
  width: 303px;
  height: 101px;
  background: #fff;
  opacity: 0;
  animation: aps-banner-veil 9.667s linear infinite;
}

.aps-banner__line {
  position: absolute;
  right: 53px;      /* 767 - 713.5 */
  margin: 0;
  padding: 0;
  font-size: 0;     /* no gap between the two inline-block words but the 5 px below */
  line-height: 30px;
  white-space: nowrap;
  text-align: right;
}
.aps-banner__line--1 { top: 60px; }   /* baseline 83 */
.aps-banner__line--2 { top: 98px; }   /* baseline 121 */

.aps-banner__word {
  display: inline-block;
  font-size: 27px;  /* 14 px glyphs placed at 1.92x */
  line-height: 30px;
  opacity: 0;
  animation: 9.667s linear infinite;
}
.aps-banner__word--light { font-weight: 350; color: #333; }   /* Myriad Pro Light sits between Source Sans 300 and 400 */
.aps-banner__word--bold  { font-weight: 700; color: #000; margin-left: 5px; }
.aps-banner__word--a { animation-name: aps-banner-a; }
.aps-banner__word--b { animation-name: aps-banner-b; }
.aps-banner__word--c { animation-name: aps-banner-c; }
.aps-banner__word--d { animation-name: aps-banner-d; }

/* Flash BlurFilter 30 / 20 (a box blur) ~ a Gaussian of about a third of the box. */
@keyframes aps-banner-photo1 {
  0%     { opacity: 0.2; filter: blur(9px); }
  6.55%  { opacity: 1;   filter: blur(0); }
  37.59% { opacity: 1;   filter: blur(0); }
  48.97% { opacity: 0;   filter: blur(9px); }
  100%   { opacity: 0;   filter: blur(9px); }
}
@keyframes aps-banner-photo2 {
  0%     { opacity: 0;   filter: blur(0); }
  45.17% { opacity: 0;   filter: blur(0); }
  54.48% { opacity: 1;   filter: blur(0); }
  85.86% { opacity: 1;   filter: blur(0); }
  100%   { opacity: 0.2; filter: blur(9px); }
}
@keyframes aps-banner-veil {
  0%     { opacity: 0; }
  4.48%  { opacity: 0; }
  6.55%  { opacity: 0.5; }
  100%   { opacity: 0.5; }
}
@keyframes aps-banner-a {            /* YOU DO */
  0%     { opacity: 0; filter: blur(6px); }
  4.48%  { opacity: 0; filter: blur(6px); }
  8.62%  { opacity: 1; filter: blur(0); }
  83.10% { opacity: 1; filter: blur(0); }
  86.21% { opacity: 0; filter: blur(0); }
  100%   { opacity: 0; filter: blur(0); }
}
@keyframes aps-banner-b {            /* THE PRACTICE */
  0%     { opacity: 0; filter: blur(6px); transform: translate(9px, -4px); }
  6.90%  { opacity: 0; filter: blur(6px); transform: translate(9px, -4px); }
  11.03% { opacity: 1; filter: blur(0);   transform: translate(0, 0); }
  88.97% { opacity: 1; filter: blur(0);   transform: translate(0, 0); }
  92.07% { opacity: 0; filter: blur(0);   transform: translate(0, 0); }
  100%   { opacity: 0; filter: blur(0);   transform: translate(0, 0); }
}
@keyframes aps-banner-c {            /* AND WE DO */
  0%     { opacity: 0; filter: blur(6px); }
  9.66%  { opacity: 0; filter: blur(6px); }
  12.76% { opacity: 1; filter: blur(0); }
  85.86% { opacity: 1; filter: blur(0); }
  88.97% { opacity: 0; filter: blur(0); }
  100%   { opacity: 0; filter: blur(0); }
}
@keyframes aps-banner-d {            /* THE REST */
  0%     { opacity: 0; filter: blur(6px); transform: translate(10px, 1px); }
  11.38% { opacity: 0; filter: blur(6px); transform: translate(10px, 1px); }
  15.17% { opacity: 1; filter: blur(0);   transform: translate(0, 0); }
  89.31% { opacity: 1; filter: blur(0);   transform: translate(0, 0); }
  92.41% { opacity: 0; filter: blur(0);   transform: translate(0, 0); }
  100%   { opacity: 0; filter: blur(0);   transform: translate(0, 0); }
}

/* A visitor who asked the system for less motion gets the banner's resting picture. */
@media (prefers-reduced-motion: reduce) {
  .aps-banner__photo,
  .aps-banner__veil,
  .aps-banner__word { animation: none; }
  .aps-banner__photo--1 { opacity: 1; }
  .aps-banner__veil { opacity: 0.5; }
  .aps-banner__word { opacity: 1; }
}

/* ───────────────────────── left menu ───────────────────────── */

.aps-leftmenu {
  position: relative;
  width: 233px;
  height: 211px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;   /* the site's body centres text */
  background: #fff url(../images/left_menu_html_bg.png) no-repeat 0 0;
  font-family: "Myriad Pro", "APS Source Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.aps-leftmenu li {
  position: absolute;
  left: 45px;       /* the movie's highlight bar: x 44.9, 133 x 19.5 */
  height: 20px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
/* The movie had five items 30 px apart; NOE / NOTR (added to this cell in 2025) follow them,
   so the seven rows sit 24 px apart to stay inside the 211 px cell. */
.aps-leftmenu li:nth-child(1) { top: 24px; }
.aps-leftmenu li:nth-child(2) { top: 48px; }
.aps-leftmenu li:nth-child(3) { top: 72px; }
.aps-leftmenu li:nth-child(4) { top: 96px; }
.aps-leftmenu li:nth-child(5) { top: 120px; }
.aps-leftmenu li:nth-child(6) { top: 154px; }
.aps-leftmenu li:nth-child(7) { top: 178px; }
.aps-leftmenu li.aps-leftmenu__first-extra:before {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  width: 133px;
  border-top: 1px solid #d9d9d9;
}
/* The site's own sheet styles every link (a:link — red, Verdana 11 px bold); these selectors
   outrank it whatever the order the two sheets load in. */
ul.aps-leftmenu li a,
ul.aps-leftmenu li a:link,
ul.aps-leftmenu li a:visited {
  display: inline-block;
  box-sizing: border-box;
  min-width: 133px;     /* the movie's bar; a longer label (OUTSOURCING BENEFITS) widens it — in the
                           movie the bar stayed 133 px and the label's white end ran off it */
  height: 20px;
  padding: 0 6px 0 4px; /* text x 48.6 */
  font-family: "Myriad Pro", "APS Source Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
  color: #666;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.27s linear, color 0.27s linear;   /* the bar's 8 frames */
}
ul.aps-leftmenu li a:hover,
ul.aps-leftmenu li a:focus,
ul.aps-leftmenu li a.is-current {
  background-color: #54bec7;
  color: #fff;
}

/* ───────────────────────── office address (contacts.aspx) ─────────────────────────
   The "Office" block was a picture (images/about_hansol_add.png, 260 x 92): the company name in
   the site's blue, then three grey lines. Measured on the picture: name rows 4-23, #415eaf, 244 px
   wide; lines rows 36-87, 17.5 px apart, #666, the longest 243 px. It is text now, so an address
   change is a text edit (snippets/office_address.html). */
.aps-office {
  display: block;
  width: 260px;
  text-align: left;
  font-family: "Myriad Pro", "APS Source Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.aps-office__name {
  display: block;
  padding-top: 2px;
  font-size: 18.5px;    /* the name is 244 px wide, as in the picture */
  font-weight: 600;
  line-height: 24px;
  color: #415eaf;
  white-space: nowrap;
}
.aps-office__line {
  display: block;
  font-size: 15.5px;    /* the tel / fax line is ~240 px wide, as in the picture */
  font-weight: 400;
  line-height: 17.5px;
  color: #666;
  white-space: nowrap;
}
.aps-office__name + .aps-office__line { margin-top: 9px; }