kcc-gem-theme-original 2.0.1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/body.html +0 -1
  3. data/_includes/emergency-alerts.html +6 -28
  4. data/_includes/hash/theme_hash.yml +1 -1
  5. data/_layouts/default.html +4 -2
  6. data/assets/img/external-icon.svg +1 -0
  7. data/assets/js/alerts/addAccordionOrTabHistoryStates.js +3 -1
  8. data/assets/js/alerts/alerts.js +47 -39
  9. data/assets/js/alerts/contentHashLink.js +42 -34
  10. data/assets/js/alerts/createAlertsHtml.js +147 -24
  11. data/assets/js/alerts/parseMarkdownToHTML.js +7 -7
  12. data/assets/js/dist/102.9601cb159250d0a4fcbe.bundle.js +1 -0
  13. data/assets/js/dist/123.9601cb159250d0a4fcbe.bundle.js +1 -0
  14. data/assets/js/dist/{384.11b2db22ed35039c9553.bundle.js → 124.9601cb159250d0a4fcbe.bundle.js} +1 -1
  15. data/assets/js/dist/124.9601cb159250d0a4fcbe.css +1 -0
  16. data/assets/js/dist/143.9601cb159250d0a4fcbe.bundle.js +1 -0
  17. data/assets/js/dist/183.9601cb159250d0a4fcbe.bundle.js +1 -0
  18. data/assets/js/dist/3.9601cb159250d0a4fcbe.bundle.js +1 -0
  19. data/assets/js/dist/303.9601cb159250d0a4fcbe.bundle.js +1 -0
  20. data/assets/js/dist/354.9601cb159250d0a4fcbe.bundle.js +1 -0
  21. data/assets/js/dist/453.9601cb159250d0a4fcbe.bundle.js +2 -0
  22. data/assets/js/dist/484.9601cb159250d0a4fcbe.bundle.js +2 -0
  23. data/assets/js/dist/484.9601cb159250d0a4fcbe.bundle.js.LICENSE.txt +11 -0
  24. data/assets/js/dist/522.9601cb159250d0a4fcbe.bundle.js +1 -0
  25. data/assets/js/dist/522.9601cb159250d0a4fcbe.css +1 -0
  26. data/assets/js/dist/586.9601cb159250d0a4fcbe.bundle.js +1 -0
  27. data/assets/js/dist/602.9601cb159250d0a4fcbe.bundle.js +1 -0
  28. data/assets/js/dist/635.9601cb159250d0a4fcbe.bundle.js +2 -0
  29. data/assets/js/dist/695.9601cb159250d0a4fcbe.bundle.js +2 -0
  30. data/assets/js/dist/719.9601cb159250d0a4fcbe.bundle.js +1 -0
  31. data/assets/js/dist/723.9601cb159250d0a4fcbe.bundle.js +1 -0
  32. data/assets/js/dist/766.9601cb159250d0a4fcbe.bundle.js +1 -0
  33. data/assets/js/dist/780.9601cb159250d0a4fcbe.bundle.js +1 -0
  34. data/assets/js/dist/965.9601cb159250d0a4fcbe.bundle.js +1 -0
  35. data/assets/js/dist/977.9601cb159250d0a4fcbe.bundle.js +1 -0
  36. data/assets/js/dist/bootstrap.9601cb159250d0a4fcbe.css +1 -0
  37. data/assets/js/dist/theme.9601cb159250d0a4fcbe.bundle.js +2 -0
  38. data/assets/js/dist/theme.9601cb159250d0a4fcbe.css +1 -0
  39. data/assets/js/src/accessibleExternalLinks.js +57 -0
  40. data/assets/js/src/all.js +30 -7
  41. data/assets/js/src/searchPageJumpLinkFix.js +27 -0
  42. data/assets/js/src/searchResultsWCAGFix.js +43 -0
  43. data/assets/scss/0-tools/_bootstrap-overrides.scss +20 -5
  44. data/assets/scss/0-tools/_gsc-search-page-overrides.scss +290 -0
  45. data/assets/scss/0-tools/_vars.scss +15 -1
  46. data/assets/scss/1-base/_html.scss +5 -0
  47. data/assets/scss/1-base/_links.scss +16 -31
  48. data/assets/scss/1-base/_typography.scss +12 -5
  49. data/assets/scss/3-layout/_positioning.scss +5 -44
  50. data/assets/scss/searchPageOverrides.scss +2 -0
  51. metadata +39 -25
  52. data/assets/js/alerts/checkForPrefersReducedMotion.js +0 -17
  53. data/assets/js/dist/102.11b2db22ed35039c9553.bundle.js +0 -1
  54. data/assets/js/dist/143.11b2db22ed35039c9553.bundle.js +0 -1
  55. data/assets/js/dist/183.11b2db22ed35039c9553.bundle.js +0 -1
  56. data/assets/js/dist/3.11b2db22ed35039c9553.bundle.js +0 -1
  57. data/assets/js/dist/303.11b2db22ed35039c9553.bundle.js +0 -1
  58. data/assets/js/dist/354.11b2db22ed35039c9553.bundle.js +0 -1
  59. data/assets/js/dist/384.11b2db22ed35039c9553.css +0 -1
  60. data/assets/js/dist/453.11b2db22ed35039c9553.bundle.js +0 -2
  61. data/assets/js/dist/604.11b2db22ed35039c9553.bundle.js +0 -1
  62. data/assets/js/dist/635.11b2db22ed35039c9553.bundle.js +0 -2
  63. data/assets/js/dist/695.11b2db22ed35039c9553.bundle.js +0 -2
  64. data/assets/js/dist/723.11b2db22ed35039c9553.bundle.js +0 -1
  65. data/assets/js/dist/965.11b2db22ed35039c9553.bundle.js +0 -1
  66. data/assets/js/dist/977.11b2db22ed35039c9553.bundle.js +0 -1
  67. data/assets/js/dist/bootstrap.11b2db22ed35039c9553.css +0 -1
  68. data/assets/js/dist/theme.11b2db22ed35039c9553.bundle.js +0 -2
  69. data/assets/js/dist/theme.11b2db22ed35039c9553.css +0 -1
  70. /data/assets/js/dist/{453.11b2db22ed35039c9553.bundle.js.LICENSE.txt → 453.9601cb159250d0a4fcbe.bundle.js.LICENSE.txt} +0 -0
  71. /data/assets/js/dist/{635.11b2db22ed35039c9553.bundle.js.LICENSE.txt → 635.9601cb159250d0a4fcbe.bundle.js.LICENSE.txt} +0 -0
  72. /data/assets/js/dist/{695.11b2db22ed35039c9553.bundle.js.LICENSE.txt → 695.9601cb159250d0a4fcbe.bundle.js.LICENSE.txt} +0 -0
  73. /data/assets/js/dist/{bootstrap.11b2db22ed35039c9553.bundle.js → bootstrap.9601cb159250d0a4fcbe.bundle.js} +0 -0
  74. /data/assets/js/dist/{theme.11b2db22ed35039c9553.bundle.js.LICENSE.txt → theme.9601cb159250d0a4fcbe.bundle.js.LICENSE.txt} +0 -0
