@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBM_Plex_Sans/IBMPlexSans.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono Thin Italic"; src: url("/fonts/IBM_Plex_Mono/IBMPlexMono-ThinItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf") format("truetype"); } @font-face { font-family: "Kanit"; url("../fonts/Kanit/Kanit-Regular.ttf") format("truetype"); } @font-face { font-family: "Mongo Value Serif"; url("../fonts/MongoValueSerif/MongoValueSerif.woff2"); } .doto { font-family: "IBM Plex Sans", sans-serif; font-optical-sizing: auto; font-style: bold; } /* ------------------------- Base ------------------------- */ :root { --maincolor: #000000; --secondarycolor: #6994bb; /* Bootstrap mappings (light mode defaults) */ --bs-body-bg: #ffffff; --bs-body-color: var(--maincolor); --bs-link-color: var(--maincolor); --bs-heading-color: var(--maincolor); --bs-muted-color: var(--secondarycolor); --bs-border-color: rgba(0, 0, 0, 0.08); --bs-card-bg: #ffffff; --bs-navbar-bg: #ffffff; --bs-btn-bg: var(--maincolor); --bs-btn-color: #ffffff; --bs-secondary: var(--secondarycolor); } /* Optional: smooth transition when switching themes */ * { transition: background-color .18s ease, color .18s ease, border-color .18s ease; } /* ------------------------- Automatic dark mode (OS preference) ------------------------- */ @media (prefers-color-scheme: dark) { :root { /* choose dark values — you can tweak these to taste */ --maincolor: #000000; --secondarycolor: #6994bb; --bs-body-bg: #1c1c1c; --bs-body-color: var(--maincolor); --bs-link-color: var(--maincolor); --bs-heading-color: var(--maincolor); --bs-muted-color: var(--secondarycolor); --bs-border-color: rgba(255, 255, 255, 0.08); --bs-card-bg: #111213; --bs-navbar-bg: url("/images/homepage/code.jpeg"); --bs-btn-bg: var(--maincolor); --bs-btn-color: #000000; --bs-secondary: var(--secondarycolor); } } /* ------------------------- Manual toggle (class or data-attr) Use either: or ------------------------- */ body.dark-mode, body[data-theme="dark"] { --maincolor: #ffffff; --secondarycolor: #6994bb; --bs-body-bg: #1c1c1c; --bs-body-color: var(--maincolor); --bs-link-color: var(--maincolor); --bs-heading-color: var(--maincolor); --bs-muted-color: var(--secondarycolor); --bs-border-color: rgba(255, 255, 255, 0.08); --bs-card-bg: #111213; --bs-navbar-bg: url("/images/homepage/code-dark.jpeg"); --bs-btn-bg: var(--maincolor); --bs-btn-color: #000000; --bs-secondary: var(--secondarycolor); } .list-group { background-color: #ffffff; color: var(--maincolor); } .list-group-item { background-color: #ffffff; color: var(--maincolor); border-color: rgba(0, 0, 0, 0.1); } .list-group-item.active { background-color: var(--maincolor); border-color: var(--maincolor); color: #ffffff; } .list-group-item:hover { background-color: var(--secondarycolor); color: var(--bs-gray-100) !important; } body.dark-mode .list-group { background-color: var(--bs-body-bg); color: #ffffff; } body.dark-mode .list-group-item { background-color: #161618; color: #ffffff; border-color: rgba(255, 255, 255, 0.1); } body.dark-mode .list-group-item.active { background-color: var(--maincolor); border-color: var(--maincolor); color: #000000; } body.dark-mode .list-group-item:hover { background-color: #28282c; color: #ffffff; } /* Swiper */ .swiper { user-select: none; /* standard */ -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ } .swiper-pagination-bullet-active, .swiper-pagination-bullet { background: var(--secondarycolor) !important; } .swiper-button-next, .swiper-button-prev { color: var(--maincolor) !important; } /* ------------------------- Helpful small tweaks for Bootstrap elements ------------------------- */ /* Body / page background & text */ body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Cards */ .card { background-color: var(--bs-card-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } /* Links */ a { color: var(--bs-link-color); } /* Buttons using primary color */ .btn-primary { background-color: var(--bs-btn-bg); border-color: var(--bs-btn-bg); color: var(--bs-btn-color); } /* Muted/secondary text */ .text-muted, .form-text { color: var(--bs-muted-color) !important; opacity: 1; /* we use explicit muted color */ } /* Have desktop and mobile only elements */ @media only screen and (max-width: 768px) { .desktop-only { display: none; } } @media only screen and (min-width: 768px) { .mobile-only { display: none; } } .animate__slowerer { --animate-duration: 4s; } body { font-family: "IBM Plex Sans", sans-serif !important; } h1, h2 { font-family: "IBM Plex Mono Thin Italic", sans-serif; font-style: italic; } .code { font-family: "IBM Plex Mono", monospace; } h1 { color: var(--secondarycolor); } a:link, a:visited, a:hover, a:active { text-decoration: none; } div.carousel-item > div > h5 > a { color: white; } .animate-on-scroll { opacity: 0; } @media screen and (min-width: 1000px) { .carousel-item { height: 600px; } } @media screen and (max-width: 1000px) { .carousel-item { height: 200px; } } h1, h2 { font-size: 25px; } .h3, .h4, h3, h4 { font-family: "IBM Plex Sans", sans-serif; font-weight: 500 !important; } .h5, .h6, h5, h6 { font-family: "IBM Plex Sans", sans-serif; font-weight: 400 !important; } p { font-family: "IBM Plex Sans", sans-serif; font-size: 20px; font-weight: 200; line-height: 25px; } section { transition: 0.5s ease-in-out; color: var(--maincolor) !important; /* min-height: 50vh; */ } /* * Carousel */ /* Make the arrows visible (not white on white) */ .carousel-control-next, .carousel-control-prev /*, .carousel-indicators */ { filter: invert(100%); } .carousel-inner { border-radius: 5px; } /* Blur the background on carousel captions */ .carousel-caption { opacity: 0; } .zoom-in-parent:hover .carousel-caption, .zoom-in-parent:focus .carousel-caption { opacity: 1; text-shadow: 0 0 10px #000000, 0 0 20px #000000; backdrop-filter: blur(2px); border-radius: 100%; transition-duration: 0.5s; } /* * Scale-up effect on hover */ .scaleup { transform: scale(1); transition: transform 0.5s ease-in-out; } .scaleup:hover { transform: scale(1.3); } /* * Zoom-in effect on hover */ .zoom-in-parent .zoom-in-child { transition: all .5s; } .zoom-in-parent:hover .zoom-in-child, .zoom-in-parent:focus .zoom-in-child { transform: scale(1.1); animation-duration: 1s; } #software { animation-delay: 0.5s; } #contact { z-index: 10; overflow: hidden; position: relative; } .tab-content { display: none; } /* * Contact section */ #contactLogo { width: 30% !important; content: url("/images/logos/cybercat-inverted.png"); } #contactLogo.uninvert-cybercat { content: url("/images/logos/cybercat.png"); } .contact-info-group { /* min-height: 500px; */ position: relative; z-index: 10; } .table-group-divider { padding-bottom: .5em; } .code-background { /*background-image: url("/images/homepage/code.jpeg"), linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));*/ background-image: var(--bs-navbar-bg); background-color: var(--secondarycolor) !important; background-blend-mode: screen; background-size: cover; background-attachment: fixed; background-position: 70% 80%; color: var(--bs-body-color) } .contact-divider { position: relative; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; background-color: var(--bs-body-bg) !important; } .contact-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: 131px; } .contact-divider .shape-fill { fill: var(--secondarycolor); } .contact-info-group { background-color: var(--secondarycolor); } #header { position: relative; height: 70px; background-color: #fff; border-bottom: 1px solid var(--maincolor); } #header.full-header { border-bottom-color: #eee; } #header.full-header #primary-menu > ul { float: left; padding-right: 15px; margin-right: 15px; /* border-left: 1px solid #eee*/ } #primary-menu-trigger { opacity: 0; pointer-events: none; cursor: pointer; font-size: 14px; position: absolute; right: 0 !important; top: 0%; margin-top: -25px; /*margin: 10px;*/ width: 50px; height: 50px; line-height: 50px; text-align: center; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease } #primary-menu ul { list-style: none; margin: 0 } #primary-menu > ul { float: left } #primary-menu ul li { position: relative } #primary-menu ul > li { float: left; margin-left: 2px } #primary-menu > ul > li:first-child { margin-left: 0 } #primary-menu ul li > a { display: block; line-height: 22px; padding: 23px 15px !important; color: var(--secondarycolor); font-weight: 700; font-size: 18px; letter-spacing: 1px; text-decoration: none; -webkit-transition: margin .4s ease, padding .4s ease; -o-transition: margin .4s ease, padding .4s ease; transition: margin .4s ease, padding .4s ease } #primary-menu ul li > a span { display: none } #primary-menu ul li > a i { position: relative; top: -1px; font-size: 14px; width: 16px; text-align: center; margin-right: 6px; vertical-align: top } #primary-menu ul li > a i.icon-angle-down:last-child { font-size: 12px; margin: 0 0 0 5px } #primary-menu ul li:hover > a { color: var(--maincolor); } #primary-menu ul ul li { float: none; margin: 0 } #primary-menu ul ul li:first-child { border-top: 0 } #primary-menu ul ul li > a { font-size: 12px; font-weight: 700; color: var(--secondarycolor); padding-top: 10px; padding-bottom: 10px; border: 0; letter-spacing: 0; font-family: Lato, sans-serif; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out } #primary-menu ul ul li > a i { vertical-align: middle; } #primary-menu ul ul li:hover > a { background-color: #f9f9f9; padding-left: 18px; color: var(--secondarycolor); } #primary-menu.style-2 { float: none; min-width: 100vw; border-top: 1px solid #f5f5f5; box-shadow: 0 5px 5px 0 rgba(116, 116, 116, 0.3); position: absolute; top: 0px; right: 0px; min-height: 70px; padding-left: 65px; } #primary-menu.style-2 > div > ul { float: left; } #primary-menu.style-2 > div > ul > li > a { padding-top: 19px; padding-bottom: 19px; } /*Collapse logo sooner*/ @media (max-width: 1300px) { #navbar-logo { display: none; } } #navbar-logo { height: 70px; margin-left: auto; padding: 10px; } #navbar-logo:active { animation: rotateOut; animation-duration: 3s; } #navbar-logo:hover { filter: invert(1); } #emailForm { z-index: 11; position: relative; } .header-txt { cursor: default; } .list-group-item { color: var(--maincolor) !important; } .mongo-value-serif { font-family: "Mongo Value Serif"; } .fa-icon { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--secondarycolor); } /* Manual mobile fixes */ @media only screen and (max-width: 768px) { /* Make list horizontal list groups responsive */ .list-group { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 1000px; } .list-group-item { min-width: 200px; border: 0 !important; } } .dimmed { filter: brightness(0.5); } .form-control { color: var(--maincolor) !important; background-color: var(--secondarycolor) !important; } .form-control::placeholder { color: #ddd !important; } section .cursor { display: inline-block; width: 0.6ch; } section:hover .cursor { opacity: 1; animation: blink-smooth 1s linear infinite; animation-fill-mode: both; } @keyframes blink-smooth { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } } /*When the buttons of swiper are disabled, do not display them*/ .swiper-button-disabled { display: none !important; } .vertical-hr { width: 2px; flex-grow: 1; background-color: #777; border: none; margin: 0; } .vertical-letter { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0.5rem 0; font-weight: bold; text-align: center; } .proj-tag-line { backdrop-filter: blur(20px) !important; border: 1px solid var(--bs-secondary) !important; border-radius: 5px; background: lightgray; }