/* Carolyn Li-Madeo — site stylesheet Font: IBM Plex Mono throughout, loaded via Google Fonts in each page's Each page sets its own bg/fg pair via a body class (theme-home / theme-design / theme-projects / theme-contact) */ :root { --home-bg: #ffffff; --home-fg: #3b6ea5; --home-text: #1a1a1a; --design-bg: #f2ede1; --design-fg: #d2500d; --design-text: #1a1a1a; --projects-bg: #f5c4ac; --projects-fg: #d2500d; --projects-text: #1a1a1a; --contact-bg: #2e4457; --contact-fg: #ffffff; --contact-text: #ffffff; --cta-blue: #3b6ea5; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: 'IBM Plex Mono', 'Courier New', monospace; color: var(--home-text); background: var(--home-bg); position: relative; } a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.15s ease; } a:hover, a:focus-visible { opacity: 0.65; } a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* ---------- Theme assignment ---------- */ body.theme-home { background: var(--home-bg); color: var(--home-text); } body.theme-home .sitetitle, body.theme-home .side-nav a, body.theme-home .bottom-link a, body.theme-home .content a { color: var(--home-fg); } body.theme-design { background: var(--design-bg); color: var(--design-text); } body.theme-design .sitetitle, body.theme-design .side-nav a, body.theme-design .bottom-link a, body.theme-design .content a { color: var(--design-fg); } body.theme-projects { background: var(--projects-bg); color: var(--projects-text); } body.theme-projects .sitetitle, body.theme-projects .side-nav a, body.theme-projects .bottom-link a, body.theme-projects .content a { color: var(--projects-fg); } body.theme-contact { background: var(--contact-bg); color: var(--contact-text); } body.theme-contact .sitetitle, body.theme-contact .side-nav a, body.theme-contact .bottom-link a { color: var(--contact-fg); } /* ---------- Header ---------- */ .topbar { text-align: center; padding: 48px 24px 0; } .sitetitle { font-size: 1.4rem; letter-spacing: 0.02em; text-decoration: none; } .sitetitle:hover { opacity: 0.65; } /* ---------- Side nav (desktop) ---------- */ .side-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 5; } .side-nav.left { left: 40px; } .side-nav.right { right: 40px; } .side-nav a { display: inline-block; white-space: nowrap; font-size: 1.1rem; letter-spacing: 0.08em; text-decoration: none; padding-bottom: 8px; transform-origin: center; } .side-nav.left a { transform: rotate(-90deg); } .side-nav.right a { transform: rotate(90deg); } .side-nav a.active { border-bottom: 1px solid currentColor; } .side-nav a:hover, .side-nav a:focus-visible { opacity: 0.65; } /* mobile top nav — hidden on desktop */ .mobile-nav { display: none; } /* ---------- Main content ---------- */ main.content { flex: 1; width: 100%; padding: 0 12% 64px; display: flex; align-items: flex-start; } main.content .inner { padding-top: 22vh; max-width: 620px; font-size: 1.05rem; line-height: 1.65; } /* Contact: content sits toward the left */ body.theme-contact main.content { justify-content: flex-start; } /* Home: block centered horizontally in the viewport, text itself stays left-aligned */ body.theme-home main.content { justify-content: center; } /* Design page: list echoes the "Design" tab on the left */ body.theme-design main.content { justify-content: flex-start; } /* Projects page: list echoes the "Projects" tab on the right */ body.theme-projects main.content { justify-content: flex-end; } body.theme-projects main.content .inner { text-align: left; } .eyebrow { margin: 0 0 18px; font-size: 1rem; } .linklist { list-style: none; margin: 0; padding: 0; } .linklist li { margin-bottom: 20px; } .linklist a { font-size: 1.05rem; } .link-desc { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.5; opacity: 0.75; max-width: 480px; } /* Contact / CV content blocks */ .cv-block { margin-bottom: 28px; } .cv-block h2 { font-size: 1rem; margin: 0 0 10px; font-weight: 700; } .cv-block p { margin: 0 0 4px; } .cv-links { margin-top: 8px; } /* ---------- Footer ---------- */ .bottom-link { text-align: center; padding: 0 24px 48px; } .bottom-link a { font-size: 1.05rem; letter-spacing: 0.02em; } /* ---------- Spinning "thanks for visiting" badge ---------- */ .visit-badge { position: fixed; right: 32px; bottom: 32px; width: 140px; height: 140px; z-index: 4; } .visit-badge svg { width: 100%; height: 100%; animation: spin 14s linear infinite; } .visit-badge text { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 10.5px; letter-spacing: 0.03em; fill: currentColor; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .visit-badge svg { animation: none; } } /* ---------- Mobile sticky email bar ---------- */ .email-bar { display: none; } /* ===================================================== Mobile layout ===================================================== */ @media (max-width: 720px) { .side-nav { display: none; } .mobile-nav { display: flex; justify-content: center; gap: 28px; padding: 18px 24px 0; } .mobile-nav a { font-size: 0.95rem; letter-spacing: 0.05em; text-decoration: none; padding-bottom: 2px; } .mobile-nav a.active { border-bottom: 1px solid currentColor; } .topbar { padding-top: 36px; } main.content { padding: 0 24px 48px; justify-content: flex-start !important; } main.content .inner { padding-top: 8vh; max-width: 100%; text-align: left !important; } .visit-badge { position: static; width: 150px; height: 150px; margin: 56px auto 8px; } body.has-email-bar main.content { padding-bottom: 96px; } body.has-email-bar .email-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; background: var(--cta-blue); color: #fff; text-align: center; padding: 16px; z-index: 10; } body.has-email-bar .email-bar a { color: #fff; text-decoration: none; font-size: 1rem; letter-spacing: 0.03em; } .bottom-link { padding-bottom: 24px; } }