/* On the blog page only: when a fetched article fails (unknown slug, network error) #article-shape collapses to a one-line error message, leaving the page shorter than the viewport - without this the footer floats short of the bottom of the screen with blank space below it. Same pattern as body.error-page in standalone.css for the 404 page. */ body.blog-page { display: flex; flex-direction: column; min-height: 100vh; } body.blog-page #ftco-main { display: flex; flex-direction: column; flex: 1; } /* Toggled on alongside .error-message (js/app.js) so the message sits centered in whatever space #ftco-main has, instead of pinned to the top-left of the (now sidebar-less) article column. */ body.article-error #ftco-main { justify-content: center; align-items: center; } .error-message { color: var(--red) !important; text-align: center; white-space: nowrap; } #cv-download .spinner { display: none; width: 14px; height: 14px; margin-right: 8px; border: 2px solid #fff6; border-top-color: var(--white); border-radius: 50%; vertical-align: middle; animation: spinner-rotate 0.6s linear infinite; } #cv-download.loading .spinner { display: inline-block; } html.dark-mode .ftco-navbar-light:not(.awake,.scrolled) .navbar-nav > .nav-item > .nav-link span, html.dark-mode .resume-wrap .position, html.dark-mode #about-section ul.about-info li span:first-child, html.dark-mode #about-section .counter-wrap .text p span, html.dark-mode #navi li a:not(.current) { color: var(--text-color) !important; } html.dark-mode .ftco-navbar-light:not(.awake,.scrolled) .navbar-nav > .nav-item > .nav-link.active span { color: var(--main) !important; } html.dark-mode .heading-section h2, html.dark-mode h2.heading { color: var(--main) !important; } html.dark-mode #about-section .heading-section h2 { color: var(--text-color) !important; } html.dark-mode #about-section .counter-wrap .text .number.xp { color: var(--main) !important; } html.dark-mode #about-section #last-update-date { color: var(--gray) !important; } html.dark-mode .hero-wrap .overlay { background: var(--white) !important; } html.dark-mode #article-shape { color: var(--text-color); } /* .about-author keeps its bg-light background in dark mode, so its inherited body text must stay dark rather than the light --gray. */ html.dark-mode .about-author { color: var(--dark); } html.dark-mode #article-shape .author { color: initial !important; } html.dark-mode #partners-section .partner img { background-color: var(--white); padding: 4px; border-radius: 4px; } #navi li a.current { color: var(--main) !important; margin-left: 20px; position: relative; } .open-mfp:hover, .btn.btn-primary:hover { color: var(--white) !important; opacity: 0.7; } mark.highlight { background-color: var(--lavender); border: 1px solid var(--main); } mark.highlight.current-match { border: 1px solid var(--red); } input[name="search-input"].highlight-flash { box-shadow: 0 0 3px 3px var(--gray) !important; transition: box-shadow 0.3s ease; } @keyframes pulse-blue { 0%, 100% { filter: drop-shadow(0 0 5px var(--main)); } } .icon-search.search-help { animation: pulse-blue 2s ease-in-out; cursor: pointer; color: var(--main); } #search-info { color: var(--positive); font-style: italic; } #search-info:not(:empty)::before { content: "\2713\00a0"; } #search-info.no-result { color: var(--negative) !important; } #search-info.no-result:not(:empty)::before { content: "\26a0\00a0"; } .search-form .icon-search, .search-form .icon-times { cursor: pointer; } /* ==== Home Section ==== */ .hero-wrap { width: 100%; height: 100%; position: inherit; background-size: cover; background-repeat: no-repeat; } .hero-wrap .overlay { position: absolute; inset: 0; content: ''; opacity: .1; width: 50%; background: var(--main); } .hero-wrap .text { width: 100%; } .slider-text .subheading { color: var(--main); letter-spacing: 4px; } .slider-text h1 { font-size: 60px; } @media (max-width: 767.98px) { .slider-text h1 { font-size: 40px; } } .slider-text h2 span { color: var(--main); text-decoration: underline; } .mouse { position: absolute; left: 0; right: 0; bottom: 120px; z-index: 2; } .mouse-icon { width: 70px; height: 70px; border: 1px solid transparent; cursor: pointer; position: relative; text-align: center; margin: 0 auto; display: block; } .mouse-icon::after { position: absolute; inset: 0; content: ''; background: #edf0ff; z-index: -1; transform: rotate(45deg); } .mouse-wheel { height: 70px; margin: 2px auto 0; display: block; width: 30px; background: transparent; border-radius: 50%; animation: 1.6s ease infinite wheel-up-down; color: var(--main); font-size: 30px; } @keyframes wheel-up-down { 100% { margin-top: 25px; opacity: 1; } 30% { opacity: 1; } 0% { margin-top: -10px; opacity: 0; } } .txt-rotate>.wrap { border-right: 0.08em solid var(--dark); } .slider-text .hero-tagline { font-size: 16px; max-width: 544px; margin-inline: auto; margin-bottom: 0; color: var(--gray); } /* Bootstrap's own .slider-text h1 gets a 40px mobile override, but h2 (the "I'm a " line) has none: at the default 32px, the longest role ("AI-Augmented Developer.", nbsp-glued to "a" so it can't wrap before AI-Augmented) doesn't fit one line on a phone-width screen, and the extra wrapped line overflows .hero-wrap's JS-fixed viewport height (fullHeight() in app.js). */ @media (max-width: 767.98px) { .slider-text h2 { font-size: 20px; } } /* .hero-wrap is set to the exact window height in JS (fullHeight() in app.js), and .mouse sits at a fixed 120px from its bottom - on a short (but still >= 992px wide, so .mouse isn't already hidden) browser window, that leaves too little room above it and the scroll-down cue overlaps the vertically-centered hero text. Pull it closer to the true bottom edge to free up that space. */ @media (max-height: 700px) { .mouse { bottom: 40px; } } /* ==== About Section ==== */ #about-section .img-about { width: 100%; z-index: 0; position: relative; } #about-section .img-about .img { display: block; width: 100%; position: relative; z-index: 1; } #about-section ul.about-info { display: inline-block; padding: 0; margin: 0; width: 100%; } #about-section ul.about-info li { list-style: none; margin-bottom: 10px; } #about-section ul.about-info li span { width: calc(100% - 130px); } #about-section ul.about-info li span:first-child { font-weight: 600; color: var(--text-color); width: 130px; margin-right: 8px; } #about-section .counter-wrap .text p { font-size: 20px; } #about-section .counter-wrap .text p > span { color: var(--text-color); } #about-section .counter-wrap .text p span.number { color: var(--main); } #navi { top: 180px; position: sticky; margin: 0; } #navi ul { margin: 0; padding: 0; } #navi li { font-weight: bold; list-style: none; margin-bottom: 10px; } #navi li a { color: #000; padding: 0; } #navi li a.current::after { position: absolute; top: 50%; left: -24px; width: 20px; height: 2px; content: ''; transform: translateY(-50%); background: var(--main); } .profile-photo { background-image: url("/images/profile.webp"); } .profile-photo:hover { opacity: 0.9; } /* ==== Counter Section ==== */ #counter-section { position: relative; z-index: 0; } @media (max-width: 1199.98px) { #counter-section { background-position: center center !important; } } #counter-section .stat-card { display: block; width: 100%; text-align: center; padding: 30px 20px; background-color: var(--white); } #counter-section .text strong.number { font-size: 30px; color: var(--main); display: block; } #counter-section .text span { display: block; color: rgb(0 0 0 / 80%); } @media (max-width: 767.98px) { #counter-section .counter-wrap { margin-bottom: 20px; } } /* ==== Hire Me ==== */ #hireme-section { background-color: var(--main); z-index: 0; position: relative; background-image: url("/images/background.webp"); } #hireme-section .overlay { position: absolute; inset: 0; content: ''; background: var(--main); opacity: 0.5 !important; } #hireme-section p { color: var(--white); } /* ==== Resume Section ==== */ .page { width: 100%; margin-bottom: 7em; } .page.four { margin-bottom: 0; } .page .heading { font-weight: 800; font-size: 30px; margin-bottom: 30px; color: var(--main); } .resume-wrap { width: 100%; margin-bottom: 30px; border-bottom: 1px solid rgb(0 0 0 / 10%); padding-bottom: 10px; } .resume-wrap .icon { width: 50px; height: 50px; background: var(--main); border-radius: 50%; } .resume-wrap .icon span { color: #fff; font-size: 28px; } .resume-wrap .text { width: calc(100% - 50px); } .resume-wrap .date { font-weight: bold; color: rgb(0 0 0 / 60%); color: var(--main); } .resume-wrap h2 { font-size: 24px; } .resume-wrap .position { font-size: 18px; font-weight: bold; color: #000; } .about-author { border-radius: 5px; margin-top: 20px; } .about-author .desc { display: flex; flex-direction: column; } .about-author .desc h3 { font-size: 24px; } .qrcode-group { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: 8px; } .qrcode-card { display: flex; flex-direction: column; align-items: center; min-width: 0; } .qrcode-logo { max-width: 110px; height: auto; margin-bottom: 6px; } .qrcode-img { max-width: clamp(90px, 9vw, 140px); height: auto; } /* Stacked cards have the whole column to themselves, so they can be bigger; side by side on mobile, two cards must still fit in that same width. */ @media (max-width: 767.98px) { .qrcode-group { flex-direction: row; } .qrcode-logo { max-width: 60px; } .qrcode-img { max-width: clamp(55px, 5vw, 65px); } } .logo-school { background-size: cover !important; } #about-section #last-update-date { font-size: 16px; color: var(--gray); } /* Growing blue underline on hover, mirroring the top navbar's .nav-link span::before (scoped to .ftco-navbar-light, so it never reaches the resume sub-nav). The current item keeps its own ::after dash. */ #navi li a span { position: relative; display: inline-block; padding-bottom: 2px; } #navi li a span::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--main); transform: scaleX(0); transition: transform 0.3s ease-in-out; } #navi li a:not(.current):hover span::before { transform: scaleX(1); } #js { background-position: center; border: 1px solid var(--cyan); } #fft { background-size: 30px; background-color: var(--yellow); background-repeat: no-repeat; background-position: center; } /* ==== Progress Bars ==== */ .progress-wrap { width: 100%; margin-bottom: 30px; } .progress-wrap h3 { font-size: 16px; margin-bottom: 10px; font-weight: 500; } progress { appearance: none; width: 100%; height: 8px; border: none; border-radius: 8px; overflow: hidden; } progress::-webkit-progress-bar { background-color: var(--lavender); border-radius: 8px; } progress::-moz-progress-bar { border-radius: 8px; background-color: var(--main); } progress::-webkit-progress-value { background-color: var(--main); } /* ==== Buttons ==== */ .bg-light { background: #f8f9fa !important; } .bg-dark { background: #191919 !important; } .btn { cursor: pointer; border-radius: 40px; box-shadow: 0 24px 36px -11px rgb(0 0 0 / 9%); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; } .btn:hover, .btn:active, .btn:focus { outline: 0; } .btn-primary, .btn-outline-primary { background-color: var(--main); border-color: var(--main); } .btn-outline-primary { background-color: transparent; color: var(--main); } .btn-primary:hover, .btn-outline-primary:hover { background-color: var(--main); border-color: var(--main); color: var(--white); } .btn.btn-primary { background: var(--main) !important; border: 1px solid var(--main) !important; color: var(--white) !important; } .btn.btn-primary:hover { background: var(--main) !important; border: 1px solid var(--main) !important; color: var(--white) !important; } .btn.btn-primary.btn-outline-primary { border: 2px solid var(--main) !important; background: transparent !important; color: var(--main) !important; } .btn.btn-primary.btn-outline-primary:hover { border: 2px solid transparent !important; background: var(--main) !important; color: #fff !important; } /* ==== Utilities ==== */ /* Scroll-reveal: index/blog sections and the footer's synopsis widget start hidden, then app.js adds ftco-animated (plus a fadeInUp class) once the element scrolls into view. Kept together and in this order so cascade order still resolves visibility to visible even after app.css loads. */ .ftco-animate { opacity: 0; visibility: hidden; } .ftco-animated { visibility: visible; animation-duration: .5s; animation-fill-mode: both; } .ftco-section { padding: 7em 0; position: relative; } @media (max-width: 767.98px) { .ftco-section { padding: 6em 0; } } .ftco-no-pt { padding-top: 0 !important; } .ftco-no-pb { padding-bottom: 0 !important; } .heading-section { position: relative; } .heading-section .subheading { font-size: 13px; font-weight: 500; display: block; margin-bottom: 5px; text-transform: uppercase; color: black; letter-spacing: 3px; } .img, .blog-img { background-size: cover; background-repeat: no-repeat; background-position: center center; } .blog-preview-thumb { overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; display: block; width: 100%; height: 300px; } /* ==== Partners ==== */ #partners-section { padding: 4em 0 !important; } #partners-section .partner { display: block; padding: 0 20px; } @media (max-width: 991.98px) { #partners-section .partner { display: none; } } /* ==== Navbar ==== */ .ftco-navbar-light { background: transparent !important; position: absolute; top: 0; left: 0; right: 0; z-index: 3; } @media (max-width: 991.98px) { .ftco-navbar-light { background: #000 !important; position: relative; top: 0; padding: 0 15px; } } .ftco-navbar-light .container { width: 1110px; margin: 0 auto; padding: 0; } .ftco-navbar-light .navbar-brand { color: #000; padding-top: 11.2px; padding-bottom: 11.2px; } .ftco-navbar-light .navbar-brand:hover, .ftco-navbar-light .navbar-brand:focus { color: #000 !important; } @media (max-width: 991.98px) { .ftco-navbar-light .navbar-brand { color: #fff; } .ftco-navbar-light .navbar-nav { padding-bottom: 20px; margin-right: 0; } } .ftco-navbar-light .navbar-nav>.nav-item>.nav-link { padding: 11.2px 20px; color: #000; font-weight: 400; opacity: 1 !important; } .ftco-navbar-light .navbar-nav>.nav-item>.nav-link span { position: relative; display: block; padding-bottom: 2px; } @media (max-width: 1199.98px) { .ftco-navbar-light .navbar-nav>.nav-item>.nav-link span { display: inline-block; } } .ftco-navbar-light .navbar-nav>.nav-item>.nav-link span::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background: var(--main); visibility: visible; transform: scaleX(0); transition: all .3s ease-in-out; } .ftco-navbar-light .navbar-nav>.nav-item>.nav-link:hover span::before { visibility: visible; transform: scaleX(1); } @media (max-width: 991.98px) { .ftco-navbar-light .navbar-nav>.nav-item>.nav-link { padding: 0 0 16px; color: #fff; } } .ftco-navbar-light .navbar-nav>.nav-item .nav-link.active { background: transparent; background: 0; color: var(--main); } .ftco-navbar-light .navbar-nav>.nav-item .nav-link.active span::before { visibility: visible; transform: scaleX(1); } @media (max-width: 991.98px) { .ftco-navbar-light .navbar-nav>.nav-item.active>a { color: var(--main); } } .ftco-navbar-light .navbar-toggler { border: 0; color: rgb(255 255 255 / 50%) !important; cursor: pointer; padding-right: 0; text-transform: uppercase; font-size: 16px; letter-spacing: .1em; } .ftco-navbar-light .navbar-toggler:hover, .ftco-navbar-light .navbar-toggler:focus { text-decoration: none; color: var(--main); outline: none !important; } /* Centre the pill on the navbar's wrapped mobile row (a flex item there, so still block-level and needs auto margins to centre within that row). In .page-controls (policy / terms) and .read-title (projects) it's one part of a flex row that's already centred (or space-between, for .read-title) as a whole, so no auto margins there. */ .navbar #language-switcher { margin-inline: auto; } /* Below the navbar's expand breakpoint the switcher wraps onto its own row inside .container; without this it butts against the toggler row above and the page content below. */ @media (max-width: 991.98px) { .navbar #language-switcher { margin-block: 10px; } } .ftco-navbar-light.scrolled { position: fixed; right: 0; left: 0; top: 0; margin-top: -130px; background: #fff !important; box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%); padding: 0 15px; } .ftco-navbar-light.scrolled .nav-item>.nav-link { color: #000 !important; } @media (max-width: 991.98px) { .ftco-navbar-light.scrolled .nav-item>.nav-link { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 20px !important; } } .ftco-navbar-light.scrolled .nav-item.active>a { color: var(--main) !important; } @media (max-width: 991.98px) { .ftco-navbar-light.scrolled .navbar-nav { background: 0; border-radius: 0; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; } } .ftco-navbar-light.scrolled .navbar-toggler { border: 0; color: rgb(0 0 0 / 50%) !important; border-color: rgb(0 0 0 / 50%) !important; cursor: pointer; text-transform: uppercase; letter-spacing: .1em; } .ftco-navbar-light.scrolled .nav-link { color: #000 !important; } .ftco-navbar-light.scrolled .nav-link.active { color: var(--main) !important; } .ftco-navbar-light.scrolled.awake { margin-top: 0; transition: .3s all ease-out; } .ftco-navbar-light.scrolled.sleep { transition: .3s all ease-out; } .ftco-navbar-light.scrolled .navbar-brand { color: #000; padding-top: 16px; padding-bottom: 16px; font-size: 24px; } .navbar-brand { font-weight: 900; font-size: 26px; position: relative; z-index: 0; } .navbar-brand::after { position: absolute; top: 50%; left: -12px; width: 40px; height: 40px; content: ''; background: var(--main); z-index: -1; transform: translateY(-50%); border-radius: 50%; } .navbar-brand span { color: #fff; } .navbar-nav > .nav-item .nav-link.active span { color: #385ae6; } /* ==== Navbar Brand ==== */ html.dark-mode .ftco-navbar-light:not(.awake) .navbar-brand, .ftco-navbar-light:not(.awake) .navbar-brand:hover { color: var(--text-color) !important; } @media(max-width: 991.98px) { .ftco-navbar-light .navbar-brand, .ftco-navbar-light:not(.awake) .navbar-brand:hover { color: var(--white) !important; } .ftco-navbar-light.scrolled .navbar-brand { color: var(--dark) !important; } .mouse, #navi { display: none; } } /* ==== Blog Section ==== */ .blog-entry { position: relative; } @media (min-width: 768px) { .blog-entry { margin-bottom: 30px; } } @media (max-width: 767.98px) { .blog-entry { margin-bottom: 30px; } } .blog-entry .text { width: 100%; margin: 0 auto; } .blog-entry .text .heading { font-size: 20px; margin-bottom: 16px; font-weight: 500; } .blog-entry .text .heading a { color: #000; } .blog-entry .text .heading a:hover, .blog-entry .text .heading a:focus, .blog-entry .text .heading a:active { color: var(--main); } .blog-entry .meta { display: inline-block; margin-right: 5px; margin-bottom: 0; font-weight: 600; } .blog-entry .meta span { color: var(--main); } .blog-entry .meta a { color: var(--main); } .blog-entry .meta a:hover { color: var(--main); } .footer-list ul { padding: 0; } .footer-list ul li { display: table; margin-bottom: 15px; } .footer-list ul li span { color: rgb(255 255 255 / 70%); } .footer-list ul li .text { display: table-cell; vertical-align: top; } .media-row .blog-img { display: block; height: 80px; width: 80px; border-radius: 50%; } .media-row .text { width: calc(100% - 100px); } #recent-article-heading { color: var(--main); } .tagcloud a { text-transform: uppercase; display: inline-block; padding: 4px 10px; margin-bottom: 7px; margin-right: 4px; border-radius: 4px; color: var(--main); border: 1px solid var(--main); font-size: 11px; } .tagcloud a:hover { border: 1px solid #718dff; opacity: .7; } .search-form .form-group { position: relative; margin-bottom: 0; } .search-form .form-group input { padding-right: 50px; font-size: 14px; } .search-form .icon { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } .sidebar-box { margin-bottom: 30px; padding: 25px; font-size: 15px; width: 100%; } .blog-entry .article-image:hover { opacity: 0.7 !important; } /* ==== Contact Popup ==== */ #contact-icon { position: fixed; bottom: 20px; right: 20px; width: 60px; background-color: var(--main); border-radius: 50%; cursor: pointer; box-shadow: 0 4px 6px var(--shadow-lg); z-index: 1000; } #contact-icon .icon-user { padding: 15px; font-size: 25px; } #contact-window { position: fixed; bottom: 85px; right: 20px; width: 300px; height: auto; border-radius: 10px; box-shadow: 0 4px 6px var(--shadow-lg); overflow: hidden; z-index: 1000; } #contact-header { background-color: var(--main); padding: 8px; border-top-left-radius: 10px; border-top-right-radius: 10px; } #contact-link { font-size: 14px; } #contact-link p { gap: 10px; margin: 10px; width: 100%; } #contact-link i { font-size: 15px; height: 15px; width: 15px; background-size: contain; background-repeat: no-repeat; } /* stays --main, not --link: #contact-window is bg-white in both themes */ #contact-link a { color: var(--main); text-decoration: none; transition: color 0.3s; } #contact-link a:hover { text-decoration: underline; } #calendly-cta { cursor: pointer; } @media(max-width:910px) { #contact-window { bottom: 90px; right: 20px; width: 230px; border-radius: 25px; } #contact-header { padding: 4px 8px; border-top-right-radius: 25px; border-top-left-radius: 25px; } #contact-link { font-size: 12px; color: var(--dark); } #contact-link p { gap: 8px; width: 90%; } #contact-link i { font-size: 13px; } } #callback-form { margin-top: 8px; margin-bottom: 16px; } .mfp-close { cursor: pointer; } /* ==== Contact Section ==== */ .form-control { height: 52px !important; background: #fff !important; color: #000 !important; font-size: 18px; border-radius: 5px; box-shadow: none !important; } .form-control:focus, .form-control:active { border-color: #000; } textarea.form-control { height: inherit !important; } #contact-section .box { width: 100%; display: block; border-radius: 4px; } @media (max-width: 991.98px) { #contact-section .box { margin-bottom: 30px; } } #contact-section .box .icon { width: 100px; height: 100px; background: var(--main); margin: 0 auto; margin-bottom: 10px; border-radius: 50%; } #contact-section .box .icon span { color: #fff; font-size: 30px; } #contact-section .contact-form { width: 100%; } #contact-section .img { width: 100%; background-position: top center; } @media (max-width: 991.98px) { #contact-section .img { height: 500px; } } #contact-section .contact-info p a { color: var(--main); } @media (max-width: 767.98px) { #contact-section .contact-form .btn-primary { display: block; width: 100%; } } .contact-row .form-control { outline: none !important; box-shadow: none !important; font-size: 15px; } /* ==== Projects Section ==== */ .project { width: 100%; height: 350px; margin-bottom: 0; position: relative; z-index: 0; } .project .overlay { position: absolute; inset: 0; content: ''; opacity: 0; background: var(--main); z-index: -1; transition: all .3s ease; } @media (max-width: 767.98px) { .project .overlay { opacity: .2; } } .project .text { max-width: 80%; z-index: 1; opacity: 0; transition: all .3s ease; } .project .text span { color: var(--white); font-size: 12px; text-transform: inherit !important; letter-spacing: inherit !important; } @media (max-width: 767.98px) { .project .text { opacity: 1; } .project .text span { color: rgb(255 255 255 / 80%); } } .project:hover .overlay, .project:focus .overlay { opacity: .9; } .project:hover .text, .project:focus .text { opacity: 1; } #projects-section { opacity: 0.8; } .project p { font-size: 13px !important; } @media (max-width: 767.98px) { .project .text { opacity: 0; } } .project-title { bottom: 0; width: 100%; position: absolute; background: var(--white); box-shadow: 0 4px 10px var(--dark); padding: 4px; } .project-title h5 { font-weight: bold; color: var(--main); } .project:hover .project-title { display: none; } .project:hover .badge { background-color: var(--dark); transition: background-color 0.3s ease; } /* .badge is positioned absolute for the project-card overlay; reset it to flow inline next to the experience date instead. */ .resume-wrap .badge { position: static; display: inline-block; vertical-align: middle; margin-left: 8px; } .resume-wrap .text p:has(+ .sector-tag) { margin: 0; } .resume-wrap .mission { display: block; font-style: italic; color: var(--gray); font-size: 0.85em; } .sector-tag { display: inline-block; margin-top: 6px; margin-right: 6px; padding: 2px 10px; font-size: 12px; color: var(--gray); border: 4px solid var(--lavender); border-radius: 4px; } .company-type-badge, .company-size-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px; font-size: 12px; color: var(--white); border-radius: 0; } .company-type-badge { background-color: var(--dark); } .company-size-badge { background-color: var(--orange); } /* Experience filters: built from the already-rendered badges/tags by initExperienceFilters() in js/app.js. */ #experience-filters { margin-bottom: 32px; } .filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; } .filter-group-label { font-weight: 600; font-size: 0.85em; margin-right: 4px; } .filter-chip { display: inline-block; padding: 3px 12px; font-size: 0.8em; color: var(--dark); background-color: var(--lavender); border: 1px solid var(--background); border-radius: 20px; cursor: pointer; } .filter-chip:focus { outline: none; box-shadow: 0 0 0 2px var(--main); } .filter-chip.active { color: var(--white); background-color: var(--main); border-color: var(--main); } #experience-filters-reset { padding: 3px 12px; font-size: 0.8em; color: var(--main); background: none; border: 1px solid var(--main); border-radius: 20px; cursor: pointer; } #experience-filters-reset:focus { outline: none; box-shadow: 0 0 0 2px var(--main); } /* .resume-wrap also carries Bootstrap's .d-flex (display: flex !important), which otherwise wins over a plain display: none here. */ .resume-wrap.filtered-out { display: none !important; } #experiences-empty { color: var(--gray); font-style: italic; } /* ==== Carousel Section ==== */ .owl-menus { flex-wrap: wrap; gap: clamp(16px, 6vw, 60px); } .owl-menu { cursor: pointer; padding-bottom: 4px; border-bottom: 2px solid transparent; } .owl-menu.active { color: #6e8bff; border-bottom-color: #6e8bff; } .owl-carousel { max-width: 80%; margin: auto; } .owl-item { border-radius: 15px; padding: 30px; box-sizing: border-box; } .owl-item img { width: 50% !important; height: 50%; aspect-ratio: 1 / 1; object-fit: contain; } .owl-prev, .owl-next { top: 50%; width: 28px; height: 28px; } .owl-prev { left: -28px; } .owl-next { right: -28px; } .owl-theme .owl-nav [class*="owl-"]:hover { background: inherit; opacity: 0.7; } .owl-prev:focus, .owl-next:focus, .owl-dot:focus { background: transparent; outline: none; } .owl-dot.active span { background: var(--main) !important; } /* ==== Services Section ==== */ .services { margin-bottom: 40px; padding: 2em; background: rgb(255 255 255 / 10%); width: 100%; } .services .icon { display: block; margin-bottom: 30px; } .services .icon i { font-size: 60px; color: var(--main); } .services .desc h6 { letter-spacing: 3px; text-transform: uppercase; position: relative; color: var(--text-color); } .services .desc h6::after { position: absolute; bottom: -15px; left: 0; right: 0; content: ''; width: 30px; height: 1px; background: var(--main); margin: 0 auto; } .services:hover { background: var(--main); opacity: 0.8; } .services:hover .icon i { color: var(--white); } .services:hover h6 { color: var(--white); } .services:hover h6::after { background: var(--white); } /* ==== Footer ==== */ .ftco-footer-links li { list-style: none; margin: 0 10px 0 0; display: inline-block; } .ftco-footer-links li a { height: 50px; width: 50px; display: block; float: left; background: var(--main); border-radius: 50%; position: relative; } .ftco-footer-links li a span { position: absolute; font-size: 26px; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--white) !important; } .ftco-footer-links li a:hover { color: #fff; } #bingo-timer { font-size: 40px; } #bingo-btn { padding: 10px 30px; background-color: var(--main); cursor: pointer; font-size: 30px; text-transform: none; letter-spacing: normal; border-radius: 5px; margin: 20px; } #bingo-btn:hover { opacity: 0.8; } /* --green / --red, not --positive / --negative: #bingo-timer sits on the always-black footer, where the light-theme (darkened) variants fail. */ .victory { color: var(--green); border-radius: 10px; animation: blink 0.5s alternate 5; } .defeat { color: var(--red); border-radius: 10px; animation: shake 0.5s; } @keyframes blink { from { opacity: 1; } to { opacity: 0.3; } } @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } } .icon-heart, .icon-shield { color: var(--red); } .bulle-bd { display: none; position: absolute; top: 20px; right: 20px; border: 2px solid var(--main); border-radius: 10px; padding: 10px; max-width: 200px; box-shadow: 2px 2px 5px var(--shadow-lg); } .bulle-bd::after { content: ""; position: absolute; bottom: -18px; left: 20px; border-width: 8px; border-style: solid; border-color: var(--main) transparent transparent transparent; } .profile-photo:hover .bulle-bd { display: block; } /* ==== Chart ==== */ .chart-container { min-height: 250px; max-height: 500px; } #search-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border: 1px solid var(--main); border-top: none; max-height: 150px; overflow-y: auto; list-style: none; margin: 0; padding: 0; z-index: 1000; font-size: 0.9em; } #search-suggestions li { padding: 8px 12px; cursor: pointer; } #search-suggestions li:hover { background-color: var(--light); } input[name="search-input"] { border-color: var(--main) !important; }