/* Theme Name: KNO Theme URI: https://kno.soest.hawaii.edu Author: Marcos D. Nobre for PacIOOS Author URI: https://pacioos.hawaii.edu Description: KNO theme. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: kno Tags: one-column, two-columns, right-sidebar, flexible-header, custom-background, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready 88888888ba 88 ,ad8888ba, ,ad8888ba, ad88888ba 88 "8b 88 d8"' `"8b d8"' `"8b d8" "8b 88 ,8P 88 d8' `8b d8' `8b Y8, 88aaaaaa8P' ,adPPYYba, ,adPPYba, 88 88 88 88 88 `Y8aaaaa, 88""""""' "" `Y8 a8" "" 88 88 88 88 88 `"""""8b, 88 ,adPPPPP88 8b 88 Y8, ,8P Y8, ,8P `8b 88 88, ,88 "8a, ,aa 88 Y8a. .a8P Y8a. .a8P Y8a a8P 88 `"8bbdP"Y8 `"Ybbd8"' 88 `"Y8888Y"' `"Y8888Y"' "Y88888P" */ /* Roboto Font Face Declarations */ @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto/static/Roboto-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; } body { background: url('images/seamless.jpg'); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; } .hero { height: 100vh; } .text-primary { color: #002436 !important; } footer { background-image: url('images/footer-bg-dark.jpg'); background-size: cover; } .lines-bg { background-image: url('images/footer-bg-dark.jpg'); background-size: 100% auto; background-position: top center; } img { max-width: 100%; } .module { background: rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 10px; min-height: 216px; } .decor { background: url('images/rehero.jpg'); background-position: center 34%; background-size: 100% auto; -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-decor { /* Create iridescent underwater color-morphing effect with 30-degree light rays */ background: /* Luminous rays at 30-degree angle to the left */ linear-gradient(120deg, rgba(100, 220, 255, 0.4) 0%, rgba(0, 36, 54, 0.01) 20%, rgba(0, 36, 54, 0.01) 30%, rgba(120, 220, 255, 0.3) 40%, rgba(0, 36, 54, 0.01) 60%), /* Secondary rays at 30-degree angle */ linear-gradient(120deg, rgba(0, 36, 54, 0.01) 10%, rgba(180, 230, 255, 0.3) 30%, rgba(0, 36, 54, 0.01) 40%, rgba(0, 36, 54, 0.01) 60%, rgba(150, 230, 255, 0.2) 80%), /* Iridescent color shifting base */ linear-gradient(to right, hsl(200, 100%, 30%) 0%, hsl(220, 90%, 20%) 30%, hsl(240, 80%, 25%) 50%, hsl(190, 90%, 25%) 70%, hsl(180, 100%, 30%) 100%); background-size: 200% 200%, 200% 200%, 400% 100%; /* Apply animations */ animation: luminous-rays 8s ease-in-out infinite, color-morph 12s ease-in-out infinite alternate; -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; } /* Keyframes for the diagonal light rays animation */ @keyframes luminous-rays { 0% { background-position: -50% -50%, 150% 150%, 0% 0%; } 50% { background-position: 150% 150%, -50% -50%, 0% 0%; } 100% { background-position: -50% -50%, 150% 150%, 0% 0%; } } /* Keyframes for the iridescent color morphing effect */ @keyframes color-morph { 0% { background-position: 0% 0%, 0% 0%, 0% 0%; filter: hue-rotate(0deg) saturate(1); } 25% { filter: hue-rotate(15deg) saturate(1.1); } 50% { background-position: 0% 0%, 0% 0%, 100% 0%; filter: hue-rotate(30deg) saturate(1.2); } 75% { filter: hue-rotate(15deg) saturate(1.1); } 100% { background-position: 0% 0%, 0% 0%, 0% 0%; filter: hue-rotate(0deg) saturate(1); } } .rounded-top-left { border-radius: 6px 0 0 0 ; } .rounded-top-right { border-radius: 0 6px 0 0 ; } h4 { font-weight: bold; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Override Bootstrap and set Roboto as the primary font */ body { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important; font-weight: 400; } /* Override Bootstrap defaults for all elements */ * { font-family: inherit; } /* Keep Poppins for headings or change to Roboto if preferred */ /* Override Bootstrap form controls */ .form-control, .form-select, .btn, .dropdown-item, .nav-link, .navbar-brand { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important; } /* Override Bootstrap badge, alert, and other components */ .badge, .alert, .toast, .modal-content, .popover, .tooltip { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important; }