/*Style Sheet for www.jorgemorales.xyz*/ /* =================================================================== THEME TOKENS Backgrounds, text and the social-logo tint resolve to these variables so the palette can flip as a whole. Light is the original design; the dark palette below (pure black/white) is applied automatically for visitors whose OS/browser is set to dark mode. No JS, no toggle — the page follows the reader's system preference. =================================================================== */ :root { color-scheme: light dark; /* Page + every surface (body, preloader, navbar, name band, mobile menu). */ --bg: #ffffff; /* Body copy, headings, nav and default link color. */ --text: #000000; /* Tint applied to the monochrome social logos: black on light, flipped to white in dark mode. */ --logo-filter: brightness(0); } @media (prefers-color-scheme: dark) { :root { --bg: #000000; --text: #e9e9e9; --logo-filter: brightness(0) invert(1); } } html { scroll-behavior: smooth; } /* =================================================================== PRELOADER Keeps the page hidden behind a full-screen overlay until the fonts and images have finished loading. main.js swaps the class from "is-loading" to "is-loaded", which fades the overlay out. =================================================================== */ /* Lock scrolling while the overlay is up so nothing jumps behind it. */ html.is-loading, html.is-loading body { overflow: hidden; } #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--bg); z-index: 9999; opacity: 1; transition: opacity 0.4s ease; } /* After loading, fade the overlay out and take it out of the layout so it can no longer intercept clicks or scrolling. */ html.is-loaded #preloader { opacity: 0; visibility: hidden; pointer-events: none; } .preloader-spinner { width: 48px; height: 48px; border: 4px solid rgba(7, 122, 183, 0.2); border-top-color: #077ab7; border-radius: 50%; animation: preloader-spin 0.8s linear infinite; } @keyframes preloader-spin { to { transform: rotate(360deg); } } /* Respect users who prefer reduced motion: drop the spin animation and the fade, revealing the page without movement. */ @media (prefers-reduced-motion: reduce) { #preloader { transition: none; } .preloader-spinner { animation: none; } } @font-face { font-family: 'Lato-Thin'; src: url('../fonts/lato/Lato-Thin.woff2') format('woff2'); font-style: normal; font-display: swap; } @font-face { font-family: 'Lato-Light'; src: url('../fonts/lato/Lato-Light.woff2') format('woff2'); font-style: normal; font-display: swap; } @font-face { font-family: 'Tangerine'; src: url('../fonts/tangerine/Tangerine-Regular.woff2') format('woff2'); font-style: normal; font-display: swap; } /* MAIN STYLE */ /* Brand blue used for emphasized words, links and highlights. Change this one value to re-theme every accent on the site. */ .accent { color: #077ab7; } b, strong { font-family: 'Lato-Light', sans-serif; font-weight: normal; } a { text-decoration: none; } a:link { color: var(--text); } a:visited { color: var(--text); } a:hover { color: #077ab7 !important; } /* Current section in the nav bar. main.js toggles this class on scroll instead of writing inline colors. */ .nav-menus.nav-active { color: #077ab7; } body { background-color: var(--bg); font-family: 'Lato-Thin', sans-serif; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; color: var(--text); margin: 0px; z-index: 1; } p { font-family: 'Lato-Thin', sans-serif; color: var(--text); hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; font-weight: 500; font-size: calc(12pt + 0.6vw); z-index: 0; } nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 0.8em; row-gap: 0.2em; font-family: 'Lato-Thin', sans-serif; font-weight: 300; margin-bottom: 0.5%; margin-right: 5%; font-size: calc(12pt + 1.5vw); color: var(--text); background-color: var(--bg); } li { position: relative; padding: 25px 0px 0px 40px; margin-left: -3%; list-style: none; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; font-weight: 500; font-size: calc(12pt + 0.6vw); color: var(--text); padding-bottom: 25px; text-align: left; } /* Brain bullet. Painted with mask + background-color rather than a plain background-image so it inherits the theme text color (black on light, white on dark) instead of staying a fixed black that vanishes on the dark background. li.noImage suppresses it. */ li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: var(--text); -webkit-mask: url(../images/brain.png) no-repeat left center / contain; mask: url(../images/brain.png) no-repeat left center / contain; } li.noImage { padding: 5px; margin-top: -15px; margin-left: 3%; margin-right: 0%; list-style: none; font-weight: 500; font-size: calc(10pt + 0.6vw); color: var(--text); hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; padding-bottom: 35px; text-align: left; } li.noImage::before { content: none; } h2, .subheading { font-family: 'Lato-Thin', sans-serif; font-size: calc(20pt + 0.7vw); text-align: left; margin-left: 0%; font-weight: 600; color: var(--text); } img { z-index: 0; } /* The decorative powder images are wrapped in so dark-mode viewers get the black-background variants. display: contents keeps the wrapper out of the layout so the inner still sizes and positions exactly as it did as a direct child (percentage widths, flips, margins all unaffected). */ picture { display: contents; } /* Solid border */ hr.solid { border-top: 2px solid #077ab7; opacity: 0.2; margin-top: 5%; margin-bottom: -5%; margin-left: 35%; margin-right: 35%; } #navBar { position: fixed; top: 0; margin-left: 0%; margin-right: 0%; padding-top: 30px; padding-bottom: 25px; width: 100%; height: auto; z-index: 2; background-color: var(--bg); opacity: 95%; overflow: hidden; } @media (prefers-color-scheme: dark) { #navBar { opacity: 90%; } } #centralPicDiv { width: calc(70%); height: auto; margin: auto; } #centralPic { /* Block + auto side margins keep the image centered in #centralPicDiv at any width (an inline narrower than its box would hug the left edge instead). */ display: block; position: relative; margin-top: 2%; margin-left: auto; margin-right: auto; width: 100%; z-index: 0; } /* The dark-mode hero (bluepowder_black, ~1.42:1) is a taller crop than the light one (bluepowder, ~1.95:1), so at the same width it would stand taller. Narrow it to ~72.7% (the ratio of the two aspect ratios) so the hero renders at the same height in both themes. Centering is preserved by the auto side margins above. */ @media (prefers-color-scheme: dark) { #centralPic { width: 75%; margin-top: -30px; margin-bottom: 30px; } } h1, .name { font-family: 'Lato-Thin', 'sans-serif'; position: relative; margin-left: 2.5%; margin-top: -4%; margin-bottom: 1%; font-size: calc(20pt + 5vw); font-weight: normal; vertical-align: bottom; background-color: transparent; color: var(--text); z-index: 0; } .email { font-family: 'Lato-Thin', 'sans-serif'; position: relative; margin-left: 5%; margin-top: -1%; font-size: calc(10pt + 2vw); color: var(--text); vertical-align: top; z-index: 0; } .pageDiv { display: block; position: relative; margin-left: auto; margin-right: auto; margin-top: 10%; width: 70%; max-width: 900px; z-index: 0; /* Offset in-page jumps so section headings aren't hidden behind the fixed navbar. Each section id now lives on its .pageDiv. */ scroll-margin-top: calc(70px + 2vw); } #me { display: block; } #mePhotoWrap { display: block; width: calc(170px + 6vw); height: calc(170px + 6vw); margin: auto; border-radius: 50%; overflow: hidden; box-shadow: 0 0 20px rgba(127, 127, 127, 1); } #mePhoto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 27%; } #meText, #researchText { display: block; text-align: left; } .rightPic { position: relative; margin-left: 40%; margin-right: 0%; margin-top: auto; width: 60%; height: 60%; } .leftPic { position: relative; -webkit-transform: scaleX(-1); transform: scaleX(-1); margin-left: -2%; margin-right: 0; margin-top: auto; width: 60%; height: 60%; } #mediaTitle { margin-bottom: -5%; } #mediaDiv, #featuresDiv { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-column-gap: 2vw; grid-row-gap: 4vw; align-items: center; align-content: center; margin-top: 2%; } .mediaImg { display: block; object-fit: contain; object-position: center; border-radius: 20%; background-color: transparent; /* Thin frame in the theme text color (black on light, light on dark). box-sizing keeps the tile at 10vh once the border is added. */ border: 1px solid var(--text); box-sizing: border-box; margin: auto; /* Landscape default; portrait override is below. Sizing is done in CSS (not JS) so the logos are correct before first paint. */ width: 10vh; height: 10vh; } /* On portrait screens (taller than wide) size the logos by viewport width so they don't grow too tall. Mirrors the old setMediaImgSize() in JS. */ @media (orientation: portrait) { .mediaImg { width: 12vw; height: 12vw; } } #stanceImg { filter: invert(1); transform: scale(1); } .mediaLink a { display: none; font-size: calc(10pt + 0.8vw); font-weight: bold; text-align: center; } .authorBold { font-family: 'Lato-Light', sans-serif; font-variant: small-caps; font-weight: normal; } #forbesImg { object-fit: fill; } #publicoImg { /* Match the rounded tiles now that every logo carries a visible frame (was border-radius: 0, which left square corners against the rest). */ border-radius: 20%; transform: scale(0.95); } #nautilusImg { border-radius: 0; transform: scale(0.8); } /* The rounded black backing lives on the inner (sized to the logo) rather than on the #nautilus grid cell. Putting margin:auto + background on the cell made it shrink to content instead of filling its grid column, which in turn shrank its tooltip (width:70% of the cell) to about half the width of the others. Keeping the cell full-width fixes the tooltip; the preserves the same content-sized black box. */ #nautilus { text-align: center; } #nautilus a { display: inline-block; background-color: black; border-radius: 20%; } /* Frame the black box (the visible logo tile), not the scaled inner image. */ #nautilusImg { border: none; } #nautilus a { border: 1px solid var(--text); box-sizing: border-box; } #brainsBlogImg { object-fit: cover; } /* mcHammer.webp is a 4:3 landscape image with a filled purple background, so object-fit: contain letterboxes it into a short rectangle. cover fills the square cell (its figure is centered with wide margins, so nothing important is cropped) to match the rounded-square look of the others. */ #mcHammerImg { object-fit: cover; } /* Dark mode: a few media logos are dark artwork on a transparent background and vanish against the black page. Forbes, The Brains Blog and Futurity get a light chip so they stay legible. The Stance logo is light artwork that's inverted to dark for the light theme, so on dark it simply drops the inversion instead. */ @media (prefers-color-scheme: dark) { #forbesImg, #brainsBlogImg, #futurityImg, #hubImg { background-color: #fff; box-sizing: border-box; padding: 10%; border-radius: 18%; } /* Wordmarks: contain so they aren't stretched to the square chip. (The JHU Hub mark is a wide 110×56 logo whose "hub" letters are black — invisible on the dark page without the light chip above.) */ #forbesImg, #futurityImg, #hubImg { object-fit: contain; } #stanceImg { -webkit-filter: none; filter: none; } } #artText { text-align: left; } #artQuote { font-family: 'Tangerine', cursive; font-size: 3em; font-weight: 100; text-align: center; margin: 5%; line-height: 1em; hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; } #firstLetter { font-size: 1.5em; } #lastLetter { font-size: 1.5em; } #artGlassImg { width: 80%; margin-left: 10%; margin-bottom: 0%; box-shadow: 0 0 20px gray; border-radius: 3%; } #contact { margin-top: 13%; margin-left: 10%; z-index: 1; } #contactInfo { font-family: 'Lato-Thin', sans-serif; color: var(--text); margin-left: 5%; margin-top: 5%; font-size: calc(8pt + 1.5vw); vertical-align: top; } .tooltipLogo { position: relative; } .tooltiptextLogo { font-family: 'Lato-Thin', sans-serif; font-size: 0.75em; visibility: hidden; display: inline-block; /* Solid, opaque pill so it reads the same on any background. The old translucent blue (#0779b7 at ~22%) plus mid-gray text was low contrast on white and nearly unreadable over the dark-mode background. */ background-color: #077ab7; color: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); text-align: center; margin: auto; border-radius: 20px; padding: 5%; /* Position the tooltip */ position: absolute; z-index: 1; top: 100%; left: 60%; width: 70%; } /* Show the caption on hover, and also on keyboard focus or tap (:focus-within fires when the wrapped link is focused) so touch and keyboard users get the tooltip too, not just mouse users. */ .tooltipLogo:hover .tooltiptextLogo, .tooltipLogo:focus-within .tooltiptextLogo { visibility: visible; } #twitterLogo, #googleLogo, #philLogo, #publonsLogo, #githubLogo, #orcidLogo, #blueskyLogo { margin: auto; margin-left: 5%; margin-top: 5%; height: calc(10px + 2vw); z-index: 1; -webkit-filter: var(--logo-filter); /* Safari 6.0 - 9.0 */ filter: var(--logo-filter); } #lastPic { position: relative; margin-left: 40%; margin-right: 0%; margin-top: -15%; width: 60%; height: 60%; z-index: -1; } /* Hamburger button — hidden on desktop */ #hamburger { display: none; background: none; border: none; font-size: 1.8rem; cursor: pointer; color: var(--text); padding: 0 5% 0 0; line-height: 1; } /* Mobile layout */ @media (max-width: 768px) { #navBar { display: flex; align-items: center; justify-content: flex-end; padding-top: 15px; padding-bottom: 15px; overflow: visible; } #hamburger { display: block; } nav#nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg); text-align: center; border-top: 1px solid rgba(7, 122, 183, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); margin: 0; z-index: 3; } nav#nav.nav-open { display: block; } nav#nav .nav-menus { display: block; padding: 12px 0; font-size: 1.2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } #mediaDiv, #featuresDiv { grid-template-columns: 1fr 1fr; } .pageDiv { width: 88%; } .rightPic, .leftPic { width: 85%; } }