/* ============================================================================= aurora.css — restrained, Apple-flavoured layer on top of hugo-profile. Loaded last (see layouts/_default/baseof.html) so it can override the theme. Principles: one accent colour, hairline borders, generous whitespace, a single frosted surface (the nav), and motion only where it clarifies structure — content settling into place as you scroll. ============================================================================= */ /* --- design tokens ---------------------------------------------------------- */ body { --glass: rgba(251, 251, 253, 0.72); --surface: #ffffff; --hairline: rgba(0, 0, 0, 0.08); --hairline-strong: rgba(0, 0, 0, 0.14); --tint: rgba(0, 113, 227, 0.07); --wash: rgba(0, 113, 227, 0.07); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06); --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.05), 0 22px 50px rgba(0, 0, 0, 0.10); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; } body.dark { --glass: rgba(11, 11, 15, 0.72); --surface: #16161a; --hairline: rgba(255, 255, 255, 0.10); --hairline-strong: rgba(255, 255, 255, 0.18); --tint: rgba(41, 151, 255, 0.12); --wash: rgba(41, 151, 255, 0.10); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 22px 50px rgba(0, 0, 0, 0.6); } /* --- base ------------------------------------------------------------------- */ html { scroll-behavior: smooth; scroll-padding-top: 88px; /* The theme sets the page colour on , but its dark-mode overrides live on , so html would stay light. Let body own the canvas instead. */ background-color: transparent !important; } body { background-color: var(--background-color) !important; min-height: 100vh; letter-spacing: -0.011em; } body, .secondary-font, #secondary-font, .primary-font, #primary-font, .default-font, #default-font { font-family: var(--sans) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The theme paints every direct child of body with the page background, which would cover the soft wash behind the hero. Make the shells transparent. */ body.light > header, body.light > #content, body.light > footer, body.light > #scroll-progress { background-color: transparent !important; } #content section, #content section > .container { background-color: transparent !important; } /* one quiet wash of the accent colour behind the top of the page */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 80vh; z-index: -1; pointer-events: none; background: radial-gradient(70vw 55vh at 72% -10%, var(--wash), transparent 70%); opacity: calc(1 - var(--page-p, 0) * 0.7); } /* --- scroll progress -------------------------------------------------------- */ #scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1200; pointer-events: none; } #scroll-progress > span { display: block; height: 100%; width: var(--progress, 0%); background-color: var(--primary-color); opacity: 0.9; } /* --- navbar: the one frosted surface ---------------------------------------- */ header#profileHeader { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } header#profileHeader.showHeaderOnTop { box-shadow: none; } header#profileHeader.is-stuck { background-color: var(--glass) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--hairline); } header#profileHeader .navbar { padding-top: 0.5rem !important; padding-bottom: 0.5rem; } .navbar-brand { font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; color: var(--text-color) !important; } header .navbar .navbar-nav .nav-link { font-size: 0.875rem; letter-spacing: -0.008em; opacity: 0.7; transition: opacity 0.25s var(--ease-out), color 0.25s var(--ease-out); } header .navbar .navbar-nav .nav-link:hover, header .navbar .navbar-nav .nav-link.is-active { opacity: 1; } header .navbar .navbar-nav .nav-link.is-active { color: var(--primary-color) !important; } header #search { border: 1px solid var(--hairline) !important; background-color: transparent; font-size: 0.875rem; transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } header #search:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px var(--tint); } /* --- scroll reveal ---------------------------------------------------------- */ .reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } /* --- hero ------------------------------------------------------------------- */ #hero { display: flex; align-items: center; position: relative; /* the sticky header is in flow, so a full 100vh hero would push the scroll cue below the fold */ min-height: calc(100vh - 68px); } #hero .content { transform: translate3d(0, calc(var(--hero-p, 0) * -40px), 0); opacity: calc(1 - var(--hero-p, 0) * 0.9); } #hero .image { transform: translate3d(0, calc(var(--hero-p, 0) * 44px), 0); } #hero .subtitle { display: block; font-size: 0.8rem !important; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 1; margin-bottom: 0.9rem; color: var(--primary-color) !important; } #hero h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.03; margin-bottom: 0.1rem; color: var(--text-color) !important; } #hero h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; /* recessive, but kept at 3:1 against the page for large text */ opacity: 0.5; } #hero p { font-size: 1.0625rem; line-height: 1.65; opacity: 0.7; } /* Apple-style pill buttons */ body #hero a.btn { margin-top: 32px; border-radius: 999px; border: none !important; padding: 0.7rem 1.6rem; font-size: 0.9375rem; font-weight: 500; background-color: var(--primary-color) !important; color: #fff !important; transition: filter 0.25s var(--ease-out), transform 0.25s var(--ease-out); } body #hero a.btn:hover { transform: translateY(-1px); filter: brightness(1.08); opacity: 1; } body #hero a.btn.social-icon { margin-top: 32px; padding: 0.7rem; background-color: transparent !important; color: var(--text-secondary-color) !important; border: 1px solid var(--hairline) !important; } body #hero a.btn.social-icon:hover { transform: translateY(-1px); border-color: var(--hairline-strong) !important; color: var(--text-color) !important; opacity: 1; } #hero .image img { border: none !important; border-radius: 20px; box-shadow: var(--shadow-lift) !important; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); } #hero .image.animate img:hover { filter: none; transform: scale(1.015); box-shadow: var(--shadow-lift) !important; } #hero .hero-bottom-svg { display: none !important; } /* minimal chevron cue, injected by aurora.js */ .scroll-cue { position: absolute; left: 50%; bottom: 2.5rem; width: 40px; height: 40px; margin-left: -20px; padding: 0; border: 0; background: transparent; color: var(--text-secondary-color); opacity: calc((1 - var(--hero-p, 0) * 2.5) * 0.55); cursor: pointer; transition: color 0.25s var(--ease-out); animation: cue-bob 2.4s var(--ease-out) infinite; } .scroll-cue:hover { color: var(--primary-color); } .scroll-cue svg { width: 20px; height: 20px; } @keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* --- section headings ------------------------------------------------------- */ #content section > .container > h3, #content section > .container > .container > h3 { font-size: clamp(28px, 4vw, 44px) !important; font-weight: 700; letter-spacing: -0.032em; line-height: 1.1; color: var(--text-color) !important; opacity: 0.95; } /* --- about ------------------------------------------------------------------ */ #about .image img { border: none !important; border-radius: 20px; box-shadow: var(--shadow-lift) !important; transition: transform 0.6s var(--ease-out); } #about .image img:hover { transform: scale(1.015); box-shadow: var(--shadow-lift) !important; } #about .content { font-weight: 400; line-height: 1.75rem !important; } #about ul li::before { content: ""; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background-color: var(--primary-color); } /* --- cards: solid surfaces, hairline borders, soft lift --------------------- */ body #projects .card, body #achievements .card, body #education .card, body #experience .experience-container { background-color: var(--surface) !important; border: 1px solid var(--hairline) !important; border-radius: 20px !important; box-shadow: var(--shadow-soft) !important; transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out); } /* the theme paints card internals with the old surface colour — let the card own its background so the new surface reads cleanly */ body #education .card *, body #achievements .card *, body #achievements .card-text, body #projects .card .card-body, body #projects .card .card-footer, body #experience .experience-container { background-color: transparent !important; } body #projects .card:hover, body #achievements .card:hover, body #education .card:hover { transform: translateY(-6px); border-color: var(--hairline-strong) !important; box-shadow: var(--shadow-lift) !important; } body #projects .card .card-title, body #achievements .card .card-title, body #list-page .card-title, body footer .card-title { font-weight: 600; letter-spacing: -0.02em; } /* Titles are no longer cut mid-word by the templates; clamp them to two lines instead so long paper titles stay complete but the grid stays aligned. */ body #projects .card .card-title, body #list-page .card-title, body footer .card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body #projects .card .card-head { border-top-left-radius: 20px; border-top-right-radius: 20px; } body #projects .card .card-footer { border-top: 1px solid var(--hairline); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } body #projects .card:hover .card-img-top { transform: scale(1.06); transition: transform 0.7s var(--ease-out); } body #projects .badge { background-color: var(--tint) !important; color: var(--text-secondary-color) !important; border-radius: 999px; font-weight: 500; padding: 0.34em 0.75em; } body #projects .float-end .btn, body #education .card .card-body a.btn, body #experience .experience-container .tab-content .tab-pane .featuredLink a.btn { border-radius: 999px !important; border: 1px solid var(--hairline) !important; font-size: 0.875rem; transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out); } body #projects .float-end .btn:hover, body #education .card .card-body a.btn:hover, body #experience .experience-container .tab-content .tab-pane .featuredLink a.btn:hover { border-color: var(--primary-color) !important; color: var(--primary-color) !important; opacity: 1; } body #education .row .index { box-shadow: none; color: #fff !important; } /* --- experience tabs -------------------------------------------------------- */ body #experience .nav-item .nav-link { border-radius: 999px; padding: 0.4rem 0.95rem; font-size: 0.9rem; border-bottom: none; opacity: 0.6; transition: background-color 0.25s var(--ease-out), opacity 0.25s var(--ease-out); } body #experience .nav-item .nav-link:hover { border-bottom: none; background-color: var(--tint) !important; opacity: 0.9; } body #experience .nav-item .nav-link.active { border-bottom: none; background-color: var(--tint) !important; color: var(--primary-color) !important; opacity: 1; } /* --- contact ---------------------------------------------------------------- */ body #contact form .form-control { background-color: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: none; transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } body #contact form .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--tint); } body #contact .btn { border-radius: 999px !important; border: none !important; padding: 0.6rem 1.6rem; font-size: 0.9375rem; background-color: var(--primary-color) !important; color: #fff !important; transition: transform 0.25s var(--ease-out), filter 0.25s var(--ease-out); } body #contact .btn:hover { transform: translateY(-1px); filter: brightness(1.08); opacity: 1; } /* --- list pages: match the cards on the home page ---------------------------- */ body #list-page .card { background-color: var(--surface) !important; border: 1px solid var(--hairline) !important; border-radius: 20px; box-shadow: var(--shadow-soft); transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out); } body #list-page .card:hover { transform: translateY(-6px); border-color: var(--hairline-strong) !important; box-shadow: var(--shadow-lift); } /* Equal-height cards with the date/Read row pinned to the bottom, so a row of posts lines up instead of ending at three different heights. */ body #list-page .row > [class*="col-"] { display: flex; } body #list-page .row > [class*="col-"] > .card { width: 100%; display: flex; flex-direction: column; } body #list-page .card > .card-body { flex: 1 1 auto; } body #list-page .card-text *, body #list-page .card > .card-header, body #list-page .post-footer, body #list-page .post-footer a { background-color: transparent !important; } body #list-page .post-footer { border-top: 1px solid var(--hairline); } body #list-page .post-footer a { border-radius: 999px !important; border-color: var(--hairline) !important; transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out); } body #list-page .post-footer a:hover { border-color: var(--primary-color) !important; } body #list-page ul li a { border-color: var(--hairline); background-color: transparent !important; } body #list-page .page-item.active .page-link { color: #fff !important; } /* --- theme toggle ----------------------------------------------------------- */ button#theme-toggle { background-color: transparent !important; border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.25s var(--ease-out); } button#theme-toggle:hover { background-color: var(--tint) !important; } /* --- footer ----------------------------------------------------------------- */ footer { border-top: 1px solid var(--hairline); margin-top: 4rem; } /* --- accessibility ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; } #hero .content, #hero .image { transform: none; opacity: 1; } .scroll-cue { animation: none; } } @media (max-width: 768px) { #hero .content, #hero .image { transform: none; opacity: 1; } .scroll-cue { display: none; } }