@font-face { font-family: 'Courier_Prime'; /*src: url('CaviarDreams.ttf') format('truetype');*/ src: url('fonts/Courier Prime.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Courier_Prime'; src: url('fonts/Courier Prime Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Courier_Prime'; src: url('fonts/Courier Prime Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Courier_Prime'; src: url('fonts/Courier Prime Bold Italic.ttf') format('truetype'); font-weight: bold; font-style: italic; } /* Dark mode default */ :root { --bg-primary: rgba(0,0,0,1); --bg-section: rgba(30, 30, 30, 0.7); --bg-card: rgba(255, 255, 255, 0.1); --bg-secondary: rgba(0,0,0,0.8); --text-primary: rgba(255,255,255, 1); --text-secondary: rgba(255,255,255,0.2); --accent: rgba(0,255,255,1); --border-radius-1: 5px; --border-radius-2: 15px; } /* Light mode */ @media (prefers-color-scheme: light) { :root { /* Can we have some values that do not change or do I have to redefine all values again ? */ --bg-primary: rgba(255,255,255,1); --bg-secondary: #f5f5f5; --text-primary: rgba(0,0,0,1); --text-secondary: #666666; } } /* Border-box everywhere so padding never widens elements past the viewport */ *, *::before, *::after { box-sizing: border-box; } /* Images never overflow their container on small screens */ img { max-width: 100%; height: auto; } html { /* Never scroll sideways; smooth in-page jumps for the nav anchors */ overflow-x: hidden; scroll-behavior: smooth; /* Anchor jumps stop below the sticky header instead of underneath it. --header-h is kept in sync with the real header height by script.js; the fallback covers first paint and the no-JS case. */ scroll-padding-top: calc(var(--header-h, 8rem) + 0.5rem); } b { color: var(--accent); } body { /*background-color: #000000;*/ background: radial-gradient(circle at center, #000000, #252525); /*background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.95) 100%);*/ color: var(--text-primary); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; /* clip (not hidden) prevents sideways scroll without turning into a scroll container — hidden would force overflow-y to `auto` and break the sticky header. */ overflow-x: clip; cursor: default; } /*.dark-mode { background-color: black; color: white; }*/ /* All links will keep text styling by default */ a { color: inherit; text-decoration: inherit; } a:hover { text-decoration: underline; } #background-container { /*display: none;*/ position: absolute; top: 0; left: 0; width: 100%; /* Height is set from JS to the full document height so the repeated word covers the whole page; overflow clips the last line at the page bottom. */ height: 0; overflow: hidden; -webkit-transform: rotate(0deg); /* Safari and Chrome */ -moz-transform: rotate(0deg); /* Firefox */ -ms-transform: rotate(0deg); /* IE 9 */ -o-transform: rotate(0deg); /* Opera */ transform: rotate(0deg); } .background-text { font-family: 'Courier_Prime'; position: absolute; color: var(--text-secondary); font-size: 10vw; font-weight: bold; text-align: center; /* white-space: nowrap; */ /* white-space: wrap; overflow-wrap: break-all*/ word-break: break-all; transform: rotate(0deg); transition: color 0.01s ease; /* Spotlight effect under cursor */ mask-image: radial-gradient( circle 150px at var(--x, 50%) var(--y, 50%), rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 35%, rgba(255,255,255,0) 70% ); pointer-events: none; /* Breathing effect for the spotlight */ animation-name: blinking; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes blinking { 0% {opacity: 0;} 100% {opacity: 1;} } /* Menu selection to jump to a specific section */ header { /*background-color: var(--bg-secondary);*/ box-shadow: 0px 0px 20px 10px var(--bg-secondary); margin-bottom: 20px; backdrop-filter: blur(10px); padding-left: clamp(12px, 4vw, 50px); padding-right: clamp(12px, 4vw, 50px); padding-bottom: 0px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; position: sticky; top: 0; z-index: 1; } header h1 { background-color: var(--accent); backdrop-filter: blur(10px); padding: 10px 20px; border-radius: 30px 0px; font-size: clamp(1.4rem, 3vw + 0.4rem, 2.6rem); color: var(--bg-primary); text-align: center; transition: color 0.5s, background-color 1s; text-decoration: none; } header h1:hover { color: var(--text-primary); background-color: var(--text-secondary); } nav { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; gap: 10px clamp(8px, 2vw, 30px); padding-left: clamp(0px, 2vw, 30px); } nav a { background-color: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 30px; padding: 10px clamp(12px, 2vw, 20px); color: rgba(255,255,255,0.7); text-decoration: none; font-size: clamp(1.1rem, 2.2vw + 0.3rem, 1.6rem); line-height: 1; transition: color 0.3s, background-color 1s; /*position: relative; display: inline-block; cursor: pointer;*/ } nav a:hover { color: var(--text-primary); background-color: rgba(255,255,255,0.4); /*text-shadow: 0px 0px 0px rgba(0,0,255,1);*/ /*-webkit-text-fill-color: white;*/ -webkit-text-stroke-color: var(--text-primary); -webkit-text-stroke-width: 1px; /* Remove underline used for all other links*/ text-decoration: none; } /* Anchor each tooltip to its own item so it centers under that item (not under the whole header) */ [tip] { position: relative; } [tip]::before { content: attr(tip); position: absolute; opacity: 0; transition: opacity 0.5s ease; padding: 6px; border-radius: var(--border-radius-1); color: var(--text-primary); background-color: var(--bg-secondary); /* Center under the item and drop a fixed distance below the item's center. All header items (name + nav) share the same center line, so every label lands at the same height regardless of the item's own size. */ left: 50%; top: 50%; transform: translate(-50%, 2.4rem); z-index: 2; text-align: center; white-space: nowrap; font-size: clamp(0.7rem, 1.5vw, 1rem); } [tip]:hover::before { opacity: 1; } /* Can we add the year on the side of the timeline, text vertical? */ /* Or do I have to add another div to get the flex working... ? */ /* I feel like we should be able to use javascript to add all the papers automatically ... */ [year]::before { content: attr(year); color: var(--text-primary); background-color: var(--bg-secondary); position: absolute; opacity: 0; } .section { font-family: 'Courier_Prime'; margin-top: 0px; margin-bottom: 30px; margin-left: 30px; margin-right: 30px; padding: 0px 25px; border-radius: var(--border-radius-2); background-color: var(--bg-section); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); transition: transform 0.3s ease, box-shadow 0.3s ease; } .section:hover { /* We need to change the current hover to something that changes based on cursor position*/ transform: translateY(-5px); /*box-shadow: 0 15px 40px 0 /* Soft blue/purple glow */ box-shadow: 0px 0px 20px -5px var(--accent); } .timeline { display: flex; flex-direction: column; align-items: left; } .year { display: flex; flex-direction: row; align-items: left; padding: 5px; border-radius: var(--border-radius-1); margin: 10px; } .year-text { background-color: var(--text-secondary); color: var(--text-primary); writing-mode: sideways-lr; text-align: center; font-size: clamp(1rem, 2vw, 1.5rem); border-radius: var(--border-radius-2); margin-right: -40px; flex-shrink: 0; } .year-papers { display: flex; flex-direction: column; align-items: left; flex-grow: 2; } .paper { background-color: rgba(255, 255, 255, 0.2); padding: 5px; border-radius: var(--border-radius-2); margin: 10px; margin-left: 50px; display: flex; flex-direction: column; align-items: left; } /* .authors { background-color: rgba(255, 0, 0, 0.2); } .title { background-color: rgba(0, 255, 0, 0.2); } .publisher { background-color: rgba(0, 0, 255, 0.2); } */ .card { margin-bottom: 30px; margin-left: 30px; margin-right: 30px; padding: 25px; border-radius: var(--border-radius-2); background-color: var(--bg-card); /* Glass Effect: Blur and Border */ backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card ul { /* Duration */ color: var(--text-primary); } .cardheader{ display: flex; flex-direction: row; align-items: center; gap: 30px; } /* Keep the logo link a fixed-size flex item so a long title can't shrink it (the global img { max-width: 100% } would otherwise squeeze the logo down with its anchor). This keeps every logo 90px and every title's left edge aligned across all cards. */ .cardheader > a { flex: 0 0 auto; line-height: 0; } .cardheader img { width: 90px; height: 90px; object-fit: contain; flex-shrink: 0; } .cardheader h2 { /* Title */ color: var(--text-primary); font-weight: bold; } .cardheader h3 { /* Duration */ color: var(--text-primary); font-style: italic; margin-left: auto; flex-shrink:0; } /* https://alvarotrigo.com/fullPage/tilt-effect/ */ .tilt-container { display: flex; flex-direction: column; align-items: left; justify-content: center; perspective: 500px; min-height: 100vh; } .tilt-card { position: relative; width: 320px; height: 280px; background: linear-gradient(135deg, #1e293b, #1e293b 40%, #0f172a); border: 1px solid #334155; border-radius: 16px; /* overflow: hidden; */ overflow: scroll; cursor: pointer; transition: transform 0.1s ease-out, box-shadow 0.3s; transform-style: preserve-3d; } .card-content { display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; padding: 2rem; color: #fff; height: 100%; } .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s; } /* ------------------------------------------------------------------ */ /* Tablet and phone adjustments */ /* ------------------------------------------------------------------ */ @media (max-width: 768px) { .section { margin-left: 14px; margin-right: 14px; padding: 0px 14px; } .card { margin-left: 14px; margin-right: 14px; padding: 16px; } /* Stack the logo / title / dates instead of squeezing them in a row */ .cardheader { flex-wrap: wrap; gap: 8px 16px; } .cardheader img { margin-right: 0; } .cardheader h2 { margin-right: 0; flex-basis: 100%; } .cardheader h3 { margin-left: 0; } /* Pull the sideways year label and papers closer together */ .year { margin: 10px 4px; } .year-text { margin-right: -25px; } .paper { margin-left: 32px; } } @media (max-width: 480px) { header h1 { /* Give the name room to wrap on very small phones */ flex-basis: 100%; } .section { margin-left: 8px; margin-right: 8px; } .card { margin-left: 8px; margin-right: 8px; } .paper { margin-left: 22px; } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .background-text { animation: none; } .section, .card, nav a, header h1 { transition: none; } }