/* ═══════════════════════════════════════════════════════════════════════════ shared.css — justwhitee · Matteo Fontolan Common variables, base styles, and reusable components ═══════════════════════════════════════════════════════════════════════════ */ /* ── VARIABLES ──────────────────────────────────────────────────────────── */ :root { --bg-color: #080f0f; --card-bg: #094f4f; --text-white: #ffffff; --text-muted: rgba(255,255,255,0.55); --text-bio: #e5ebeb; --text-body: #f0feff; --accent: #09868f; --accent-bright: #00bbc9; --accent-rgb: 9,134,143; --accent-bright-rgb: 0,187,201; --radius: 28px; --radius-sm: 18px; --grid-dot: rgba(var(--accent-rgb),0.03); } /* ── BREAKPOINT SCALE ─────────────────────────────────────────────────────── CSS custom properties can't be used inside @media conditions, so this is a convention, not an enforced token — but every `max-width` in the project should be one of these two tiers, not a one-off value: Nav chrome (site-nav, section-nav dots, footer link wrap): 768px — tablet: shrink logo/link sizing 480px — phone: shrink further, stack footer links Content layout (grids, section padding, type scale): 900px — tablet: collapse multi-column grids to single column 600px — phone: tighten section padding, gaps, font sizes 400px — small phone: one more pass on hero/title sizing Nav collapses earlier (768/480) than content reflows (900/600/400) because the nav bar runs out of horizontal room before the page grid does — that's intentional, not drift. See shared.css's own nav rules and index.html's #section-nav rules for the nav tier; index.html/bento/style.css/cv for the content tier. ═══════════════════════════════════════════════════════════════════════════ */ /* ── RESET & BASE ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'JetBrains Mono', monospace; background-color: var(--bg-color); color: var(--text-body); position: relative; overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--grid-dot) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dot) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } /* ── REDUCED MOTION ─────────────────────────────────────────────────────── */ /* Neutralizes CSS animations/transitions site-wide for users who've asked the OS to reduce motion. JS-driven continuous motion (parallax orbs, the fan spin loop, crumb particles, the giant logo scroll parallax) checks window.prefersReducedMotion (set in components.js) and opts out the same way. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── PAGE TRANSITIONS ───────────────────────────────────────────────────── */ /* Hand-rolled fade between pages (components.js toggles these classes) — not the native CSS View Transitions API, which caused real hangs on this site's cross-document navigations when tried. .pt-loading is added to before even exists, so the very first paint is already hidden; no flash of the page at full opacity before the fade-in takes over. Deliberately opacity-only. A clip-path iris-wipe was tried (see git history) and looked great, but broke click-through on position:fixed descendants (.site-nav) once the page was scrolled - the nav rendered in the correct spot but stopped receiving clicks, because clip-path's clip region is fixed to body's own (document-height-tall) coordinate space while fixed elements stay pinned to the viewport, so the two drift apart as soon as you scroll. transform/filter have the same category of problem (they create a new containing block for fixed descendants outright). Fixing this properly needs the fixed chrome (nav, orbs, hero logo, egg windows) moved outside whatever element gets the fancier effect - not done here to avoid shipping a broken nav in the meantime. */ /* Entrance (pt-loading removed) decelerates in - Material's "standard decelerate" curve - so arrival reads as a settle, not a snap. Exit (pt-leaving added) accelerates out on its own shorter transition so the click still feels instant, not sluggish; components.js's setTimeout before navigating must match this duration (160ms). */ body { opacity: 1; transition: opacity 0.26s cubic-bezier(0, 0, 0.2, 1); } html.pt-loading body { opacity: 0; transition: none; } html.pt-leaving body { opacity: 0; transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1); } .container { max-width: 1200px; margin: 0 auto; padding: 60px 20px; position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } /* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */ .syne { font-family: 'Syne', sans-serif; } .section-label { display: inline-block; font-size: 0.7rem; letter-spacing: 0.25em; color: var(--accent-bright); text-transform: uppercase; opacity: 0.75; margin-bottom: 10px; } /* ── PROFILE HEADER ─────────────────────────────────────────────────────── */ .profile-header { text-align: center; margin-bottom: 60px; } .profile-pic { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .header-label { display: block; font-size: 0.75rem; letter-spacing: 0.25em; color: var(--accent-bright); text-transform: uppercase; margin-bottom: 10px; opacity: 0.75; } .profile-header h1 { font-family: 'Syne', sans-serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 14px; } .profile-header h1 span { color: var(--accent-bright); } .bio { font-size: 0.9rem; color: var(--text-bio); max-width: 640px; margin: 0 auto; line-height: 1.7; opacity: 0.85; } .cta { font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 700; margin-top: 18px; color: var(--accent-bright); } /* ── CARD BASE ───────────────────────────────────────────────────────────── */ .card-base { position: relative; border-radius: var(--radius); border: 1px solid rgba(var(--accent-rgb),0.2); overflow: hidden; color: #fff; text-decoration: none; transition: transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 0.35s ease, border-color 0.35s ease, filter 0.35s ease; } @media (hover: hover) and (pointer: fine) { .card-base:hover { transform: translateY(-5px) scale(1.02); border-color: rgba(var(--accent-bright-rgb),0.4); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 28px rgba(var(--accent-bright-rgb),0.3); filter: brightness(1.07); } .card-base:hover .card-corner-icon { color: rgba(255,255,255,0.9); } .card-base:hover .card-slug { color: rgba(255,255,255,0.85); } .footer-logo:hover { opacity: 1; filter: drop-shadow(0 2px 16px rgba(var(--accent-bright-rgb),0.35)); } .footer-copy a:hover { color: var(--accent-bright); } .footer-links a:hover { color: var(--accent-bright); } .footer-back:hover { color: var(--accent-bright); } .card-base:hover .icon-wrap, .action-card:hover .icon-wrap { transform: scale(1.1); background: rgba(255,255,255,0.22); } .btn-pill:hover { filter: brightness(1.15); transform: scale(1.04); } } /* ── CORNER ICON ─────────────────────────────────────────────────────────── */ .card-corner-icon { position: absolute; top: 16px; right: 16px; z-index: 10; color: rgba(255,255,255,0.45); font-size: 1rem; pointer-events: none; transition: color 0.3s ease; } /* ── CARD SLUG ───────────────────────────────────────────────────────────── */ /* 0.65 clears 4.5:1 against both --card-bg and the plain --bg-color (measured 4.96:1 / 8.37:1) - was 0.22, under 2:1 against either. Doesn't fully solve contrast on bento's light-background brand cards (Amazon yellow, Notion white) since white text can't win there at any alpha - those would need a per-card slug color, not attempted here. */ .card-slug { position: absolute; bottom: 13px; right: 16px; font-size: 0.57rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.65); font-family: 'JetBrains Mono', monospace; z-index: 5; pointer-events: none; transition: color 0.3s ease; } /* ── ANIMATIONS ─────────────────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.5s ease both; } /* ── SITE FOOTER ─────────────────────────────────────────────────────────── */ .site-footer { margin-top: 64px; padding: 40px 0 32px; border-top: 1px solid rgba(var(--accent-rgb),0.18); text-align: center; } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } .footer-logo { width: 72px; height: 72px; object-fit: contain; opacity: 0.75; filter: drop-shadow(0 2px 8px rgba(var(--accent-bright-rgb),0.15)); transition: opacity 0.3s ease, filter 0.3s ease; } .footer-name { font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.65); letter-spacing: 0.02em; } /* Alpha values below are picked to clear WCAG AA's 4.5:1 contrast minimum for small text against --bg-color (#080f0f) - this is real copyright/contact text and link labels, not decorative. Was 0.22/0.55/0.5, all measured under 3:1 against the actual background. */ .footer-copy { font-size: 0.65rem; color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 520px; } .footer-copy a { color: rgba(var(--accent-bright-rgb),0.75); transition: color 0.2s ease; } .footer-links { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .footer-links a { font-size: 0.67rem; color: rgba(var(--accent-bright-rgb),0.75); transition: color 0.2s ease; display: flex; align-items: center; gap: 5px; } .footer-sep { font-size: 0.55rem; color: rgba(255,255,255,0.3); } .footer-back { font-size: 0.65rem; color: rgba(var(--accent-bright-rgb),0.5); display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease; } /* ── NAV BAR ─────────────────────────────────────────────────────────────── */ /* The blur/tint lives on ::before, extended past the nav's own height and faded out with a mask — so it trails off gradually into the page instead of cutting off at a hard edge. Cheap: same single blur as before, the mask is just an alpha gradient on top of it. */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 58px; } .site-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: -90px; background: rgba(11,20,20,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 15%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.08) 85%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 15%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.08) 85%, transparent 100%); pointer-events: none; z-index: -1; } .nav-logo { display: flex; align-items: center; gap: 10px; font-family: 'Syne', sans-serif; font-size: 0.9rem; font-weight: 800; color: #fff; letter-spacing: 0.02em; text-decoration: none; } .nav-logo img { width: 30px; height: 30px; object-fit: contain; } .nav-logo span { color: var(--accent-bright); } /* ── EASTER EGGS ─────────────────────────────────────────────────────────── */ /* Retro-OS-style windows for the fun-fact easter egg (footer logo / profile photo clicks) — deliberately kitschy/skeuomorphic, in contrast with the rest of the site, since that contrast is the joke. Beveled 3D border via mismatched border-color sides, classic titlebar + close button. */ .egg-window { position: fixed; width: 250px; background: #16262a; border: 2px solid; border-color: rgba(255,255,255,0.35) rgba(0,0,0,0.65) rgba(0,0,0,0.65) rgba(255,255,255,0.35); box-shadow: 2px 2px 0 rgba(0,0,0,0.6), 5px 5px 16px rgba(0,0,0,0.45); font-family: 'JetBrains Mono', monospace; z-index: 10000; user-select: none; } .egg-window-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); color: #06110f; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 5px 4px 8px; cursor: move; } .egg-window-close { flex-shrink: 0; width: 16px; height: 16px; background: #d8d4cc; border: 1px solid; border-color: #fff #3a3a3a #3a3a3a #fff; font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1; font-weight: 800; color: #111; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .egg-window-close:hover { background: #ff5f56; color: #fff; } .egg-window-body { padding: 12px 12px 14px; font-size: 0.68rem; line-height: 1.55; color: var(--text-body); } .egg-window-trap-btn { width: 100%; background: var(--accent-bright); color: #06110f; border: 1px solid; border-color: rgba(255,255,255,0.5) rgba(0,0,0,0.4) rgba(0,0,0,0.4) rgba(255,255,255,0.5); font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; padding: 8px 10px; cursor: pointer; } .egg-window-trap-btn:hover { filter: brightness(1.1); } /* ── TETRIS EASTER EGG ───────────────────────────────────────────────────── Reuses the .egg-window chrome above; this just widens it and adds the game-specific bits (canvas, stats row, mobile touch controls). */ .tetris-window { min-width: 200px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; } /* actual width/height set inline at spawn time, sized to the viewport */ .tetris-body { display: flex; flex-direction: column; align-items: center; gap: 8px; } .tetris-canvas { background: #0a0f0f; border: 1px solid rgba(255,255,255,0.15); display: block; cursor: pointer; } .tetris-stats { display: flex; justify-content: space-between; width: 100%; font-size: 0.56rem; color: var(--text-muted); text-align: center; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.04em; } .tetris-stats b { display: block; color: var(--accent-bright); font-size: 0.78rem; } .tetris-hint { font-size: 0.52rem; color: var(--text-muted); text-align: center; line-height: 1.5; } .tetris-gameover { color: #ff6b6b; font-weight: 800; font-size: 0.66rem; text-align: center; } .tetris-controls { display: none; gap: 6px; width: 100%; } .tetris-btn { flex: 1; background: rgba(255,255,255,0.1); color: var(--text-body); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; font-size: 0.9rem; padding: 6px 0; cursor: pointer; } .tetris-btn:active { background: rgba(255,255,255,0.22); } /* Touch devices have no keyboard for controls, so show the on-screen d-pad only there */ @media (pointer: coarse) { .tetris-controls { display: flex; } } /* ── SCROLL-PAST-THE-END HINT ───────────────────────────────────────────── Fixed progress bar + label, shown while the visitor keeps scrolling down after already hitting the bottom of the page (see initScrollPastEnd). */ .scroll-push-hint { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.06); z-index: 9999; pointer-events: none; } .scroll-push-hint-fill { height: 100%; width: 0%; background: var(--accent-bright); box-shadow: 0 0 8px rgba(var(--accent-bright-rgb),0.6); } .scroll-push-label { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; color: var(--accent-bright); text-transform: uppercase; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 9999; } .scroll-push-label.show { opacity: 0.85; } .konami-toast { position: fixed; top: 76px; right: 24px; max-width: min(320px, calc(100vw - 48px)); transform: translateY(-16px); background: rgba(11,20,20,0.95); border: 1px solid rgba(var(--accent-bright-rgb),0.5); color: var(--text-body); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 24px rgba(var(--accent-bright-rgb),0.25); opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; z-index: 9999; pointer-events: none; } .konami-toast.show { transform: translateY(0); opacity: 1; } body.konami-active::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(var(--accent-bright-rgb),0.14), transparent 70%); animation: konamiGlow 2.6s ease-out forwards; } @keyframes konamiGlow { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } } /* ── NAV DROPDOWN ────────────────────────────────────────────────────────── */ /* .nav-controls (the language toggle) is always pinned to the top with a fixed-height inner box, so its position can never move. .nav-crumb-menu is ALSO always pinned to the top (align-self: flex-start, constant in both open/closed — switching alignment modes between the two states was tried and rejected: align-self isn't animatable, so it jumped instantly the moment .open was toggled). Its own margin-top is a fixed offset computed from the row's real height (padding 6px top/bottom + ~11px line height + 2px border ≈ 25px) to fake centering in the 58px bar without ever recalculating — so growing taller on open only ever grows downward, from the same fixed starting point, with nothing to jump. */ .nav-right { display: flex; align-items: flex-start; gap: 14px; align-self: flex-start; min-height: 58px; } .nav-controls { display: flex; align-items: center; align-self: flex-start; height: 58px; } /* One box that holds both the "•• // page" row and, once opened, the sibling-pages list below it — a normal in-flow child, not a floating overlay, so the border grows around both parts. Label hides while open (current page is already highlighted in the list via .active). */ .nav-crumb-menu { display: flex; flex-direction: column; align-self: flex-start; margin-top: 16px; /* (58px bar - ~25px row) / 2, see comment above */ background: none; border: 1px solid rgba(var(--accent-bright-rgb),0.38); border-radius: 999px; /* pill while closed; .open below relaxes this for the taller list */ transition: background 0.2s ease, border-color 0.2s ease, border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* same duration+curve as .nav-links' max-height below, so they read as one motion */ } .nav-crumb-row { display: flex; align-items: center; gap: 7px; padding: 6px 12px; } .nav-crumb-trigger { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--accent-bright); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.05em; line-height: 1; transition: opacity 0.2s ease; } .nav-crumb-current { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; /* no explicit value here meant the browser's default line-height (taller than the font's actual glyph height) was setting the row's real height, since .nav-crumb-row centers this against .nav-crumb-trigger's own line-height:1 — the row was only ever as short as its TALLER child */ color: var(--accent-bright); } .nav-crumb-menu.open { background: rgba(11,20,20,0.97); border-color: rgba(var(--accent-bright-rgb),0.5); border-radius: 10px; /* clearly less round than the closed pill (not just 16px, too close to how a ~34px-tall 999px pill actually renders to read as a change) */ box-shadow: 0 16px 40px rgba(0,0,0,0.5); } .nav-crumb-menu.open .nav-crumb-current { display: none; } /* Height AND width both animate to their exact real size via the CSS grid "0fr → 1fr" trick, instead of guessing a fixed max-height/max-width to transition toward — a guessed max noticeably bigger than the real content (e.g. 320px for a ~166px-tall 5-item list) makes the box finish growing well before the declared duration ends, so the motion reads as an abrupt snap rather than a smooth animation. .nav-links-collapse is the actual animated grid; .nav-links (the