/* =========================================================================== FernandesLAB — site styles (modern redesign) --------------------------------------------------------------------------- One stylesheet, no build step. To re-skin the whole site, edit the variables in the :root block below. =========================================================================== */ :root { /* Brand palette — dark theme ------------------------------------------ */ --brand: #3ec9a6; /* bright teal — primary brand accent on dark */ --brand-dark: #0a3d32; /* darker teal — gradients, deep backgrounds */ --brand-deep: #06221c; /* near-black teal — hero/footer base */ --accent: #3ec9a6; /* bright teal — buttons, underlines */ --accent-2: #57c785; /* fresh green — "Join us" / success */ --gold: #e6bb55; /* warm gold — highlights, hero glow */ /* Ink & surfaces — dark ----------------------------------------------- */ --ink: #eaf2ef; /* primary text (near-white) */ --muted: #a7bab4; /* secondary text */ --faint: #7d928c; /* tertiary / captions */ --news: #ff7a6b; /* news headline (warm coral, readable on dark) */ --link: #4fd3b0; /* in-text links */ --line: #213430; /* hairlines / card borders */ --bg: #08110f; /* page background — deep green-black */ --bg-soft: #0d1a16; /* soft section background */ --bg-mint: #122420; /* media / image placeholder background */ --card: #0f1d19; /* card / panel surface */ /* Theme-dependent chrome (overridden in light mode below) ------------- */ --header-bg: rgba(8,17,15,.72); --header-bg-scrolled: rgba(8,17,15,.9); --nav-mobile-bg: rgba(10,20,17,.98); /* Layout & effects ---------------------------------------------------- */ --maxw: 1140px; --radius: 16px; --radius-sm: 10px; --radius-lg: 26px; --shadow: 0 10px 30px -12px rgba(7,42,34,.18); --shadow-lg: 0 24px 60px -20px rgba(7,42,34,.30); --ring: 0 0 0 4px rgba(46,168,143,.18); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --display: "Sora", var(--font); } /* ---------------------------------------------------------------- Light theme Applied when is set (see the theme toggle). The hero, page banners, stats, callouts and footer keep their dark gradient backgrounds with light text in BOTH themes by design — only the page surfaces, cards, text and header chrome flip. */ :root[data-theme="light"] { --brand: #0e5c4a; --accent: #1f8f76; --accent-2: #57c785; --gold: #b9821f; --ink: #15211f; --muted: #566561; --faint: #80908c; --news: #c0392b; --link: #126e57; --line: #e6eceb; --bg: #ffffff; --bg-soft: #f3f8f6; --bg-mint: #e7f3ee; --card: #ffffff; --header-bg: rgba(255,255,255,.78); --header-bg-scrolled: rgba(255,255,255,.92); --nav-mobile-bg: rgba(255,255,255,.98); --shadow: 0 10px 30px -12px rgba(7,42,34,.16); --shadow-lg: 0 24px 60px -20px rgba(7,42,34,.22); } /* --------------------------------------------------------------- Base */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s ease, color .3s ease; } img { max-width: 100%; display: block; } a { color: var(--link); text-underline-offset: 3px; } h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; letter-spacing: -.01em; } ::selection { background: rgba(46,168,143,.22); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } /* ------------------------------------------------------------- Header */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s, background .25s; } .site-header.scrolled { background: var(--header-bg-scrolled); border-bottom-color: var(--line); box-shadow: 0 8px 28px -18px rgba(0,0,0,.7); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; letter-spacing: -.01em; color: var(--brand); text-decoration: none; font-size: 1.18rem; } .brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(140deg, var(--accent-2), var(--accent) 50%, var(--brand-dark)); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow); } .brand .logo img { width: 21px; height: 21px; display: block; } .nav { display: flex; align-items: center; gap: 2px; } .nav a { color: var(--ink); text-decoration: none; font-size: .95rem; padding: 9px 14px; border-radius: 9px; font-weight: 500; transition: background .18s, color .18s; } .nav a:hover { background: var(--bg-soft); color: var(--brand); } .nav a.active { color: var(--brand); font-weight: 600; } .nav a.active::after { content: ""; display: block; height: 2px; border-radius: 2px; background: var(--accent); margin: 4px 6px -2px; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 10px; } .nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .25s; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Theme toggle button + header layout (brand left, nav + controls right) */ .site-header .brand { margin-right: auto; } .nav { order: 1; } .theme-toggle { order: 2; flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); cursor: pointer; transition: background .18s, color .18s, border-color .18s; } .nav-toggle { order: 3; } .theme-toggle:hover { background: var(--bg-soft); border-color: var(--accent); color: var(--brand); } .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .ic-moon { display: none; } :root[data-theme="light"] .theme-toggle .ic-sun { display: none; } :root[data-theme="light"] .theme-toggle .ic-moon { display: block; } /* Nav dropdowns — subsection shortcuts shown on hover */ .nav-item { position: relative; display: flex; align-items: center; } .submenu { position: absolute; top: 100%; left: 0; margin-top: 8px; min-width: 212px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .submenu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .nav-item:hover > .submenu, .nav-item:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); } .submenu a { padding: 9px 12px; border-radius: 8px; font-size: .9rem; font-weight: 500; color: var(--muted); white-space: nowrap; } .submenu a:hover { background: var(--bg-soft); color: var(--brand); } /* keep anchored sections clear of the sticky header */ [id] { scroll-margin-top: 90px; } /* --------------------------------------------------------------- Hero */ .hero { position: relative; isolation: isolate; min-height: 86vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; text-align: center; color: #fff; padding: 90px 20px; background: url('../img/ai-net.svg') center / cover no-repeat, radial-gradient(1200px 600px at 75% -10%, rgba(230,187,85,.30), transparent 60%), radial-gradient(900px 700px at 8% 110%, rgba(87,199,133,.22), transparent 55%), var(--hero, linear-gradient(160deg, var(--brand-deep), var(--brand-dark) 60%, #04130e)); background-position: center; overflow: hidden; } /* soft animated blobs for life without any image asset */ .hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .5; } .hero::before { width: 460px; height: 460px; top: -120px; right: -80px; background: radial-gradient(circle, rgba(214,169,63,.65), transparent 70%); animation: float1 16s ease-in-out infinite; } .hero::after { width: 520px; height: 520px; bottom: -160px; left: -100px; background: radial-gradient(circle, rgba(46,168,143,.6), transparent 70%); animation: float2 20s ease-in-out infinite; } @keyframes float1 { 50% { transform: translate(-30px, 40px) scale(1.1); } } @keyframes float2 { 50% { transform: translate(40px, -30px) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } } .hero-inner { width: 100%; max-width: 760px; } .hero h1, .banner h1 { overflow-wrap: break-word; } .hero .kicker { display: inline-block; margin-bottom: 22px; padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #eafaf4; font-size: .8rem; font-weight: 600; letter-spacing: .04em; backdrop-filter: blur(4px); } .hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); margin: 0 0 .35em; font-weight: 700; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(0,0,0,.25); } .hero h1 .grad { background: linear-gradient(100deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { font-size: clamp(1.05rem, 2.2vw, 1.28rem); max-width: 620px; margin: 0 auto 2em; opacity: .95; } .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px; } .scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: rgba(255,255,255,.8); animation: scrolldot 1.8s ease-in-out infinite; } @keyframes scrolldot { 0%,100% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; transform: translateY(8px); } } /* -------------------------------------------------------------- Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: .98rem; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform .14s ease, box-shadow .2s, background .2s, color .2s; } .btn:hover { transform: translateY(-2px); } .btn-solid { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(46,168,143,.8); } .btn-solid:hover { background: #28967f; box-shadow: 0 16px 30px -12px rgba(46,168,143,.9); } .btn-green { background: var(--accent-2); color: #06301f; box-shadow: 0 10px 24px -12px rgba(87,199,133,.9); } .btn-green:hover { background: #49b977; } .btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(4px); } .btn-light:hover { background: rgba(255,255,255,.26); } .btn-ghost { background: transparent; color: var(--brand); border-color: var(--line); } .btn-ghost:hover { border-color: var(--accent); background: var(--bg-soft); } /* --------------------------------------------------------- Page banner */ .banner { position: relative; isolation: isolate; color: #fff; text-align: center; padding: 96px 20px 84px; background: url('../img/ai-net.svg') center / cover no-repeat, radial-gradient(900px 400px at 80% -20%, rgba(230,187,85,.30), transparent 60%), var(--hero, linear-gradient(150deg, var(--brand-deep), var(--brand-dark) 62%, #04130e)); background-position: center; overflow: hidden; } .banner::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; border-radius: 50%; top: -160px; right: -100px; filter: blur(70px); opacity: .45; background: radial-gradient(circle, rgba(87,199,133,.7), transparent 70%); } .banner .kicker { display: inline-block; margin-bottom: 14px; color: #cdeee2; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .banner h1 { margin: 0; font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.01em; font-weight: 700; } .banner p { max-width: 620px; margin: 14px auto 0; opacity: .92; } /* ------------------------------------------------------------- Sections */ .section { padding: 84px 0; } .section.alt { background: var(--bg-soft); } .section.tight { padding: 56px 0; } .section-head { max-width: 720px; margin: 0 0 44px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; } .section-title { font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--ink); margin: 10px 0 0; font-weight: 700; letter-spacing: -.015em; } .section-title.bar { padding-bottom: 14px; border-bottom: 3px solid var(--accent); display: inline-block; } .lead { font-size: 1.12rem; color: var(--muted); margin: 16px 0 0; } /* --------------------------------------------------------- Feature cards */ .features { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); } .feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; transition: transform .2s, box-shadow .2s, border-color .2s; } .feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .feature .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; color: #fff; background: linear-gradient(140deg, var(--accent-2), var(--accent) 60%, var(--brand)); box-shadow: var(--shadow); } .feature .ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; } .feature h3 { margin: 0 0 8px; font-size: 1.2rem; } .feature p { margin: 0; color: var(--muted); font-size: .98rem; } /* ---------------------------------------------------------------- Stats */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: linear-gradient(150deg, var(--brand), var(--brand-dark)); border-radius: var(--radius-lg); padding: 44px 28px; color: #fff; box-shadow: var(--shadow-lg); } .stat { text-align: center; } .stat .num { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: #fff; } .stat .num .gold { color: var(--gold); } .stat .lbl { font-size: .9rem; opacity: .85; margin-top: 4px; } /* -------------------------------------------------------- Split / intro */ .split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; } .split .media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: var(--bg-mint); } .split .media img { width: 100%; height: 100%; object-fit: cover; } /* ----------------------------------------------------------- Team cards */ .person { display: grid; grid-template-columns: 260px 1fr; gap: 36px; padding: 34px; margin-bottom: 24px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow .2s, transform .2s; } .person:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .person .photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-mint); } .person h3 { margin: 0 0 4px; font-size: 1.55rem; color: var(--ink); } .person .role { font-weight: 600; margin: 0; color: var(--brand); font-family: var(--display); } .person .affil { color: var(--muted); margin: 6px 0 12px; font-size: .95rem; } .person .meta { font-size: .92rem; margin: 2px 0; } .person h4 { margin: 16px 0 6px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); } .person ul { margin: 4px 0; padding-left: 18px; columns: 2; column-gap: 28px; } .person ul li { margin: 1px 0; } .edu { font-size: .9rem; color: var(--muted); } .edu div { margin: 3px 0; padding-left: 14px; position: relative; } .edu div::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* grid of smaller cards (master students, gallery, former) */ .grid { display: grid; gap: 26px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: transform .2s, box-shadow .2s, border-color .2s; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .card .photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-mint); } .card h3 { margin: 16px 2px 6px; font-size: 1.2rem; } .card .meta { margin: 2px; padding: 0 2px; } .card h4 { margin: 14px 2px 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); } .card ul { margin: 4px 0; padding-left: 20px; } .card .edu, .card .socials { padding: 0 2px; } /* social icon row */ .socials { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; } .socials a { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-soft); color: var(--brand); border: 1px solid var(--line); text-decoration: none; transition: background .2s, color .2s, transform .15s; } .socials a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); border-color: transparent; } .socials svg { width: 17px; height: 17px; fill: currentColor; } /* ------------------------------------------------------------ News list */ .news-item { display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; margin-bottom: 24px; transition: box-shadow .2s, transform .2s; } .news-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .news-item h3 { color: var(--news); margin: 0 0 8px; font-size: 1.4rem; line-height: 1.2; } .news-item .date { display: inline-block; color: var(--brand); background: var(--bg-mint); font-size: .78rem; font-weight: 600; letter-spacing: .03em; padding: 4px 12px; border-radius: 999px; margin: 0 0 14px; } .news-item p { margin: 0 0 10px; color: var(--muted); } .news-item img { border-radius: var(--radius-sm); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } /* publications */ .pub { padding: 20px 22px; margin-bottom: 14px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); transition: box-shadow .2s, transform .15s, border-left-color .2s; } .pub:hover { box-shadow: var(--shadow); transform: translateX(3px); border-left-color: var(--gold); } .pub a, .pub .title { color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 1.05rem; text-decoration: none; display: inline-block; margin-bottom: 6px; } .pub a:hover { color: var(--brand); } .pub .authors { color: var(--muted); font-size: .9rem; margin: 0; } /* timeline for former members */ .timeline { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; } .timeline li { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--line); } .timeline li:last-child { border-left-color: transparent; padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: var(--ring); } .timeline .when { font-weight: 600; font-size: .9rem; font-family: var(--display); } .timeline .what { font-size: .86rem; color: var(--muted); } /* callout / join */ .callout { background: linear-gradient(150deg, var(--brand), var(--brand-dark)); color: #fff; border-radius: var(--radius-lg); padding: 52px 32px; text-align: center; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; isolation: isolate; } .callout::after { content: ""; position: absolute; z-index: -1; width: 360px; height: 360px; border-radius: 50%; top: -140px; right: -80px; filter: blur(70px); opacity: .5; background: radial-gradient(circle, rgba(214,169,63,.7), transparent 70%); } .callout h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2rem); } .callout p { margin: 0 auto 22px; max-width: 560px; opacity: .92; } /* embed */ .embed-frame { width: 100%; min-height: 1100px; border: 0; border-radius: var(--radius); background: var(--bg-soft); box-shadow: var(--shadow); } .contact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .contact-card .row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); } .contact-card .row:first-of-type { border-top: 0; } .contact-card .ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent-2), var(--accent) 60%, var(--brand)); } .contact-card .ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; } /* ------------------------------------------------------------- Footer */ .site-footer { background: var(--brand-deep); color: #b8d4ca; padding: 56px 0 40px; font-size: .92rem; } .site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; margin-bottom: 32px; } .site-footer .brand { color: #fff; margin-bottom: 12px; } .site-footer h5 { color: #fff; font-family: var(--display); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px; } .site-footer a { color: #d7ece4; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer ul li { margin: 6px 0; } .site-footer .legal { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; font-size: .82rem; color: #8fb3a8; } .site-footer .disclaimer { font-style: italic; margin-top: 8px; opacity: .85; } /* --------------------------------------------------- Scroll reveal Only hide elements when JS is available (html.js). Without JS — or for crawlers — content stays fully visible. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* ----------------------------------------------------------- Responsive */ @media (max-width: 940px) { .features, .stats { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 820px) { body { font-size: 16px; } .section { padding: 60px 0; } .nav { position: absolute; top: 68px; right: 0; left: 0; flex-direction: column; align-items: stretch; background: var(--nav-mobile-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: 10px 16px 18px; gap: 2px; display: none; box-shadow: var(--shadow); } .nav.open { display: flex; } .nav a { padding: 13px 12px; } .nav a.active::after { display: none; } .nav-toggle { display: block; } /* submenus become indented, always-visible sub-links on mobile */ .nav-item { display: block; } .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; margin: 0 0 4px; padding: 0 0 0 14px; min-width: 0; } .submenu::before { display: none; } .submenu a { padding: 8px 12px; font-size: .9rem; } .person { grid-template-columns: 1fr; gap: 22px; padding: 24px; } .person .photo { max-width: 220px; } .person ul { columns: 1; } .news-item { grid-template-columns: 1fr; } .news-item img { order: -1; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .site-footer .cols { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 520px) { .features, .stats { grid-template-columns: 1fr; } } /* =========================================================================== Extended components — About, Teaching, Projects, Publications =========================================================================== */ /* readable prose block */ .prose { max-width: 760px; } .prose p { color: var(--muted); } .prose p strong { color: var(--ink); } /* small inline pill / chip */ .pill { display: inline-block; background: var(--bg-mint); color: var(--brand); border: 1px solid var(--line); font-size: .76rem; font-weight: 600; letter-spacing: .02em; padding: 4px 12px; border-radius: 999px; } /* Mission / Vision — two large panels */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); } .panel.glow { position: relative; overflow: hidden; isolation: isolate; } .panel.glow::after { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; border-radius: 50%; top: -120px; right: -80px; filter: blur(70px); opacity: .25; background: radial-gradient(circle, var(--accent), transparent 70%); } .panel .ic, .goal .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; color: #fff; background: linear-gradient(140deg, var(--accent-2), var(--accent) 60%, var(--brand-dark)); box-shadow: var(--shadow); } .panel .ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; } .panel h2 { margin: 0 0 10px; font-size: 1.5rem; color: var(--ink); } .panel p { margin: 0; color: var(--muted); } /* Goals — numbered cards */ .goals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .goal { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 26px 74px; transition: transform .2s, box-shadow .2s, border-color .2s; } .goal:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .goal .n { position: absolute; left: 24px; top: 24px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: #06301f; background: linear-gradient(140deg, var(--accent-2), var(--accent)); box-shadow: var(--shadow); } .goal h3 { margin: 0 0 6px; font-size: 1.08rem; } .goal p { margin: 0; color: var(--muted); font-size: .96rem; } /* Grants / funded projects */ .grant { display: grid; grid-template-columns: 1fr auto; gap: 12px 28px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 16px; transition: transform .2s, box-shadow .2s, border-color .2s; } .grant:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; } .grant.feature-grant { border-left: 4px solid var(--gold); } .grant h3 { margin: 0 0 6px; font-size: 1.12rem; line-height: 1.3; } .grant .src { margin: 0; color: var(--muted); font-size: .92rem; } .grant .who { margin: 6px 0 0; color: var(--faint); font-size: .85rem; } .grant .figs { text-align: right; white-space: nowrap; } .grant .amount { font-family: var(--display); font-weight: 700; color: var(--gold); font-size: 1.15rem; } .grant .yrs { display: block; color: var(--faint); font-size: .85rem; margin-top: 2px; } /* Software / tools cards (reuse feature visuals + a link) */ .tool .links { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; } .tool .links a { font-size: .85rem; font-weight: 600; color: var(--brand); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; transition: background .18s, color .18s, border-color .18s; } .tool .links a:hover { background: var(--bg-soft); border-color: var(--accent); } /* Teaching — course rows */ .course { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px 22px; align-items: baseline; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 22px; margin-bottom: 12px; transition: transform .15s, box-shadow .2s, border-color .2s; } .course:hover { transform: translateX(3px); box-shadow: var(--shadow); border-color: var(--accent); } .course .code { font-family: var(--display); font-weight: 700; color: var(--brand); } .course .title { color: var(--ink); } .course .when { color: var(--faint); font-size: .85rem; white-space: nowrap; } @media (max-width: 820px) { .duo, .goals { grid-template-columns: 1fr; } .grant { grid-template-columns: 1fr; } .grant .figs { text-align: left; } .course { grid-template-columns: 1fr; } .course .when { order: 3; } }