/* ========================================================================== PARIDHI GUPTA — SITE STYLESHEET Theme: "The Researcher's Sketchbook" — tactile, raw, intellectual - cream paper background with a faint grid-paper texture - cards that look like sheets of paper with hand-drawn-ish borders - graphite grey text, ink-blue accents, red-pen warm touches - a handwritten font (Caveat) for the name + section titles, paired with a typewriter font (Courier Prime) for everything else — both loaded from Google Fonts in index.html's The HERO hosts the interactive NoC mesh (drawn by js/main.js): graphite routers, multi-lane buses, and warm-colored data flits on the same cream paper, like a topology diagram sketched in a notebook. Its colors are the --hero-* and --noc-* variables below. HOW TO RE-THEME THE WHOLE SITE: All colors, fonts, and spacing live in the ":root" variables just below. Change a value there once and it updates everywhere. For example, to make the accent a green pen instead of ink blue, change --accent to something like #3d6b4f and --accent-dim to rgba(61, 107, 79, 0.12). ========================================================================== */ :root { /* ---- Colors (main site) ------------------------------------------------ */ --bg-slate: #f7f2e7; /* page background (cream paper) */ --bg-slate-2: #ece4d4; /* slightly deeper cream, for depth */ --glass-bg: rgba(255, 253, 247, 0.88); /* card fill — near-opaque paper */ --glass-bg-hover:rgba(255, 253, 247, 0.98); /* card fill when hovered */ --glass-border: rgba(58, 56, 50, 0.45); /* pencil-line border */ --accent: #34558b; /* ink blue */ --accent-dim: rgba(52, 85, 139, 0.10); /* faint ink wash (chips etc.) */ --accent-warm: #c05b3c; /* red pen / terracotta — small warm touches */ --accent-warm-dim: rgba(192, 91, 60, 0.14); /* faint red-pen wash */ --text-main: #3a3a36; /* graphite body text */ --text-muted: #6e6a60; /* softer graphite secondary text */ --highlighter: rgba(255, 224, 102, 0.55); /* the yellow highlighter swipe */ /* ---- Colors (hero banner + NoC mesh) ----------------------------------- */ --hero-bg: #f3ecdd; /* warm stone behind the mesh */ --hero-accent: #34558b; /* hero kicker text */ --hero-text: #3a3a36; /* hero tagline text */ --hero-text-muted: #6e6a60; /* hero subtitle text */ --noc-router: #4c4a44; /* graphite router squares */ --noc-flit: #c05b3c; /* terracotta data flits */ --noc-flit-2: #6f8f6a; /* sage data flits (alternating) */ --noc-fault: #b3402e; /* muted red for the "faulty" router */ /* ---- Fonts ------------------------------------------------------------- */ /* A handwritten face for headings, a typewriter face for everything else. The fallbacks after each name kick in while Google Fonts loads (or if it's unreachable), so the site never renders unstyled. */ --font-heading: "Caveat", "Segoe Script", "Comic Sans MS", cursive; --font-body: "Courier Prime", "Courier New", Courier, monospace; --font-mono: "Courier Prime", "Courier New", Courier, monospace; /* ---- Effects & shape -------------------------------------------------- */ --blur: 14px; /* frosted-glass blur strength */ --radius: 14px; /* corner roundness (images, embeds) */ --shadow: 0 8px 22px rgba(80, 75, 65, 0.16);/* soft pencil-smudge shadow */ /* Three subtle "hand-drawn" corner shapes. Each corner gets two slightly different radii, which makes the outline bow gently instead of curving perfectly. Cards cycle between these (see the .card rules) so the page looks sketched, not stamped. */ --sketch-a: 18px 10px 16px 11px / 11px 16px 10px 18px; --sketch-b: 10px 17px 11px 15px / 16px 11px 18px 10px; --sketch-c: 15px 11px 18px 10px / 10px 18px 11px 15px; /* ---- Layout ----------------------------------------------------------- */ --content-width: 1080px; /* max width of page content */ --section-gap: 6rem; /* vertical space between sections */ --nav-height: 62px; /* navbar height; the hero uses this to fill exactly one full screen */ } /* ========================================================================== RESET & BASE — sensible defaults for every element ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* nav links glide instead of jumping */ scroll-padding-top: 5rem; /* stops sections hiding under the sticky nav */ } body { font-family: var(--font-body); background-color: var(--bg-slate); color: var(--text-main); line-height: 1.7; overflow-x: hidden; /* safety net: nothing should ever cause sideways scroll */ /* Grid-paper texture: two sets of hairlines (one horizontal, one vertical) in a very faint ink blue, tiled every 26px — like the pages of an engineering notebook. Purely decorative. */ background-image: linear-gradient(rgba(52, 85, 139, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 85, 139, 0.055) 1px, transparent 1px); background-size: 26px 26px; } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Accent-colored text highlight used throughout, e.g. */ .accent { color: var(--accent); } /* ========================================================================== HIGHLIGHTER PEN — hover over an element with class="hl" and a yellow highlighter stroke swipes across it left-to-right, like marking up a paper. Works on links and inline terms alike. The trick: the highlight is a background gradient whose width animates from 0% to 100% on hover. ========================================================================== */ .hl { background-image: linear-gradient( 100deg, transparent 0.8%, var(--highlighter) 2.5%, var(--highlighter) 97.5%, transparent 99.2% ); background-repeat: no-repeat; background-size: 0% 88%; /* starts invisible... */ background-position: 0 55%; /* sits slightly low, like a real swipe */ transition: background-size 0.4s ease; border-radius: 2px; } .hl:hover { background-size: 100% 88%; } /* ...swipes fully across */ /* Links inside paragraphs get the same treatment automatically */ .card p a, .pub-links a { background-image: linear-gradient( 100deg, transparent 0.8%, var(--highlighter) 2.5%, var(--highlighter) 97.5%, transparent 99.2% ); background-repeat: no-repeat; background-size: 0% 88%; background-position: 0 55%; transition: background-size 0.4s ease; } .card p a:hover, .pub-links a:hover { background-size: 100% 88%; text-decoration: none; } /* ========================================================================== ICONS — the small line icons defined in the sprite at the top of index.html. They inherit the size and color of the text around them, so an icon inside an accent-colored chip is automatically accent-colored. ========================================================================== */ .icon { width: 1em; /* matches the surrounding text size */ height: 1em; stroke: currentColor; /* matches the surrounding text color */ fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; /* nudges the icon onto the text baseline */ flex-shrink: 0; /* never gets squished in flex rows */ } /* ========================================================================== THE PAPER CARD — the signature look of the whole site. Any element with class="card" becomes a sheet of paper with a slightly wobbly, hand-drawn-looking border. The wobble comes from the asymmetric border-radius trick below: giving each corner two different radii makes the outline bow gently instead of curving perfectly, like it was drawn with a pen and a steady-ish hand. ========================================================================== */ .card { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--blur)); /* Safari needs the prefix */ backdrop-filter: blur(var(--blur)); border: 1.5px solid var(--glass-border); border-radius: var(--sketch-a); /* gentle hand-drawn wobble (see :root) */ box-shadow: var(--shadow); padding: 1.75rem; transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } /* Every card starts with wobble "a"; these overrides hand out wobbles "b" and "c" around the page so no two neighboring cards share the exact same outline — regular enough to look tidy, varied enough to look drawn. */ .beyond-card, .project-card:nth-child(2), .xp-column:nth-child(2), .timeline-item:nth-child(even) .timeline-card, .cv-card { border-radius: var(--sketch-b); } .status-card, .project-card:nth-child(3), .pub, .timeline-item:nth-child(3) .timeline-card { border-radius: var(--sketch-c); } .card-heading { font-family: var(--font-heading); /* handwritten subheaders */ color: var(--accent); font-size: 1.55rem; line-height: 1.2; margin-bottom: 0.75rem; } /* ========================================================================== NAVIGATION BAR — sticky frosted-glass strip along the top ========================================================================== */ .navbar { position: sticky; top: 0; z-index: 100; /* stays above everything */ background: rgba(247, 242, 231, 0.85); /* translucent cream */ -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); border-bottom: 1px solid var(--glass-border); } .navbar-inner { max-width: var(--content-width); margin: 0 auto; height: var(--nav-height); /* fixed height so the hero math stays exact */ padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; } .brand { font-family: var(--font-heading); font-size: 1.75rem; /* handwriting reads small, so slightly bigger */ font-weight: 700; color: var(--text-main); letter-spacing: 0.02em; } .brand:hover { text-decoration: none; } .brand-dot { color: var(--accent-warm); } .nav-links { display: flex; gap: 1.4rem; list-style: none; } .nav-links a { color: var(--text-muted); font-size: 0.95rem; transition: color 0.2s ease; } .nav-links a:hover { color: var(--accent); text-decoration: none; } /* Hamburger button — hidden on desktop, shown on mobile (media query below) */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { width: 24px; height: 2px; background: var(--text-main); border-radius: 2px; } /* ========================================================================== HERO — full-screen banner with the interactive NoC mesh canvas behind it. The mesh itself is drawn by js/main.js; this CSS just layers things: canvas (bottom) -> soft paper vignette (middle) -> headline text (top). The vignette gently fades the mesh out behind the headline so the name stays readable without hiding the routers near the edges. ========================================================================== */ .hero { position: relative; /* Fill exactly one screen: full viewport height minus the navbar sitting above. The second line uses "svh" (small viewport height), which mobile browsers keep stable while their address bar shows/hides; browsers that don't know svh just use the vh line above it. */ min-height: calc(100vh - var(--nav-height)); min-height: calc(100svh - var(--nav-height)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; overflow: hidden; /* keeps the canvas inside the banner */ background: var(--hero-bg); } /* The rain canvas fills the whole hero, behind everything else */ .hero-canvas { position: absolute; inset: 0; /* shorthand for top/right/bottom/left: 0 */ width: 100%; height: 100%; } /* A soft paper-colored vignette centered behind the headline, so the text floats clearly above the mesh. Uses literal rgb numbers rather than var(--hero-bg) — CSS can't add transparency to a variable that already holds a solid color — so if you change --hero-bg above, update the three numbers here to match (#f3ecdd = 243, 236, 221). */ .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 62% 58% at 50% 46%, rgba(243, 236, 221, 0.94), rgba(243, 236, 221, 0) 72% ); pointer-events: none; /* never blocks the router-hover interaction */ } /* Lift the text (and the scroll arrow) above the canvas + wash */ .hero-content, .scroll-hint { position: relative; z-index: 1; } .hero-kicker { color: var(--hero-accent); font-size: 1.1rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem; } .hero-name { font-family: var(--font-heading); /* the handwriting — see :root fonts */ font-size: clamp(3.4rem, 10vw, 6.5rem); /* handwriting reads small, so go big */ font-weight: 700; line-height: 1.05; margin-bottom: 0.75rem; } .hero-role { font-size: clamp(1.1rem, 3vw, 1.6rem); font-weight: 500; color: var(--hero-accent); /* matches the "Hello, I'm" kicker above */ margin-bottom: 1.25rem; } .hero-tagline { max-width: 640px; margin: 0 auto; color: var(--hero-text); font-size: 1.05rem; } /* The little parenthetical inviting visitors to break a router — pinned just above the bouncing scroll arrow at the bottom of the hero */ .hero-hint { position: absolute; bottom: 4.4rem; /* the arrow sits at 2rem; hint hovers above it */ left: 50%; transform: translateX(-50%); z-index: 1; /* above the mesh canvas + vignette */ width: max-content; max-width: 92%; text-align: center; font-size: 0.8rem; /* same typewriter font as the tagline */ color: var(--text-muted); } /* ---- Buttons ------------------------------------------------------------- Not used anywhere right now, but kept ready: put class="btn btn-primary" on any link to turn it into a pill-shaped call-to-action button. */ .btn { display: inline-block; padding: 0.8rem 1.8rem; border-radius: 999px; /* pill shape */ font-weight: 600; font-size: 0.95rem; letter-spacing: 0.03em; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .btn:hover { text-decoration: none; transform: translateY(-2px); } /* Solid accent-colored button */ .btn-primary { background: var(--accent); color: var(--bg-slate); } .btn-primary:hover { box-shadow: 0 6px 24px rgba(52, 85, 139, 0.4); } /* Bouncing down-arrow at the bottom of the hero */ .scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-size: 1.5rem; color: var(--hero-text-muted); animation: bob 2s ease-in-out infinite; } .scroll-hint:hover { color: var(--hero-accent); text-decoration: none; } @keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ========================================================================== SECTIONS — shared layout for every content block ========================================================================== */ .section { max-width: var(--content-width); margin: 0 auto; padding: var(--section-gap) 1.5rem 0; } .section-title { font-family: var(--font-heading); /* the handwriting — see :root fonts */ font-size: clamp(2.1rem, 5vw, 2.9rem); /* handwriting reads small, so go big */ font-weight: 700; margin-bottom: 2.5rem; display: flex; align-items: center; gap: 0.75rem; } /* The live stochastic bitstream that fills the space to the right of each section title (where a plain rule-line would normally go). The bits are generated by js/main.js from the data-proficiency / data-bits attributes on the inside each h2. The mask fades the stream out toward the right edge so it never ends abruptly. */ .section-title .bitstream { flex: 1; /* fill whatever width the title text leaves over */ min-width: 0; overflow: hidden; /* clip extra bits on narrow screens */ font-size: 0.75rem; font-weight: 400; /* h2 boldness would distort the mono digits */ opacity: 0.55; margin-left: 0.5rem; -webkit-mask-image: linear-gradient(to right, black 55%, transparent); mask-image: linear-gradient(to right, black 55%, transparent); } /* ========================================================================== 2. ABOUT — text column + portrait column ========================================================================== */ .about-grid { display: grid; grid-template-columns: 1.8fr 1fr; /* text is ~2x wider than the photo */ grid-template-areas: "text photo"; gap: 1.5rem; align-items: start; } .about-text { grid-area: text; display: flex; flex-direction: column; gap: 1.5rem; } .about-text p + p { margin-top: 1rem; } .about-photo { grid-area: photo; padding: 0.75rem; text-align: center; max-width: 260px; /* keeps the portrait modest-sized */ width: 100%; justify-self: center; /* centered within its grid column */ } .about-photo img { border-radius: calc(var(--radius) - 6px); /* rounding matches the card */ width: 100%; } .about-photo figcaption { padding: 0.75rem 0 0.25rem; font-size: 0.85rem; color: var(--text-muted); } /* ---- "Right now" status widget ------------------------------------------- The small human-side line at the bottom of About. The label is handwritten; the gem5 cycle number ticks upward via js/main.js. */ .status-card { padding: 1rem 1.4rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; /* label above the line on narrow screens */ } .status-label { font-family: var(--font-heading); font-size: 1.3rem; color: var(--accent-warm); white-space: nowrap; } .status-line { font-size: 0.85rem; color: var(--text-muted); } .status-line .hl { color: var(--text-main); } #cycle-count { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; /* digits keep a fixed width while ticking */ } /* ---- Stochastic bitstreams (used in the section titles) ----------------- The 0s and 1s are generated by js/main.js from each element's data-proficiency attribute (see the BITSTREAMS section there). */ .bitstream { font-family: var(--font-mono); letter-spacing: 0.08em; color: var(--accent); white-space: nowrap; /* one unbroken stream per line */ } /* the 0s render fainter than the 1s (js wraps them in ) */ .bitstream .b0 { opacity: 0.35; } /* ========================================================================== 6. NEWS TIMELINE — vertical accent-colored line with a glowing node per item The line and the dots are positioned with the calc() math below so they always land exactly centered on each other, no matter what the gutter width, line thickness, or dot size are set to. If you want a thicker line or bigger dots, only change the three variables here — the positions recalculate themselves. ========================================================================== */ .timeline { --timeline-gutter: 2rem; /* space reserved for the line + dots */ --timeline-line-width: 2px; --timeline-dot-size: 12px; list-style: none; position: relative; margin-left: 0.5rem; padding-left: var(--timeline-gutter); } /* The vertical line itself, centered within the gutter */ .timeline::before { content: ""; position: absolute; left: calc(var(--timeline-gutter) / 2 - var(--timeline-line-width) / 2); top: 6px; bottom: 6px; width: var(--timeline-line-width); background: linear-gradient(to bottom, var(--accent), rgba(52, 85, 139, 0.1)); } .timeline-item { position: relative; padding-bottom: 2rem; } .timeline-item:last-child { padding-bottom: 0; } /* The glowing node on the line. Each
  • is offset from the ul by exactly one gutter-width, so shifting back by half a gutter (and then half a dot, since "left" positions the dot's edge rather than its center) lands the dot's center precisely on the line above. */ .timeline-item::before { content: ""; position: absolute; left: calc(-1 * var(--timeline-gutter) / 2 - var(--timeline-dot-size) / 2); top: 6px; width: var(--timeline-dot-size); height: var(--timeline-dot-size); border-radius: 50%; background: var(--accent-warm); box-shadow: 0 0 10px var(--accent-warm-dim); /* soft warm glow */ } .timeline-date { display: inline-flex; /* keeps the calendar icon + date on one line */ align-items: center; gap: 0.4rem; color: var(--accent); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; } .timeline-card { padding: 1.1rem 1.4rem; } /* ========================================================================== 3. RESEARCH PROJECT CARDS — a stack of "printed papers". The cards sit in one column, and each one is position: sticky with a slightly lower top offset than the previous, so as you scroll they pile on top of each other like a stack of papers on a desk. Each paper is near-opaque (papers aren't transparent) and very slightly rotated in alternating directions, like a stack squared up by hand. ========================================================================== */ .project-grid { display: block; /* one column, so the papers can stack */ } .project-card { position: sticky; padding: 0; /* image needs to touch the card edges */ overflow: hidden; /* clips the image to the rounded corners */ display: grid; grid-template-columns: 300px 1fr; /* image left, text right, like a report */ margin-bottom: 2.5rem; background: rgba(255, 253, 247, 0.97); /* solid enough to cover the card below */ } .project-card:last-child { margin-bottom: 0; } /* Each successive paper sticks a little lower, so the pile stays visible. If you add a 6th card, copy the pattern and add another 24px. */ .project-card:nth-child(1) { top: calc(var(--nav-height) + 18px); } .project-card:nth-child(2) { top: calc(var(--nav-height) + 42px); } .project-card:nth-child(3) { top: calc(var(--nav-height) + 66px); } .project-card:nth-child(4) { top: calc(var(--nav-height) + 90px); } .project-card:nth-child(5) { top: calc(var(--nav-height) + 114px); } /* The slight alternating tilt (applied once the reveal animation lands; these rules deliberately outrank .reveal.visible's plain transform) */ .project-card:nth-child(odd).visible { transform: translateY(0) rotate(-0.4deg); } .project-card:nth-child(even).visible { transform: translateY(0) rotate(0.35deg); } /* Brighten + ink-blue edge on hover */ .project-card:hover { background: rgba(255, 253, 247, 1); border-color: rgba(52, 85, 139, 0.55); } .project-image { height: 100%; min-height: 210px; overflow: hidden; } .project-image img { width: 100%; height: 100%; object-fit: cover; /* fill the box, crop the overflow */ transition: transform 0.4s ease; } .project-card:hover .project-image img { transform: scale(1.05); } .project-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; } .project-tag { color: var(--accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .project-body h3 { font-family: var(--font-heading); /* the serif — see :root fonts */ font-size: 1.3rem; } /* Little rounded "chips" listing tools/keywords at the bottom of each card */ .chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; /* pushes chips to the card's bottom edge */ padding-top: 0.5rem; } .chip-list li { display: inline-flex; /* keeps the tag icon + keyword on one line */ align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(52, 85, 139, 0.3); border-radius: 999px; padding: 0.2rem 0.75rem; } /* ========================================================================== 5. EXPERIENCE — two glass columns (Industry / Teaching) ========================================================================== */ .experience-grid { display: grid; grid-template-columns: 1fr 1fr; /* two equal-width columns... */ gap: 1.5rem; /* ...and no align-items here, so both cards stretch to the height of the taller one — the Industry and Teaching boxes always match. */ } .xp-list { list-style: none; } /* Divider line between entries within a column */ .xp-item + .xp-item { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-border); } .xp-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .xp-role { font-weight: 700; } .xp-when { color: var(--accent); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .xp-org { color: var(--text-muted); font-size: 0.9rem; font-style: italic; margin-bottom: 0.35rem; } .xp-item p:last-child { font-size: 0.95rem; } /* ========================================================================== 4. PUBLICATIONS ========================================================================== */ .pub-list { list-style: none; } .pub + .pub { margin-top: 1rem; } .pub-citation { font-size: 1rem; } .pub-links { margin-top: 0.6rem; font-size: 0.9rem; } /* ========================================================================== 7. CURRICULUM VITAE — embedded PDF viewer in a glass frame ========================================================================== */ .cv-card { padding: 0.75rem; } .cv-frame { display: block; width: 100%; /* Tall enough to read comfortably, but never taller than the screen. Raise the 1000px if you want more of the CV visible at once. */ height: min(1000px, 80vh); border: 0; border-radius: calc(var(--radius) - 6px); /* rounding matches the card */ background: #fff; /* PDFs are white — avoids a dark flash while loading */ } .cv-fallback { text-align: center; padding: 0.75rem 0.5rem 0.25rem; font-size: 0.9rem; color: var(--text-muted); } /* ========================================================================== FOOTER / CONTACT ========================================================================== */ .footer { margin-top: var(--section-gap); padding: 4rem 1.5rem 2.5rem; text-align: center; border-top: 1px solid var(--glass-border); background: linear-gradient(to bottom, transparent, rgba(52, 85, 139, 0.05)); } .footer-title { font-family: var(--font-heading); /* the serif — see :root fonts */ font-size: 1.8rem; margin-bottom: 0.75rem; } .footer-blurb { color: var(--text-muted); max-width: 480px; margin: 0 auto 2rem; } .footer-links { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; } /* Each contact link is a round icon-only button. The name lives in the link's aria-label (for screen readers) and title (the hover tooltip). */ .footer-links a { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; font-size: 1.25rem; /* the icon is 1em, so this sets its size */ border: 1px solid var(--glass-border); border-radius: 50%; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); color: var(--text-main); transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .footer-links a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .footer-fineprint { color: var(--text-muted); font-size: 0.82rem; } /* ========================================================================== SCROLL-IN ANIMATION Elements with class="reveal" start invisible and slide up when they enter the viewport (js/main.js adds the "visible" class). If JavaScript is disabled, a