@@ -0,0 +1 @@
1
+ .nav-tabs{border-bottom:1px solid #b1b1b1}.nav-tabs .nav-link{background-color:#f8f9fa;border-left-color:#e5e8ed;border-left-style:solid;border-left-width:1px;border-right-color:#e5e8ed;border-right-style:solid;border-right-width:1px;border-top-color:#e5e8ed;border-top-style:solid;border-top-width:1px;border-bottom-color:#b1b1b1}.nav-tabs .nav-link.active{border-color:#b1b1b1 #b1b1b1 #fff}.nav-tabs .nav-link:not(.active){color:#0056d5}.navbar-brand{margin-right:0}@media screen and (min-width: 768px){.navbar-brand{margin-right:1rem}}.btn{vertical-align:baseline}.modal-open .gsc-search-button{margin-right:15px}@media screen and (max-width: 992px){.dropdown-toggle::after{transform:rotate(0deg);transition:transform .3s ease-in-out}.nav-item.dropdown.show .dropdown-toggle::after{transform:rotate(-180deg)}}.dropdown-toggle.btn::after{transform:rotate(0deg);transition:transform .3s ease-in-out}.nav-item.dropdown.show .dropdown-toggle.btn::after{transform:rotate(-180deg)}@media screen and (min-width: 992px){.dropdown-toggle:not(.btn)::after{display:none}}.alert-warning{border-color:#856404}.alert-danger{border-color:#721c24}.alert-info{border-color:#0c5460}.alert-primary{border-color:#004085}.alert a{color:#0257d4}.alert a:hover,.alert a:focus{color:#02419c}.editor-link{display:none}.cms-editor-active .editor-link{display:block}.editor-button{display:none}.cms-editor-active .editor-button{display:inline-block}.nav-global__gcse-wrapper #___gcse_0:hover #gsc-iw-id1,.nav-global__gcse-wrapper #___gcse_0:focus #gsc-iw-id1{filter:drop-shadow(2px 2px 6px rgba(128, 128, 128, 0.5))}.nav-global__gcse-wrapper #gsc-iw-id1{border-radius:2rem;padding-left:.5rem;border:solid thin #b1b1b1;line-height:1;padding-top:0;padding-bottom:3px;height:2.5rem}#gs_id50{height:2.5rem}#gs_tti50{height:auto;padding:0 10px 0 56px}.gsib_b{height:auto !important;padding:0 4px 4px 0 !important}#gsc-i-id1{background:none !important}form.gsc-search-box{max-width:unset !important}.nav-global__gcse-wrapper .gsc-search-button-v2{background-color:rgba(0,0,0,0) !important;border:none !important;pointer-events:auto;position:relative;right:30px;transition-property:right;transition-duration:.2s}.nav-global__gcse-wrapper .gsst_a .gscb_a{vertical-align:middle}.nav-global__gcse-wrapper button.gsc-overrides__clear-x{right:48px;padding-right:5px !important}.nav-global__gcse-wrapper .gsc-search-button-v2 svg{fill:#0f3b63 !important;height:1.25rem;width:1.25rem;transition-property:fill;transition-duration:.2s}.nav-global__gcse-wrapper .gsc-search-button-v2:hover svg,.nav-global__gcse-wrapper .gsc-search-button-v2:focus svg{fill:#c61f48 !important}.nav-global__gcse-wrapper td.gsc-search-button{display:inline;pointer-events:none;position:absolute;right:50px}@media screen and (min-width: 1400px){.nav-global__gcse-wrapper td.gsc-search-button{right:44px}}.nav-global__search-collapse--visible #___gcse_0{margin-bottom:20px}#google_translate_element{position:fixed;bottom:.25rem;right:.25rem !important;z-index:99999}.goog-te-gadget{font-family:Roboto,"Open Sans",sans-serif !important;text-transform:uppercase;font-weight:500}.goog-te-gadget:hover{color:#fff}.goog-te-gadget-simple{background-color:rgba(255,255,255,.85) !important;border:1px solid rgba(0,0,0,.95) !important;border-radius:4px !important;cursor:pointer;display:inline-block;font-size:1rem !important;height:100%;line-height:2rem !important;margin-right:5px;padding:8px !important;transition:background-color .2s;white-space:nowrap;zoom:1}.goog-te-gadget-simple:hover{background-color:rgba(0,123,255,.85) !important}.goog-te-gadget-simple:focus{background-color:rgba(0,123,255,.85) !important}.goog-te-gadget-simple:hover .VIpgJd-ZVi9od-xl07Ob-lTBxed{color:#fff !important}.VIpgJd-ZVi9od-xl07Ob-lTBxed{color:#000 !important;text-decoration:none !important}.VIpgJd-ZVi9od-xl07Ob-lTBxed:before{font-family:"Material Icons";content:"";margin-right:16px;font-size:2rem;vertical-align:-10px}.VIpgJd-ZVi9od-xl07Ob-lTBxed span:nth-child(5){display:none}.VIpgJd-ZVi9od-xl07Ob-lTBxed span:nth-child(3){border:none !important;font-family:"Material Icons"}.VIpgJd-ZVi9od-xl07Ob-lTBxed span:nth-child(3):after{font-family:"Material Icons";content:"";font-size:1.5rem;vertical-align:-6px}.goog-te-gadget-icon{background-image:url(https://placehold.it/32) !important;background-position:0px 0px;height:32px !important;width:32px !important;margin-right:8px !important;display:none}.VIpgJd-ZVi9od-ORHb-OEVmcd.skiptranslate{display:none !important}body{top:0px !important}@media(max-width: 667px){#google_translate_element{bottom:.25rem;left:16px !important;width:100% !important}#google_translate_element .goog-te-gadget{width:100% !important}#google_translate_element .skiptranslate{width:100% !important}#google_translate_element .goog-te-gadget-simple{width:calc(100% - 32px) !important;text-align:center}}a.VIpgJd-ZVi9od-xl07Ob-lTBxed{text-decoration:none !important}a.VIpgJd-ZVi9od-xl07Ob-lTBxed:hover{text-decoration:none !important}.VIpgJd-ZVi9od-vH1Gmf{border:none !important}@media print{#globalNav,#mainNav,#emergencyAlerts,.hero-slider__slider,.position__translate,.footer{display:none}.typography__p,p,ul:not(.navbar-nav),ol,.btn-primary{color:#000 !important}}body{font-size:1rem}.typography__nav-heading{color:#0f3b63;display:inline;font-family:"Eurostile",sans-serif;font-display:swap;font-size:1.5rem;font-style:italic;font-weight:700;text-transform:uppercase;transition-property:color;transition-timing-function:ease;transition-duration:.4s}.typography__nav-heading:hover,.typography__nav-heading:focus{color:#c61f48}.typography__nav-heading--smaller{font-size:1.25rem}@media screen and (min-width: 360px){.typography__nav-heading{font-size:1.8rem}.typography__nav-heading--smaller{font-size:1.5rem}}@media screen and (min-width: 410px){.typography__nav-heading{font-size:2rem}}@media screen and (min-width: 576px){.typography__nav-heading{font-size:2.3rem}}@media screen and (min-width: 768px){.typography__nav-heading{font-size:2.4rem}}@media screen and (min-width: 1500px){.typography__nav-heading{font-size:2.6rem}}.typography__footer-heading{font-family:"Roboto",sans-serif;font-size:1.95rem;font-weight:900}@media screen and (min-width: 360px){.typography__footer-heading{font-size:2.2rem}}@media screen and (min-width: 375px){.typography__footer-heading{font-size:2.4rem}}@media screen and (min-width: 410px){.typography__footer-heading{font-size:2.6rem}}.typography__call-to-action{color:#c61f48;font-family:"Oswald",sans-serif;font-size:2.8rem;font-weight:600;line-height:2.8rem;margin-bottom:30px;margin-top:20px}.typography__contacts--name{color:#0f3b63;font-family:"Roboto",sans-serif;font-size:1.3em;font-weight:700;margin-bottom:.2rem}.typography__contacts--title{color:#555;font-family:"Roboto",sans-serif;font-size:1.1em;font-weight:700;margin-bottom:.2rem}.typography__orange-h4{color:#d58106;font-family:"Oswald",sans-serif;font-size:2.4rem}.typography__sub-nav--red-h2{color:#c61f48;font-family:"Oswald",sans-serif;font-size:1.4rem;font-weight:500;text-transform:uppercase}@media screen and (min-width: 768px){.typography__sub-nav--red-h2{font-size:1.8rem}}.typography__section--heading{color:#c61f48;font-family:"Oswald",sans-serif;font-size:2rem;font-weight:500}.typography__header-global--nav-top,.typography__header-global--nav-bottom,.typography__header-global--nav-local{color:#0f3b63;font-family:"Oswald",sans-serif;font-size:1rem;font-weight:500;letter-spacing:.05rem;padding-bottom:.25rem;padding-top:.25rem;text-transform:capitalize}@media screen and (min-width: 992px){.typography__header-global--nav-top{color:#b8babc;font-size:1.1rem}.typography__header-global--nav-top:hover,.typography__header-global--nav-top:focus{color:#b8babc}}@media screen and (min-width: 992px){.typography__header-global--nav-bottom{color:#fff;font-size:1.05rem;font-weight:400}}@media screen and (min-width: 992px){.typography__header-global--nav-bottom:hover,.typography__header-global--nav-bottom:focus,.header-global__dropdown:hover .typography__header-global--nav-bottom,.header-global__dropdown:focus .typography__header-global--nav-bottom{color:#0f3b63}}@media screen and (min-width: 992px){.typography__header-global--nav-local{font-size:1rem;font-weight:400}.nav-link:not([role=tab]){margin-left:5px;margin-right:5px}}.typography__nav-link{color:#fff;font-family:"Oswald",sans-serif;font-size:1.05rem;font-weight:400;letter-spacing:.05rem;text-transform:capitalize}.typography__nav-local--nav-link{font-family:"Oswald",sans-serif;font-size:1rem;font-weight:500;text-transform:uppercase}.typography__nav-local--color{color:#0f3b63}.typography__power-text{color:#fff;font-family:"Roboto",sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}@media screen and (min-width: 360px){.typography__power-text{font-size:1.3rem}}@media screen and (min-width: 768px){.typography__power-text{font-size:2.2rem}}@media screen and (min-width: 992px){.typography__power-text{font-size:2.9rem}}@media screen and (min-width: 1200px){.typography__power-text{font-size:3.1rem}}.typography__h1{color:#555;font-family:"Roboto",sans-serif;font-size:2rem;font-weight:500}.typography__h2{color:#0f3b63;font-family:"Roboto",sans-serif;font-size:1.75rem;font-weight:600}.typography__h3{color:#c61f48;font-family:"Roboto",sans-serif;font-size:1.7rem;font-weight:600}.typography__h4{color:#555;font-family:"Roboto",sans-serif;font-weight:700;font-size:1.5rem}.typography__h5{color:#555;font-family:"Roboto",sans-serif;font-weight:700;font-size:1.4rem}.typography__h6{color:#555;font-family:"Roboto",sans-serif;font-weight:700;font-size:1.3rem}.typography__h5--description{color:#58585b;font-family:"Oswald",sans-serif;font-size:1.25rem;font-weight:400}.typography__phone--span{color:#fff;font-family:"Oswald",sans-serif;font-size:1.3rem;font-weight:400;letter-spacing:.07rem;white-space:nowrap}@media screen and (min-width: 768px){.typography__phone--span{font-size:1.45rem}}@media screen and (min-width: 1024px){.typography__phone--span{font-size:1.5rem}}.typography__p--bold{color:#555;font-family:"Roboto",sans-serif;font-weight:700;font-size:1.25rem;line-height:1.2}.typography__stories--quote{color:#0f3b63;font-family:"Oswald",sans-serif;font-size:1.1em;font-weight:300}@media screen and (min-width: 488px){.typography__stories--quote{font-size:1.3rem}}@media screen and (min-width: 768px){.typography__stories--quote{font-size:1.2rem}}@media screen and (min-width: 992px){.typography__stories--quote{font-size:1.4rem}}.typography__col--heading-underline{background-image:url(/assets/img/heading-bg-underline.png);background-repeat:no-repeat;background-position:0 50px}.typography__col--heading-underline-tan{background-image:url(/assets/img/heading-bg-underline-tan.png);background-repeat:no-repeat;background-position:0 50px}p,ul:not(.navbar-nav),ol,.typography__p{color:#555;font-family:"Open Sans",sans-serif;font-size:1rem}.typography__tables th{color:#c61f48;font-family:"Roboto",sans-serif;font-weight:700}.typography__tables td{color:#555;font-family:"Open Sans",sans-serif;font-size:1rem}h1 sup,h2 sup,h3 sup,h4 sup,h5 sup,h6 sup{font-size:45% !important;top:-1em;font-weight:normal}.typography__register--h2{color:#fff;font-family:eurostile,sans-serif;font-size:2.4rem;font-weight:500;letter-spacing:.03rem;position:relative;top:30%;margin-bottom:-10px}@media screen and (min-width: 400px){.typography__register--h2{font-size:3rem}}@media screen and (min-width: 768px){.typography__register--h2{font-size:5.2rem}}@media screen and (min-width: 1200px){.typography__register--h2{font-size:6rem}}@media screen and (min-width: 1800px){.typography__register--h2{font-size:6.6rem}}.typography__register--h3{color:#fff;font-family:eurostile,sans-serif;font-size:1.2rem;font-weight:500;letter-spacing:.03rem;position:relative;top:31%}@media screen and (min-width: 400px){.typography__register--h3{font-size:1.45rem;top:30.5%}}@media screen and (min-width: 768px){.typography__register--h3{font-size:2.5rem;top:30%}}@media screen and (min-width: 1200px){.typography__register--h3{font-size:2.6rem;top:30%}}@media screen and (min-width: 1800px){.typography__register--h3{font-size:2.7rem;top:30%}}.typography__register--caption{color:#fff;font-family:"Oswald",sans-serif;font-size:1rem;font-weight:500;letter-spacing:.07rem;position:absolute;bottom:15px}@media screen and (min-width: 1200px){.typography__register--caption{font-size:1.2rem}}.typography__register-h4{font-family:"Oswald",sans-serif;font-size:1.6rem}@media screen and (min-width: 768px){.typography__register-h4{font-size:2rem}}@media screen and (min-width: 1200px){.typography__register-h4{font-size:2rem}}@media screen and (min-width: 1800px){.typography__register-h4{font-size:2.3rem}}.typography__register--h5{color:#c61f48;font-family:"Oswald",sans-serif;font-size:2rem;font-weight:700;letter-spacing:.03rem;margin-bottom:50px}@media screen and (min-width: 768px){.typography__register--h5{font-size:2.8rem}}@media screen and (min-width: 992px){.typography__register--h5{margin-bottom:60px}}@media screen and (min-width: 1200px){.typography__register-h5{font-size:3rem}}.typography__register--student-p{color:#000;font-weight:600;font-size:1.2em;margin-top:15px}.typography__register--img-cap{font-weight:600;display:block}.typography__register-itransfer{font-size:1.7rem;font-weight:600;line-height:1;position:absolute;top:4rem;margin-left:-20px}@media screen and (min-width: 400px){.typography__register-itransfer{font-size:1.8rem}}@media screen and (min-width: 768px){.typography__register-itransfer{font-size:1.9rem}}.typography__register--h6{color:#c61f48;font-family:"Saira","sans-serif";font-weight:700;font-size:2rem;letter-spacing:.03rem}#page-top::before{display:block;content:" ";margin-top:-60px;height:60px;visibility:hidden;pointer-events:none}.typography__larger-p{font-size:1.2rem}.typography__register--thank-you{color:#0f3b63;font-family:"Eurostile",sans-serif;font-display:swap;font-size:2rem}.typography__register--thank-you--message{color:#c61f48;font-family:"Saira","sans-serif";font-weight:700;font-size:1.4rem}@media screen and (min-width: 768px){.typography__register--thank-you{font-size:2.4rem;margin-left:100px;margin-top:-10px}.typography__register--thank-you--message{font-size:1.6rem;margin-left:95px}}@media screen and (min-width: 1200px){.typography__register--thank-you{font-size:2.6rem}}@media screen and (min-width: 1800px){.typography__register--thank-you{font-size:3rem;margin-top:-15px}}@media screen and (max-width: 992px){.typography__nowrap--sm{white-space:nowrap}}.typography__color--inherit{color:inherit}.typography__my-kcc{font-family:"Eurostile",sans-serif;font-display:swap;line-height:1.2;font-size:1.2rem}.typography__alert{color:#856404}.typography__alert:last-child{margin-bottom:0}.typography__header-global--nav-bottom:hover{cursor:default}.links__kcc-logo{display:inline;float:left;width:120px;height:80px}.links__darker-link{color:#006ce0}.navbar-light .navbar-nav .nav-link.links__nav-link--color:not(.btn-primary){color:#0f3b63}.navbar-light .navbar-nav .nav-link.links__nav-link--color:not(.btn-primary):hover,.navbar-light .navbar-nav .nav-link.links__nav-link--color:not(.btn-primary):focus{color:#c61f48}.navbar-light .navbar-nav .nav-link.links__nav-link--color.btn-primary{color:#fff}.navbar-light .navbar-nav .active>.nav-link{border-bottom-color:#c61f48;border-bottom-style:solid;border-bottom-width:thick;color:#0f3b63;padding-bottom:0}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:#c61f48}.links__phone--span{color:#fff;position:relative;text-decoration:none}.links__phone--span:visited{color:#fff}.links__phone--span:hover,.links__phone--span:focus{color:#fff;text-decoration:none}.links__phone--span:focus:after,.links__phone--span:hover:after{opacity:1;transform:translateY(-0.2em)}.links__phone--span:after{background-color:#d58106;bottom:-0.325rem;content:"";display:block;height:.1875rem;opacity:0;position:absolute;transition:opacity .3s,transform .3s;width:100%}.links__no-underline{text-decoration:none}.links__no-underline:hover{text-decoration:none}@media screen and (min-width: 992px){.links__header-global--nav-local{position:relative}.active .links__header-global--nav-local::after{background-color:#c61f48;bottom:.125rem;content:"";display:block;height:.145rem;position:absolute;width:calc(100% - 1rem)}}.links__skip-nav{background-color:#0f3b63;color:#fff;left:2px;padding-bottom:.25rem;padding-left:.5rem;padding-right:.5rem;padding-top:.25rem;position:fixed;top:2px;z-index:2000}.links__external::after{content:"";display:inline-block;width:1em;height:1em;margin-left:.25em;background-color:currentColor;-webkit-mask-image:url("/assets/img/external-icon.svg");mask-image:url("/assets/img/external-icon.svg");-webkit-mask-size:cover;mask-size:cover;vertical-align:middle}.navbar-light .navbar-nav .nav-link.buttons__btn-primary-custom{background-color:#c61f48;color:#fff}.navbar-light .navbar-nav .nav-link.buttons__btn-primary-custom:hover{background-color:#0f3b63}.buttons__yt-subscribe{display:inline-block;height:1rem;margin-top:-4px;margin-right:5px;transform:scale(1.8, 1.8);vertical-align:middle;width:1rem}.buttons__custom-danger{margin-right:20px}.buttons__btn-margin-top{margin-top:20px}.btn-primary{background-color:#0051a7;border-color:#003773}.btn-primary:hover{background-color:#022b55;border-color:#021e3d}.buttons__no-decoration{text-decoration:none}.buttons__no-decoration:hover{text-decoration:none}.buttons__no-decoration:focus{text-decoration:none}.buttons__no-decoration:visited{text-decoration:none}.buttons{display:inline-block;padding-left:.9rem;padding-right:.9rem;padding-top:.125rem;padding-bottom:.125rem}.buttons__my-kcc{border-color:#b8babc;padding-top:.125rem;padding-bottom:.125rem;margin-top:.25rem;margin-bottom:.375rem}.buttons__my-kcc--mobile{position:absolute;bottom:.65rem;left:1rem}@media screen and (min-width: 992px){.buttons__my-kcc:hover,.buttons__my-kcc:focus{background-color:#0c3050}}@media screen and (max-width: 992px){.buttons__my-kcc:hover,.buttons__my-kcc:focus{color:#c61f48}}.buttons__action{color:#fff;background-color:#c61f48;border-color:#8a1632;font-family:"Roboto",sans-serif;font-size:1.3rem;font-weight:600;line-height:36px;letter-spacing:.075rem;width:100%}.buttons__action:hover,.buttons__action:focus{color:#fff;background-color:#0f3b63}@media screen and (min-width: 360px){.buttons__action{font-size:1.75rem;line-height:48px}}@media screen and (min-width: 768px){.buttons__action{font-size:1.3rem;line-height:36px}}@media screen and (min-width: 992px){.buttons__action{font-size:1.75rem;line-height:48px}}.img__full-width{width:100%}.img__shadow{filter:drop-shadow(3px 3px 10px rgba(126, 126, 126, 0.45))}.img__shadow--border{filter:drop-shadow(3px 3px 10px rgba(126, 126, 126, 0.45));border:3px solid #0f3b63}.background__color--tan{background-color:#fcf1d6}.svg__fill--blue{fill:#0f3b63}.svg__fill--white{fill:#fff}.svg{height:100px;width:100px}.svg--none{fill:none}.svg--blue{fill:#0f3b63}.svg--red{fill:#c61f48}.svg--white{fill:#fff}.svg--max-width{max-width:100%}.svg__button{height:48px;width:48px}.svg--fill-none{fill:none}.svg--fill-white{fill:#fff}.svg--fill-blue{fill:#0f3b63}.svg__action--place{margin-left:-2rem}@media screen and (min-width: 360px){.svg__action--place{margin-left:-3rem}}@media screen and (min-width: 768px){.svg__action--place{margin-left:0}}@media screen and (min-width: 360px){.svg__button{height:48px;width:48px}}@media screen and (min-width: 768px){.svg__button{height:36px;width:36px}}@media screen and (min-width: 992px){.svg__button{height:48px;width:48px}}html{background-color:#b8babc}html{scroll-padding-top:140px}.header__bg{background-image:url("/assets/img/DSC_8724_4x3.jpg");background-size:cover;background-position:center;background-repeat:no-repeat;height:55%;height:55vh}@media screen and (min-width: 1200px){.header__bg{height:auto}}.footer__margin{margin-top:20px}.footer{background-color:#f8f9fa;margin-bottom:-56px;margin-top:60px;padding-bottom:40px;padding-top:40px;width:100%;border-top-color:rgba(0,0,0,.15);border-top-style:solid;border-top-width:thin}a.footer-link{color:#0f3b63;text-decoration:none !important}a.footer-link:hover{color:#c61f48}.footer-heading{transition-property:color;transition-timing-function:ease;transition-duration:.3s}.footer-icons{background-color:#c61f48;border-radius:50%;transition-property:background-color;transition-timing-function:ease;transition-duration:.3s;height:33px;margin:4px;padding:2px;width:33px}@media screen and (min-width: 330px){.footer-icons{height:40px;width:40px}}@media screen and (min-width: 360px){.footer-icons{height:40px;margin:5px;width:40px}}@media screen and (min-width: 412px){.footer-icons{height:45px;width:45px}}@media screen and (min-width: 576px){.footer-icons{height:50px;width:50px}}@media screen and (min-width: 992px){.footer-icons{height:45px;margin:3px;width:45px}}@media screen and (min-width: 1053px){.footer-icons{height:45px;margin:5px;width:45px}}@media screen and (min-width: 1200px){.footer-icons{height:50px;width:50px}}a.footer-social-links,a.footer-social-links .footer-icons{text-decoration:none !important}a.footer-social-links:hover .footer-icons{text-decoration:none !important;background-color:#0f3b63}.footer__mobile--margin-bottom{margin-bottom:20px}@media screen and (min-width: 992px){.footer__mobile--margin-bottom{margin-bottom:0}}.footer__svg--logo{height:36px;max-width:100%}.social-icons__icons{background-color:#c61f48;border-radius:50%;height:33px;margin:4px;padding:2px;transition-property:background-color;transition-timing-function:ease;transition-duration:.3s;width:33px}@media screen and (min-width: 360px){.social-icons__icons{height:40px;margin:5px;width:40px}}@media screen and (min-width: 412px){.social-icons__icons{height:50px;width:50px}}a.social-icons__links,a.social-icons__links .social-icons__icons{text-decoration:none !important}a.social-icons__links:hover .social-icons__icons{text-decoration:none !important;background-color:#0f3b63}.nav-landing{background-color:#c61f48;height:56px;margin-left:0;margin-right:0;max-width:100%;min-width:100%;padding-bottom:5px;padding-left:5%;padding-top:5px;width:100%;z-index:1031}.nav-landing__kcc-logo{margin-left:5px;width:190px}@media screen and (min-width: 360px){.nav-landing__kcc-logo{width:220px}}@media screen and (min-width: 375px){.nav-landing__kcc-logo{width:230px}}@media screen and (min-width: 410px){.nav-landing__kcc-logo{width:255px}}@media screen and (min-width: 488px){.nav-landing__kcc-logo{width:260px}}@media screen and (min-width: 576px){.nav-landing__kcc-logo{width:300px}}@media screen and (min-width: 768px){.nav-landing__kcc-logo{width:320px}}@media screen and (min-width: 992px)and (max-width: 1100px){.nav-landing__kcc-logo{margin-left:-25px;width:310px}}@media screen and (min-width: 1100px){.nav-landing__kcc-logo{margin-left:-25px;width:340px}}.nav-landing__navbar-brand{margin-left:-10px}@media screen and (min-width: 410px){.nav-landing__navbar-brand{margin-left:-15px}}@media screen and (min-width: 488px){.nav-landing__navbar-brand{margin-left:-20px}}@media screen and (min-width: 576px){.nav-landing__navbar-brand{margin-left:-25px}}@media screen and (min-width: 768px){.nav-landing__navbar-brand{margin-left:-35px}}@media screen and (min-width: 992px){.nav-landing__navbar-brand{margin-left:-20px}}@media screen and (min-width: 1000px){.nav-landing__navbar-brand{margin-left:-18px}}@media screen and (min-width: 1080px){.nav-landing__navbar-brand{margin-left:-22px}}@media screen and (min-width: 1200px){.nav-landing__navbar-brand{margin-left:-2.5%}}@media screen and (min-width: 1600px){.nav-landing__navbar-brand{margin-left:-3%}}@media screen and (min-width: 1900px){.nav-landing__navbar-brand{margin-left:-3.25%}}@media screen and (min-width: 2000px){.nav-landing__navbar-brand{margin-left:-3.5%}}.nav-landing__kcc-logo-inverse{margin-left:-3px;width:50px;margin-right:-10px}@media screen and (min-width: 360px){.nav-landing__kcc-logo-inverse{width:60px}}@media screen and (min-width: 410px){.nav-landing__kcc-logo-inverse{width:68px}}@media screen and (min-width: 488px){.nav-landing__kcc-logo-inverse{width:68px}}@media screen and (min-width: 576px){.nav-landing__kcc-logo-inverse{width:73px}}@media screen and (min-width: 768px){.nav-landing__kcc-logo-inverse{width:80px}}@media screen and (min-width: 992px){.nav-landing__kcc-logo-inverse{width:80px;margin-left:-30px;margin-right:20px}}@media screen and (min-width: 1100px){.nav-landing__kcc-logo-inverse{width:85px;margin-right:15px}}@media screen and (min-width: 1300px){.nav-landing__kcc-logo-inverse{width:85px;margin-left:-35px}}@media screen and (min-width: 1400px){.nav-landing__kcc-logo-inverse{width:85px;margin-left:-40px}}.nav-global{background-color:#c61f48;height:56px;margin-left:0;margin-right:0;max-width:100%;min-width:100%;padding-bottom:5px;padding-left:5%;padding-top:5px;width:100%;z-index:1031}.nav-global__kcc-logo{margin-left:5px;width:190px}@media screen and (min-width: 360px){.nav-global__kcc-logo{width:220px}}@media screen and (min-width: 375px){.nav-global__kcc-logo{width:230px}}@media screen and (min-width: 410px){.nav-global__kcc-logo{width:255px}}@media screen and (min-width: 488px){.nav-global__kcc-logo{width:260px}}@media screen and (min-width: 576px){.nav-global__kcc-logo{width:300px}}@media screen and (min-width: 768px){.nav-global__kcc-logo{width:320px}}@media screen and (min-width: 992px)and (max-width: 1100px){.nav-global__kcc-logo{margin-left:-25px;width:310px}}@media screen and (min-width: 1100px){.nav-global__kcc-logo{margin-left:-25px;width:340px}}.clearSearch{background-position:center 72px;padding-top:72px}.search-row{background-color:#005bac;height:46px}.nav-global__gcse-wrapper{margin-left:-5px}@media screen and (min-width: 992px){.nav-global__gcse-wrapper{display:block;margin-top:-18px;width:50%}}.nav-global__search-icon{background-position:center;background-size:20px 20px;background-repeat:no-repeat;display:inline;height:22px;margin:4px;pointer-events:none;width:22px}@media screen and (min-width: 360px){.nav-global__search-icon{background-size:21px 21px}}@media screen and (min-width: 410px){.nav-global__search-icon{background-size:22px 22px}}@media screen and (min-width: 576px){.nav-global__search-icon{background-size:24px 24px;height:24px;width:24px}}@media screen and (min-width: 768px){.nav-global__search-icon{background-size:25px 25px;height:26px;width:26px}}.nav-global .nav-global__search-toggle .nav-global__search-icon{float:right}.nav-global__search-collapse{display:none;margin-top:-113px}@media screen and (min-width: 576px){.nav-global__search-collapse{margin-top:-115px}}@media screen and (min-width: 992px){.nav-global__search-collapse{display:block;margin-left:0;margin-right:0;margin-top:0}}.nav-global__search-collapse--visible{display:block;width:100%}.nav-global__search-toggle{top:40px;text-decoration:none !important}.nav-global__search--open-background{width:120%;background-color:#c61f48;height:65px;position:absolute;z-index:-1;top:-60px;left:-40px}.nav-global__navbar-brand{margin-left:-10px}@media screen and (min-width: 410px){.nav-global__navbar-brand{margin-left:-15px}}@media screen and (min-width: 488px){.nav-global__navbar-brand{margin-left:-20px}}@media screen and (min-width: 576px){.nav-global__navbar-brand{margin-left:-25px}}@media screen and (min-width: 768px){.nav-global__navbar-brand{margin-left:-35px}}@media screen and (min-width: 992px){.nav-global__navbar-brand{margin-left:-20px}}@media screen and (min-width: 1000px){.nav-global__navbar-brand{margin-left:-18px}}@media screen and (min-width: 1080px){.nav-global__navbar-brand{margin-left:-22px}}@media screen and (min-width: 1200px){.nav-global__navbar-brand{margin-left:-2.5%}}@media screen and (min-width: 1600px){.nav-global__navbar-brand{margin-left:-3%}}@media screen and (min-width: 1900px){.nav-global__navbar-brand{margin-left:-3.25%}}@media screen and (min-width: 2000px){.nav-global__navbar-brand{margin-left:-3.5%}}.nav-global__kcc-logo-inverse{margin-left:-3px;width:50px;margin-right:-10px}@media screen and (min-width: 360px){.nav-global__kcc-logo-inverse{width:60px}}@media screen and (min-width: 410px){.nav-global__kcc-logo-inverse{width:68px}}@media screen and (min-width: 488px){.nav-global__kcc-logo-inverse{width:68px}}@media screen and (min-width: 576px){.nav-global__kcc-logo-inverse{width:73px}}@media screen and (min-width: 768px){.nav-global__kcc-logo-inverse{width:80px}}@media screen and (min-width: 992px){.nav-global__kcc-logo-inverse{width:80px;margin-left:-30px;margin-right:20px}}@media screen and (min-width: 1100px){.nav-global__kcc-logo-inverse{width:85px;margin-right:15px}}@media screen and (min-width: 1300px){.nav-global__kcc-logo-inverse{width:85px;margin-left:-35px}}@media screen and (min-width: 1400px){.nav-global__kcc-logo-inverse{width:85px;margin-left:-40px}}.nav-local{top:55px;border-bottom-color:#b1b1b1;border-bottom-style:solid;border-bottom-width:1px}.nav-local__search-toggle{top:86px}.nav-local .nav-link{margin-left:10px;margin-right:10px}@media screen and (min-width: 992px){.nav-local .nav-link{margin-left:5px;margin-right:5px}}@media screen and (min-width: 1200px){.nav-local .nav-link{margin-left:10px;margin-right:10px}}#mainNav .navbar-brand{transition:all ease .4s}@media screen and (min-width: 992px){#mainNav.navbar-shrink{padding-top:0;padding-bottom:0;opacity:.96}#mainNav.navbar-shrink .navbar-brand{transform:scale(0.8, 0.8)}}.error__main-heading{color:#c61f48;font-weight:700}.error__sub-heading{color:#0f3b63;font-weight:700}.benefits__typography--caption{bottom:15px;color:#fff;filter:drop-shadow(0 0 2px rgba(0, 0, 0, 0.25));font-family:"Oswald",sans-serif;font-size:1rem;font-weight:700;letter-spacing:.07rem;position:absolute;right:25px}@media screen and (min-width: 768px){.benefits__typography--caption{font-size:1.1rem}}@media screen and (min-width: 1000px){.benefits__typography--caption{font-size:1.2rem}}.benefits__typography-h4{font-family:"Oswald",sans-serif;font-size:1.6rem;margin-bottom:.5rem}@media screen and (min-width: 768px){.benefits__typography-h4{font-size:2rem}}@media screen and (min-width: 1200px){.benefits__typography-h4{font-size:2rem;margin-bottom:1.5rem}}@media screen and (min-width: 1800px){.benefits__typography-h4{font-size:2.4rem;margin-bottom:1.8rem}}.benefits__typography--h5{color:#c61f48;font-family:"Oswald",sans-serif;font-size:2rem;font-weight:700;letter-spacing:.03rem}.benefits__typography--h5--mb{margin-bottom:40px}@media screen and (min-width: 768px){.benefits__typography--h5{font-size:2.8rem}}@media screen and (min-width: 992px){.benefits__typography--h5--mb{margin-bottom:60px}}.benefits__testimonials--mb{margin-bottom:40px}@media screen and (min-width: 1200px){.benefits__testimonials--mb{margin-bottom:0}}.benefits__typography--h5--black{color:#000;font-family:"Oswald",sans-serif;font-size:2rem;font-weight:400;letter-spacing:.03rem;margin-bottom:60px}@media screen and (min-width: 768px){.benefits__typography--h5--black{font-size:2.1rem}}@media screen and (min-width: 1200px){.benefits__typography-h5--black{font-size:3rem}}.benefits__typography--student-p{font-family:"Open Sans",sans-serif;color:#000;font-weight:600;font-size:1.15rem;margin-top:15px;margin-bottom:.5rem}@media screen and (min-width: 1200px){.benefits__typography--student-p--larger{font-size:1.3rem}}.benefits__typography--img-cap{font-family:"Open Sans",sans-serif;font-size:1.35rem;font-weight:600;display:block}.benefits__typography-itransfer{font-size:1.7rem;font-weight:600;line-height:1;position:absolute;top:4rem;margin-left:-20px}@media screen and (min-width: 400px){.benefits__typography-itransfer{font-size:1.8rem}}@media screen and (min-width: 768px){.benefits__typography-itransfer{font-size:1.9rem}}.benefits__typography--h6{color:#c61f48;font-family:"Saira","sans-serif";font-weight:700;font-size:2rem;letter-spacing:.03rem}.benefits__typography--thank-you{color:#0f3b63;font-family:"Eurostile",sans-serif;font-size:2rem}.benefits__typography--thank-you--message{color:#c61f48;font-family:"Saira","sans-serif";font-weight:700;font-size:1.4rem}@media screen and (min-width: 768px){.benefits__typography--thank-you{font-size:2.4rem;margin-left:100px;margin-top:-10px}.benefits__typography--thank-you--message{font-size:1.6rem;margin-left:95px}}@media screen and (min-width: 1200px){.benefits__typography--thank-you{font-size:2.6rem}}@media screen and (min-width: 1800px){.benefits__typography--thank-you{font-size:3rem;margin-top:-15px}}.benefits__check-svg{margin-top:-60px;width:80px}.benefits__blue-section{background-color:#ccdde1;padding-bottom:25px;padding-top:25px}.benefits__card--spacing{margin-bottom:40px}.benefits__first-section--marg{margin-top:15px;background-color:#ccdde1;padding-bottom:25px;padding-top:25px}@media screen and (min-width: 1200px){.benefits__first-section--marg{margin-top:15px}}.benefits__section--marg{margin-top:35px}@media screen and (min-width: 1200px){.benefits__section--marg{margin-top:65px}}.benefits__row--pad{margin-top:25px}@media screen and (min-width: 1200px){.benefits__row--pad{margin-top:0}}.benefits__itransfer-img{width:120px;margin-top:40px}@media screen and (min-width: 400px){.benefits__itransfer-img{width:140px}}@media screen and (min-width: 768px){.benefits__itransfer-img{width:150px}}@media screen and (min-width: 992px){.benefits__itransfer-img{margin-top:20px;width:160px}}.benefits__idfpr-img{width:330px}@media screen and (max-width: 992px){.benefits__idfpr-img{margin-bottom:15px;margin-top:40px}}.benefits__iccb-img{width:250px}@media screen and (max-width: 992px){.benefits__iccb-img{margin-top:15px}}.benefits__offset-global-nav{margin-top:60px}.benefits__accredited--card{background-color:#0f3b63;padding-bottom:25px;padding-left:10px;padding-right:10px;padding-top:15px;width:90%}@media screen and (min-width: 400px){.benefits__accredited--card{width:75%}}@media screen and (min-width: 768px){.benefits__accredited--card{width:50%}}@media screen and (min-width: 992px){.benefits__accredited--card{width:100%}}@media screen and (min-width: 1200px){.benefits__accredited--card{width:75%}}.benefits__accredited--span-l{color:#fff;font-size:2.1rem;font-weight:bolder;display:block;line-height:1;margin-top:-10px;margin-bottom:5px}.benefits__accredited--span-s{color:#fff;font-size:1.1rem;font-style:italic;line-height:.5;font-weight:600;letter-spacing:-0.04rem}.benefits__accredited--span--source{display:block}.benefits__accredited--itransfer--wrapper{width:50%}.benefits__borders--circle-img{border:3px solid #fff;filter:drop-shadow(5px 5px 12px #b1b1b1);width:50%}@media screen and (min-width: 768px){.benefits__borders--circle-img{width:100%}}#page-top::before{display:block;content:" ";margin-top:-60px;height:60px;visibility:hidden;pointer-events:none}.hero-slider__slider--sub-heading{color:#fff;font-family:"Roboto",sans-serif;font-size:.7em;font-weight:400;letter-spacing:.01em;margin-bottom:2px;padding-top:5px;text-transform:uppercase}@media screen and (min-width: 768px){.hero-slider__slider--sub-heading{font-size:.9em}}@media screen and (min-width: 992px){.hero-slider__slider--sub-heading{font-size:1em}}@media screen and (min-width: 1200px){.hero-slider__slider--sub-heading{font-size:1.2em}}.hero-slider__slider--slide-heading{color:#fff;font-family:"Roboto",sans-serif;font-size:1em;font-weight:300;letter-spacing:.02em;text-transform:uppercase}@media screen and (min-width: 360px){.hero-slider__slider--slide-heading{font-size:1.2em}}@media screen and (min-width: 768px){.hero-slider__slider--slide-heading{font-size:2.1em}}@media screen and (min-width: 992px){.hero-slider__slider--slide-heading{font-size:2.8em}}@media screen and (min-width: 1200px){.hero-slider__slider--slide-heading{font-size:3em}}.hero-slider__heading--bold{color:#fff;filter:drop-shadow(2px 2px 5px #000);font-family:"Roboto",sans-serif;font-size:1em;font-weight:500;letter-spacing:.02em;text-transform:uppercase}@media screen and (min-width: 360px){.hero-slider__heading--bold{font-size:1.2em}}@media screen and (min-width: 768px){.hero-slider__heading--bold{font-size:2.1em}}@media screen and (min-width: 992px){.hero-slider__heading--bold{font-size:2.8em}}@media screen and (min-width: 1200px){.hero-slider__heading--bold{font-size:3em}}.hero-slider__slider{padding-left:0;padding-right:0}.hero-slider__slider--heading-container{margin-left:.5%;padding-left:5px;pointer-events:none;position:absolute;top:55%;width:10%;z-index:4444}@media screen and (min-width: 488px){.hero-slider__slider--heading-container{top:63%}}@media screen and (min-width: 576px){.hero-slider__slider--heading-container{top:64%}}@media screen and (min-width: 768px){.hero-slider__slider--heading-container{padding-left:10px;top:64.5%}}@media screen and (min-width: 992px){.hero-slider__slider--heading-container{padding-left:20px;top:70%}}@media screen and (min-width: 1200px){.hero-slider__slider--heading-container{top:71%}}.hero-slider__slides-1 .hero-slider__slider--heading-container{width:100%}.hero-slider__slides-2 .hero-slider__slider--heading-container{width:18.5%}.hero-slider__slides-3 .hero-slider__slider--heading-container{width:13%}.hero-slider__slides-4 .hero-slider__slider--heading-container{width:10%}.hero-slider__slides-5 .hero-slider__slider--heading-container{width:8%}.hero-slider__slides-6 .hero-slider__slider--heading-container{width:6.65%}.hero-slider__slides-7 .hero-slider__slider--heading-container{width:5.75%}.hero-slider__slides-8 .hero-slider__slider--heading-container{width:4.85%}.hero-slider__slider--slide-img{position:relative;width:100%}.hero-slider__slider .slick-next{right:10px}.hero-slider__slider .slick-prev{left:10px;z-index:1}@media screen and (min-width: 488px){.hero-slider__slider .slick-next{right:20px}}@media screen and (min-width: 488px){.hero-slider__slider .slick-prev{left:20px}}@media screen and (min-width: 576px){.hero-slider__slider .slick-next{right:25px}.hero-slider__slider .slick-prev{left:25px}}.hero-slider__slider .slick-next,.hero-slider__slider .slick-prev{height:25px;top:75%;width:25px}@media screen and (min-width: 992px){.hero-slider__slider .slick-next,.hero-slider__slider .slick-prev{height:40px;top:80%;width:40px}}.hero-slider__slider .slick-dots li button:before{color:#e5e8ed;font-size:12px;line-height:30px;opacity:1;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.hero-slider__slider .slick-dots li.slick-active button:before{color:#0f3b63;opacity:1;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.hero-slider__slider .slick-dots li{margin-left:1px;margin-right:1px;padding-left:0;padding-right:0}.hero-slider__slide-img--border{border-color:#d9d9d9;border-style:solid;border-width:thin}.hero-slider__slider div:first-child{margin-bottom:30px}.slick-initialized div:first-child{margin-bottom:0}.hero-slider__slider div:not(:first-child){visibility:hidden;display:none}.slick-initialized div:not(:first-child){visibility:visible;display:block}.slick-next::before{content:url("/assets/img/dbl-next_mobile.svg")}.slick-prev::before{content:url("/assets/img/dbl-prev_mobile.svg")}@media screen and (min-width: 992px){.slick-next::before{content:url("/assets/img/dbl-next.svg")}.slick-prev::before{content:url("/assets/img/dbl-prev.svg")}}.hero-slider__button--toggle{background:rgba(0,0,0,0);border:none;color:rgba(0,0,0,0);cursor:pointer;display:block;font-size:0;height:25px;right:50%;margin-right:-12.5px;line-height:0;outline:none;padding:0;position:absolute;bottom:0;transform:translate(0, -50%);width:25px}@media screen and (min-width: 992px){.hero-slider__button--toggle{width:40px;bottom:25px;margin-right:-20px}}.hero-slider__button--toggle:before{content:url("/assets/img/pause_mobile.svg");opacity:.75}@media screen and (min-width: 992px){.hero-slider__button--toggle:before{content:url("/assets/img/pause.svg")}}.hero-slider__button--play:before{content:url("/assets/img/play_mobile.svg");opacity:.75}@media screen and (min-width: 992px){.hero-slider__button--play:before{content:url("/assets/img/play.svg")}}.hero-slider__button--toggle:hover,.hero-slider__button--toggle:focus{color:rgba(0,0,0,0);outline:none;background:rgba(0,0,0,0)}.hero-slider__button--toggle:hover:before,.hero-slider__button--toggle:focus:before{opacity:1}.img-hover__img-wrapper{margin:0 0 15px;right:0}@media(min-width: 767px){.img-hover__img-wrapper{margin:0 0 30px}}.img-hover__img-link{border-radius:5px;cursor:pointer;display:block;margin:0 auto;max-width:400px;overflow:hidden;position:relative}.img-hover__hover{background:#0f3b63;border-color:#c61f48;border-radius:5px;border-style:solid;border-width:5px;height:100%;position:absolute;transition:all ease .5s;width:100%;z-index:2;opacity:0}.img-hover__hover--inverse{opacity:.7}.img-hover__hover:hover,.img-hover__thumb-caption:hover+.img-hover__hover{opacity:.85}.img-hover__hover--inverse:hover,.img-hover__thumb-caption:hover+.img-hover__hover--inverse{opacity:0}.img-hover__img-ease{transition:all 1s ease-in-out}.img-hover__img-link:hover img.img-hover__img-ease{transform:scale(1.2, 1.2)}.img-hover__thumb-caption{color:#fff;font-size:20px;height:20px;margin-top:-12px;position:absolute;text-align:center;top:50%;width:100%;z-index:3}.sub-nav__nav-link{color:#0f3b63;font-family:"Oswald",sans-serif;font-weight:500;margin-left:10px;margin-right:10px;padding-left:5px;padding-right:5px}.sub-nav__nav-link:hover{color:#c61f48}.nav-item.active .sub-nav__nav-link{border-bottom-color:#c61f48;border-bottom-style:solid;border-bottom-width:thick;padding-bottom:0}.sub-nav__navbar{border-style:solid;border-width:1px;border-color:#b1b1b1;border-radius:3px}.sub-nav__content--wrapper{padding-left:25px;padding-right:25px}.card-section__col--margin-btm{margin-bottom:2.5rem}.card-section__text-wrapper{margin-bottom:10px;min-height:14rem}.contacts__section-margin{margin-top:40px}.contacts__col-bottom-margin{margin-bottom:40px}.contacts__padding-top{padding-top:40px}.contacts__col--img{margin-left:0;margin-right:-15px}@media screen and (min-width: 360px){.contacts__col--img{margin-left:5px}}@media screen and (min-width: 410px){.contacts__col--img{margin-left:10px}}@media screen and (min-width: 992px){.contacts__padding-left{padding-left:50px}}@media screen and (min-width: 1200px){.contacts__padding-left{padding-left:70px}}.contacts__portrait{border-color:#fff;border-style:solid;border-width:5px}.accordion__padding-left{padding-left:0}.accordion__typography--card-header .btn-link{color:#0f3b63;font-family:"Open Sans",sans-serif;font-size:1.4rem;font-weight:700;text-align:left}.accordion__typography--card-header .btn-link:hover{color:#c61f48}.accordion__button::before{background-color:#0f3b63;border-radius:50%;color:#fff;content:"−";display:inline-block;font-family:"Open Sans",sans-serif;font-size:2rem;font-weight:400;height:30px;line-height:28px;margin-right:10px;position:relative;text-align:center;text-decoration:none !important;text-indent:0;vertical-align:middle;width:30px}.accordion__button.collapsed::before{content:"+"}.accordion__button{text-indent:-45px;margin-left:45px}.loader{text-align:center}.loader__img{height:100px;width:100px}.yt-embed__wrapper{height:0;overflow:hidden;padding-bottom:56.25%;padding-top:30px;position:relative}.yt-embed__wrapper iframe{height:100%;left:0;position:absolute;top:0;width:100%}.breadcrumbs{background-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,.25);border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-style:solid;border-bottom-width:thin;margin-bottom:1.5rem}.breadcrumbs--margin-top{margin-top:125px}.breadcrumbs--home{vertical-align:bottom}.breadcrumbs--home--house{fill:none;stroke:#555;stroke-width:1.5;stroke-linejoin:round;stroke-miterlimit:10}.breadcrumbs--home--border{fill:none}.breadcrumb-item+.breadcrumb-item::before{content:url("/assets/img/keyboard_arrow_right.svg");opacity:.5}.positioning__margin-bottom{margin-bottom:30px}@media screen and (min-width: 1200px){.positioning__margin-bottom{margin-bottom:40px}}.positioning__margin-top{margin-top:30px}@media screen and (min-width: 1200px){.positioning__margin-top{margin-top:40px}}.positioning__heading-margin-bottom{margin-bottom:15px}@media screen and (min-width: 1200px){.positioning__heading-margin-bottom{margin-bottom:20px}}.position__offset-fixed-nav{margin-top:105px}@media screen and (min-width: 360px){.position__offset-fixed-nav{margin-top:110px}}@media screen and (min-width: 410px){.position__offset-fixed-nav{margin-top:120px}}@media screen and (min-width: 576px){.position__offset-fixed-nav{margin-top:125px}}@media screen and (min-width: 768px){.position__offset-fixed-nav{margin-top:130px}}@media screen and (min-width: 992px){.position__offset-fixed-nav{margin-top:170px}}.position__sub-nav--offset-fixed-nav{margin-bottom:15px;margin-top:130px}@media screen and (min-width: 360px){.position__sub-nav--offset-fixed-nav{margin-bottom:20px;margin-top:135px}}@media screen and (min-width: 410px){.position__sub-nav--offset-fixed-nav{margin-top:140px}}@media screen and (min-width: 576px){.position__sub-nav--offset-fixed-nav{margin-top:145px}}@media screen and (min-width: 768px){.position__sub-nav--offset-fixed-nav{margin-top:150px}}@media screen and (min-width: 992px){.position__sub-nav--offset-fixed-nav{margin-top:155px}}@media screen and (min-width: 1200px){.position__sub-nav--offset-fixed-nav{margin-top:160px}}.positioning__iframe-wrapper{margin-bottom:20px;position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.positioning__iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}.positioning__offset-global-nav{margin-top:60px}.positioning__accordian--padding{margin-top:15px;padding-left:5px;padding-right:5px}@media screen and (min-width: 992px){.positioning__accordian--padding{margin-top:60px}}.positioning__accordian-marg{margin-top:75px}.positioning__card--spacing{margin-bottom:40px}.positioning__first-section--marg{margin-top:15px;background-color:#ccdde1;padding-bottom:25px;padding-top:25px}@media screen and (min-width: 1200px){.positioning__first-section--marg{margin-top:15px}}.positioning__section--marg{margin-top:35px}@media screen and (min-width: 1200px){.positioning__section--marg{margin-top:65px}}.positioning__row--pad{margin-top:25px}.positioning__register--itransfer-img{width:120px;margin-top:40px}@media screen and (min-width: 400px){.positioning__register--itransfer-img{width:140px}}@media screen and (min-width: 768px){.positioning__register--itransfer-img{width:150px}}@media screen and (min-width: 992px){.positioning__register--itransfer-img{padding-left:25px}}.positioning__register--mobile-row--pad{padding-left:0}@media screen and (min-width: 576px){.positioning__register--mobile-row--pad{padding-left:20%}}@media screen and (min-width: 992px){.positioning__register--mobile-row--pad{padding-left:0}}.positioning__register--idfpr-img{width:330px;margin-top:60px}@media screen and (max-width: 992px){.positioning__register--idfpr-img{margin-bottom:15px}}.positioning__register--iccb-img{width:250px}@media screen and (max-width: 992px){.positioning__register--iccb-img{margin-top:15px}}.positioning__heading--row{margin-top:16%}.positioning__check-svg{margin-top:-60px;width:80px}.positioning__blue-section{background-color:#ccdde1;padding-bottom:25px;padding-top:25px}.positioning__col--offset{margin-right:-25px}@media screen and (min-width: 768px){.positioning__col--offset{margin-right:-45px}}.positioning__offset-global-nav{margin-top:60px}@media screen and (min-width: 768px){.position__col--min-height{min-height:15rem}}@media screen and (min-width: 992px){.position__col--min-height{min-height:12rem}}@media screen and (min-width: 1200px){.position__col--min-height{min-height:9rem}}.position__offset-core-nav{margin-top:99px}.position__offset-core-nav.position__campus-alerts--open{margin-top:109px}@media screen and (min-width: 992px){.position__offset-core-nav{margin-top:80px}.position__offset-core-nav.position__campus-alerts--open{margin-top:93px}}.positioning__max-width-600{max-width:600px;margin-left:auto;margin-right:auto}.positioning__offset-nav{margin-top:120px;padding-top:20px}.margins__col--top{margin-top:40px}.margins__col--btm{margin-bottom:40px}.margins__heading--btm{margin-bottom:40px}.margins__heading-tan--btm{margin-bottom:21px}.margins__bottom--none{margin-bottom:0}.padding__col--mobile-none{padding-left:0;padding-right:0}@media screen and (min-width: 992px){.padding__col--mobile-none{padding-left:15px;padding-right:15px}}.padding__x--none{padding-left:0;padding-right:0}.tables td,.tables th{border-style:solid;border-width:thin;border-color:gray;padding-left:5px;padding-right:5px}.section__heading-underline{background-image:url(/assets/img/heading-bg-underline.png);background-repeat:no-repeat;background-position:0 50px}.section__heading-underline--transparent{background-image:url(/assets/img/heading-bg-underline-transparent.png);background-repeat:no-repeat;background-position:0 50px}.section__heading-underline-tan{background-image:url(/assets/img/heading-bg-underline-tan.png);background-repeat:no-repeat;background-position:0 50px}.section__margin-bottom{margin-bottom:3rem}.thank-you__check-mark{height:75px;width:75px}.home__col--heading-underline{background-image:url(/assets/img/heading-bg-underline.png);background-repeat:no-repeat;background-position:0 50px}.home__col--heading-underline-tan{background-image:url(/assets/img/heading-bg-underline-tan.png);background-repeat:no-repeat;background-position:0 50px;bottom:-20px}
@@ -0,0 +1,57 @@
1
+ /**
2
+ * Custom JS module to decorate external/new-tab links:
3
+ * - Adds screen reader hints to inform users of new tab/external destinations
4
+ * - Adds the launch/external icon for a visual hint.
5
+ * - Runs automatically so that non-technical editors (and devs) don't need to worry
6
+ * about marking up links and link accessibility/best practices.
7
+ */
8
+ const currentHost = window.location.hostname.toLowerCase();
9
+ // Define hostnames/domains that should always be treated as internal
10
+ const internalDomains = [
11
+ 'kcc.edu',
12
+ 'jotform.com',
13
+ 'libcal.com', // Needed for library libcal links
14
+ 'libguides.com', // Needed for library libguide links
15
+ 'cloudvent.net', // Ensure the CloudCannon previews look the same as the live website
16
+ 'localhost', // Ensure local dev look the same as the live website
17
+ '127.0.0.1' // Ensure local dev look the same as the live website
18
+ ];
19
+
20
+ function accessibleExternalLinks() {
21
+ document.querySelectorAll('main a:not(.social-icons__links)').forEach(link => {
22
+ if (!link.hostname) return;
23
+
24
+ const linkHost = link.hostname.toLowerCase();
25
+
26
+ // A link is internal if it matches our institutional domain OR the current dev/preview host
27
+ const isInternal = internalDomains.some(domain =>
28
+ linkHost === domain || linkHost.endsWith('.' + domain)
29
+ ) || linkHost === currentHost;
30
+
31
+ const isExternal = !isInternal;
32
+ const isNewTab = link.target === '_blank';
33
+
34
+ if (!isExternal && !isNewTab) return;
35
+
36
+ // Immutable assignment via chained ternary operator
37
+ const srMessage = (isExternal && isNewTab) ? ' (external site, opens in new tab)'
38
+ : isExternal ? ' (external link)'
39
+ : isNewTab ? ' (opens in new tab)'
40
+ : '';
41
+
42
+ // Automatically apply visual icon helper class for external links
43
+ if (isExternal) {
44
+ link.classList.add('links__external');
45
+ }
46
+
47
+ // Inject Bootstrap 5 accessible text if not already present
48
+ if (srMessage && !link.querySelector('.visually-hidden')) {
49
+ const span = document.createElement('span');
50
+ span.className = 'visually-hidden';
51
+ span.textContent = srMessage;
52
+ link.appendChild(span);
53
+ }
54
+ });
55
+ }
56
+
57
+ export default accessibleExternalLinks;
data/assets/js/src/all.js CHANGED
@@ -1,7 +1,11 @@
1
+ // SCSS imports
1
2
  import '../../scss/kcc-theme.scss'; // Import scss file into webpack main entry-point for webpack compiled css
2
3
 
4
+ // JS imports
3
5
  import Collapse from 'bootstrap/js/dist/collapse';
4
6
 
7
+ // Variables needed for orchestrating other modules
8
+ const searchPageRegexp = /^\/search\/?$/;
5
9
  // function loadModule(...theArgs) {
6
10
  // const len = theArgs.length;
7
11
  // let module, defaultFn, path;
@@ -12,7 +16,7 @@ import Collapse from 'bootstrap/js/dist/collapse';
12
16
  // return import(`${path}${module}.js`).then(({ default: defaultFn }) => defaultFn() );
13
17
  // }
14
18
 
15
- window.addEventListener('load', async () => {
19
+ document.addEventListener('DOMContentLoaded', async () => {
16
20
 
17
21
  if (document.querySelector('.hero-slider__slider')) {
18
22
  import('./wrapPowerText')
@@ -21,12 +25,6 @@ window.addEventListener('load', async () => {
21
25
  import('./sliders')
22
26
  .then(({ default: initSliders }) => initSliders())
23
27
  })
24
- // import('./sliders')
25
- // .then(({ default: initSliders }) => initSliders())
26
- // .then(() => {
27
- // import('./wrapPowerText')
28
- // .then(({ default: wrapPowerText }) => wrapPowerText())
29
- // })
30
28
  }
31
29
 
32
30
  import('../alerts/alerts').then(({ default: alerts }) => alerts(Collapse));
@@ -71,6 +69,31 @@ window.addEventListener('load', async () => {
71
69
  const { default: Modal } = await import('bootstrap/js/dist/modal');
72
70
  }
73
71
 
72
+ // Fix WCAG violation in Google Programmable Search where results have
73
+ // a thumbnail image wrapped in a link which doesn't have meaningful alt (that becomes) link text
74
+ // and doesn't provide any visual indication of tabbing to them
75
+ if (document.getElementById('searchResultsWrapper')) {
76
+ const { default: searchResultsWCAGFix } = await import('./searchResultsWCAGFix');
77
+
78
+ searchResultsWCAGFix();
79
+ }
80
+
81
+ if (searchPageRegexp.test(window.location.pathname)) {
82
+ // Fix needed so that nav skip link doesn't interfere with site search page
83
+ const { default: searchPageJumpLinkFix } = await import('./searchPageJumpLinkFix');
84
+
85
+ searchPageJumpLinkFix();
86
+
87
+ import('../../scss/searchPageOverrides.scss')
88
+ .catch(err => console.error(`Error loading searchPageOverrides.scss \n${err}`, err));
89
+ }
90
+
91
+ if (document.querySelector('main a')) {
92
+ import('./accessibleExternalLinks')
93
+ .then(({ default: accessibleExternalLinks }) => accessibleExternalLinks())
94
+ .catch(err => console.error('Error importing "accessibleExternalLinks" module: ', err));
95
+ }
96
+
74
97
  // loadModule('alerts','./').then(() => { // Get the campus alerts message & build it out
75
98
  // loadModule('addClassToOpenNavbar', './');
76
99
  // return;
@@ -0,0 +1,27 @@
1
+ const jumpLink = document.querySelector('a[href="#content"');
2
+ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
3
+
4
+ function searchPageJumpLinkFix() {
5
+ jumpLink.addEventListener('click', (e) => {
6
+ e.preventDefault();
7
+
8
+ const targetId = e.target.getAttribute('href');
9
+ const targetEl = document.querySelector(targetId);
10
+
11
+ if (targetEl) {
12
+ // Make sure the element can accept focus (even if it's a <div> or <main>) since we're forcing focus via JS
13
+ if (!targetEl.hasAttribute('tabindex')) {
14
+ targetEl.setAttribute('tabindex', '-1');
15
+ }
16
+
17
+ // Move focus to the element so VoiceOver/keyboard users land there
18
+ targetEl.focus(); // Always .focus() prior to .scrollIntoView()!
19
+ // Ensure we respect (prefers-reduced-motion: reduce) by explicitly checking when using scrollIntoView()
20
+ targetEl.scrollIntoView({
21
+ behavior: prefersReducedMotion.matches ? 'instant' : 'smooth'
22
+ });
23
+ }
24
+ });
25
+ }
26
+
27
+ export default searchPageJumpLinkFix;
@@ -0,0 +1,43 @@
1
+ // ============================================================================ //
2
+ // # Fix Google Programmable Search's search results that have image thumbnails //
3
+ // //
4
+ // ## The Issue //
5
+ // //
6
+ // On the search results page: //
7
+ // * Image thumbs are wrapped in anchor/link elements //
8
+ // * Thumbs have generic "Thumbnail image" for alt-text //
9
+ // * Thumb anchors do not have any accessibility labels so multiple //
10
+ // "Thumbnail image" link texts do not help //
11
+ // * Thumb anchors also provide zero visual indication of focus (or that //
12
+ // they're a link at all unless you hover them to see the cursor change) //
13
+ // //
14
+ // ## The Fix //
15
+ // //
16
+ // 1. Use a lightweight mutation observer to see when search results have //
17
+ // been injected. (also runs on subsequent searches while in the page) //
18
+ // 2. Look for the links wrapping the image thumbnails: //
19
+ // * Make un-focusable with tabindex="-1" //
20
+ // * Add aria-hidden="true" to hide the unhelpful thumbs altogether //
21
+ // ============================================================================ //
22
+
23
+ // This is a custom wrapper element for the markup where Google injects the search results
24
+ const targetNode = document.getElementById('searchResultsWrapper');
25
+
26
+ const observer = new MutationObserver((mutationsList) => {
27
+ // Target the specific wrapper classes Google uses for image result boxes
28
+ const imageLinks = document.querySelectorAll('.gs-image-box a');
29
+
30
+ imageLinks.forEach(link => {
31
+ if (link.getAttribute('tabindex') !== '-1') {
32
+ link.setAttribute('tabindex', '-1');
33
+ link.setAttribute('aria-hidden', 'true');
34
+ }
35
+ });
36
+ });
37
+
38
+ function searchResultsWCAGFix() {
39
+ // Watch for injection of the search results
40
+ observer.observe(targetNode, { childList: true, subtree: true });
41
+ }
42
+
43
+ export default searchResultsWCAGFix;
@@ -74,16 +74,31 @@
74
74
  display: none;
75
75
  }
76
76
  }
77
- // End BS4 dropdown-menu carot modifications.
77
+
78
+ // Customizations to alert color-schemes
79
+ // Creates a more visible border around the alerts
80
+ // BS5 default alert border-colors are almost imperceivable
81
+ .alert-warning {
82
+ border-color: $color-alert-warning-border;
83
+ }
84
+
85
+ .alert-danger {
86
+ border-color: $color-alert-danger-border;
87
+ }
78
88
 
79
89
  .alert-info {
80
- --bs-alert-border-color: var(--bs-info-text-emphasis);
90
+ border-color: $color-alert-info-border;
81
91
  }
82
92
 
83
93
  .alert-primary {
84
- --bs-alert-border-color: var(--bs-primary-text-emphasis);
94
+ border-color: $color-alert-primary-border;
85
95
  }
86
96
 
87
- .alert-danger {
88
- --bs-alert-border-color: var(--bs-danger-text-emphasis);
97
+ .alert a {
98
+ color: #0257d4;
99
+ }
100
+
101
+ .alert a:hover,
102
+ .alert a:focus {
103
+ color: #02419c;
89
104
  }
@@ -0,0 +1,290 @@
1
+ @use '../0-tools/vars' as *;
2
+
3
+ /**
4
+ *
5
+ * Custom overrides for Google Search search-results page
6
+ * Author: Wesley Zajicek - https://github.com/wdzajicek
7
+ *
8
+ */
9
+ // ===================================================== //
10
+ // IMPORTANT! (pun intended): //
11
+ // //
12
+ // Assume that ANY `!important` used in this file is //
13
+ // required for the styling to work correctly! //
14
+ // //
15
+ // i.e. DO NOT DELETE ANY `!important;`'s BELLOW //
16
+ // //
17
+ // ===================================================== //
18
+ $color-link-visited: #3600b3;
19
+ // The pagination of the search results (at the bottom)
20
+ .gsc-results .gsc-cursor-box .gsc-cursor-page {
21
+ background-color: rgba(0,0,0,0.09) !important;
22
+ border-width: thin;
23
+ border-style: solid;
24
+ border-color: #555;
25
+ border-radius: 5px;
26
+ color: $grey-1 !important;
27
+ padding: .25rem 1rem;
28
+ }
29
+ // The active page in the search result pagination
30
+ .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
31
+ background-color: rgba(0,0,0,0.25) !important;
32
+ color: $black !important;
33
+ text-decoration: underline !important;
34
+ }
35
+ // One of the outer-most elements of the search results
36
+ .gsc-control-cse {
37
+ font-family: $font-family-paragraph !important;
38
+ counter-reset: result;
39
+ }
40
+ // Outermost div for each search result
41
+ .gsc-webResult.gsc-result {
42
+ border-bottom: solid thin #0b0e10 !important;
43
+ margin-left: auto !important;
44
+ margin-right: auto !important;
45
+ max-width: 630px;
46
+ padding-left: .75rem !important;
47
+ padding-right: .75rem !important;
48
+ }
49
+ // Parent element of the search result's title
50
+ .gsc-thumbnail-inside {
51
+ margin-left: 32px;
52
+ }
53
+ // Custom styling to make a counter before each title (like in newsroom)
54
+ .gsc-thumbnail-inside::before {
55
+ background-color: $primary-blue;
56
+ border-radius: 50%;
57
+ border-color: #0b0e10;
58
+ border-style: solid;
59
+ border-width: 1px;
60
+ color: $white;
61
+ counter-increment: result;
62
+ content: counter(result);
63
+ display: block;
64
+ font-size: 14px;
65
+ font-weight: 700;
66
+ height: 26px;
67
+ margin-left: -32px;
68
+ line-height: 24px;
69
+ position: absolute;
70
+ text-align: center;
71
+ width: 26px;
72
+ }
73
+ // Font size for smaller text—description pagination
74
+ .gsc-control-cse,
75
+ .gsc-control-cse .gsc-table-result {
76
+ font-size: .99rem !important;
77
+ }
78
+ // Larger font-sizes
79
+ .gsc-control-cse .gs-spelling,
80
+ .gsc-control-cse .gs-result .gs-title,
81
+ .gsc-control-cse .gs-result .gs-title * {
82
+ font-size: 1.125rem !important;
83
+ }
84
+ // Title of the page/doc that is clicked
85
+ .gs-result .gs-title,
86
+ .gs-result .gs-title *,
87
+ .gs-result .gs-title a.gs-title b,
88
+ .gcsc-find-more-on-google {
89
+ color: $color-blue-reboot !important;
90
+ }
91
+ // Hover effect for the search results title/link
92
+ .gs-result .gs-title a.gs-title:hover,
93
+ .gs-result .gs-title a.gs-title:hover b {
94
+ color: $color-blue-reboot-hover !important;
95
+ text-decoration: underline !important;
96
+ }
97
+ // Visited styles for the search results title/link
98
+ .gs-result .gs-title a.gs-title:visited,
99
+ .gs-result .gs-title a.gs-title:visited b {
100
+ color: $color-link-visited !important;
101
+ }
102
+ // The little magnifying glass svg on the bottom-right
103
+ // of the results that says "🔍 Search for <SEARCH_TERM> on Google"
104
+ .gcsc-find-more-on-google-magnifier {
105
+ fill: $color-blue-reboot !important;
106
+ }
107
+ // Breadcrumb for each search result
108
+ .gs-webResult div.gs-visibleUrl {
109
+ color: $color-green-emerald !important;
110
+ }
111
+ // The parent element for the results breadcrumb
112
+ .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {
113
+ display: inline-block;
114
+ border: thin solid rgba(0,0,0,0.125);
115
+ padding: 0 .25rem;
116
+ border-radius: 5px;
117
+ margin-top: .25rem;
118
+ }
119
+ // Description text for the search results
120
+ .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,
121
+ .gs-fileFormatType {
122
+ color: $grey-1 !important;
123
+ margin-top: 6px;
124
+ font-family: $font-family-paragraph !important;
125
+ }
126
+ .gs-bidi-start-align.gs-snippet b {
127
+ font-weight: 700;
128
+ }
129
+ // Preview image for the search result
130
+ .gs-web-image-box .gs-image,
131
+ .gs-promotion-image-box .gs-promotion-image {
132
+ height: 93px;
133
+ margin-left: -18.25px;
134
+ max-width: unset !important;
135
+ }
136
+ // Parent element of the preview image for search result
137
+ .gs-web-image-box,
138
+ .gs-promotion-image-box {
139
+ background-color: $grey-1;
140
+ border-radius: 50%;
141
+ border-color: #ebebeb;
142
+ border-style: solid;
143
+ border-width: thin;
144
+ float: right !important;
145
+ height: 93px;
146
+ margin-top: .25rem;
147
+ margin-left: 1rem !important;
148
+ overflow: hidden;
149
+ padding: 0 !important;
150
+ position: relative;
151
+ bottom: 20px;
152
+ width: 93px !important;
153
+ top: 0;
154
+ }
155
+ // Specific styles for portrait oriented images
156
+ .gs-web-image-box-portrait .gs-image {
157
+ height: 93px;
158
+ margin-left: calc(100% / -16);
159
+ transform: scale(1.2);
160
+ }
161
+ // Parent div of the pagination buttons
162
+ .gsc-cursor-box.gs-bidi-start-align {
163
+ margin-top: 1.5rem !important;
164
+ }
165
+
166
+ // The default styling cuts off the outline when the element has focus
167
+ // This ensures a fully visible focus ring for accessibility
168
+ div.gs-title {
169
+ overflow: visible !important; // This ensures the outline is not cut off
170
+ }
171
+
172
+ // Make the focus ring stand out a little bit more
173
+ a.gs-title:focus-visible {
174
+ outline-offset: 3px !important;
175
+ outline-width: 2px !important;
176
+ }
177
+ // ======================================= //
178
+ // Styling adjustments/additions to //
179
+ // search-page styling for darkMode //
180
+ // ======================================= //
181
+ // .dark-mode gets added to <html> element
182
+ .dark-mode {
183
+ // Description of the search result
184
+ .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,
185
+ .gs-fileFormatType {
186
+ color: #969ca5 !important;
187
+ }
188
+ // Pagination buttons for extra results
189
+ .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {
190
+ border-color: rgba(255,255,255,.25);
191
+ }
192
+ // The little magnifying glass svg on the bottom-right
193
+ // of the results that says "🔍 Search for <SEARCH_TERM> on Google"
194
+ .gcsc-find-more-on-google-magnifier {
195
+ fill: #9fc0ed !important;
196
+ }
197
+ // Title/link of the search result
198
+ .gs-result .gs-title,
199
+ .gs-result .gs-title *,
200
+ .gs-result .gs-title a.gs-title b,
201
+ .gcsc-find-more-on-google {
202
+ color: #9fc0ed !important;
203
+ }
204
+ // Title/link hover effect
205
+ .gs-result .gs-title a.gs-title:hover,
206
+ .gs-result .gs-title a.gs-title:hover b {
207
+ color: #b0d1ff !important;
208
+ }
209
+ // Visited title links
210
+ .gs-result .gs-title a.gs-title:visited,
211
+ .gs-result .gs-title a.gs-title:visited b {
212
+ color: #7382d7 !important;
213
+ }
214
+ // Top bar that shows the number of results and Sort by:...
215
+ .gsc-above-wrapper-area {
216
+ border-bottom-color: rgba(255,255,255,0.5)
217
+ }
218
+ // One of the outer-most parent elements of the results
219
+ .gsc-control-cse.gsc-control-cse-en {
220
+ background-color: transparent;
221
+ border-color: rgba(255,255,255,0.25);
222
+ border-radius: 5px;
223
+ }
224
+ // Outer-most element for each search result
225
+ .gsc-webResult.gsc-result,
226
+ .gsc-results .gsc-imageResult {
227
+ background-color: #191d1f;
228
+ border-color: rgba(255,255,255,0.125);
229
+ }
230
+ // Result stats: # of results and time
231
+ .gsc-result-info,
232
+ .gsc-orderby-label {
233
+ color: #bababa;
234
+ }
235
+ // Pagination buttons of the extra results
236
+ .gsc-results .gsc-cursor-box .gsc-cursor-page {
237
+ background-color: #0b0e10;
238
+ border-color: rgba(255,255,255,0.25);
239
+ border-style: solid;
240
+ }
241
+ // Current page-button in the paginated results
242
+ .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
243
+ color: #ebebeb !important;
244
+ background-color: rgba(0,0,0,0.5) !important;
245
+ }
246
+ // Hover effect when mouse hovers a search result
247
+ .gsc-webResult.gsc-result:hover {
248
+ background-color: rgba(255,255,255,0.0125) !important;
249
+ }
250
+ // Outer-most element of each search result
251
+ .gsc-webResult.gsc-result {
252
+ border-bottom: solid 1px $white !important;
253
+ }
254
+ // Custom counter-circles to number results
255
+ .gsc-thumbnail-inside::before {
256
+ background-color: #9bb7dd;
257
+ border-color: $white;
258
+ color: #0b0e10;
259
+ }
260
+ // The "Sort by:" button
261
+ .gsc-selected-option-container {
262
+ background-color: #9fc0ed;
263
+ border-radius: 4px;
264
+ border-color: $white;
265
+ border-width: 1px;
266
+ border-style: solid;
267
+ font-size: 13px !important;
268
+ padding-bottom: 1.75rem;
269
+ padding-left: .75rem !important;
270
+ padding-right: 32px;
271
+ }
272
+ // The little carrot icon in the "Sort by:" button
273
+ .gsc-control-cse .gsc-option-selector {
274
+ right: 8px;
275
+ top: 13px;
276
+ transform: scale(1.5);
277
+ }
278
+ // The "Sort by:" menu
279
+ .gsc-control-cse .gsc-option-menu {
280
+ background-color: #0b0e10;
281
+ }
282
+ // Current selection in the "Sort by:" menu
283
+ .gsc-option-menu-item-highlighted {
284
+ background-color: #282828;
285
+ color: $white;
286
+ }
287
+ .gs-bidi-start-align.gs-snippet b {
288
+ color: #c4c4c4;
289
+ }
290
+ }
@@ -40,7 +40,7 @@ $color-page-background: $color-blue-grey;
40
40
  $color-blue-light-nav: $color-blue-grey;
41
41
 
42
42
  $black: #000;
43
- $grey-1: #666;
43
+ $grey-1: #555;
44
44
  $grey-2: #e5e8ed;
45
45
  $grey-3: #f1f2f7; // Background color for slick tracks
46
46
  $grey-4: #f8f9fa; // Background color for footer (and Bootstrap 4 light navbar)
@@ -71,3 +71,17 @@ $btn-hover-bg: #022b55;
71
71
  $btn-hover-border: #021e3d;
72
72
  $darker-link: #006ce0;
73
73
  $orange-heading: $color-orange;
74
+
75
+ $color-blue-reboot: #007bff; // link color specified in reboot
76
+ $color-blue-reboot-hover: #0056b3; // link:hover color specified in reboot
77
+ $color-green-emerald: #148ba9;
78
+
79
+ $color-alert-warning-text: #856404; // BS5 color for alert-warning text-color
80
+ $color-alert-info-text: #0c5460; // BS5 color for alert-info text-color
81
+ $color-alert-primary-text: #004085; // BS5 color for alert-primary text-color
82
+ $color-alert-danger-text: #721c24;
83
+ // Create custom border-colors for the BS5 alerts we use:
84
+ $color-alert-warning-border: $color-alert-warning-text;
85
+ $color-alert-info-border: $color-alert-info-text;
86
+ $color-alert-primary-border: $color-alert-primary-text;
87
+ $color-alert-danger-border: $color-alert-danger-text;