/* ============================================================ Temulen Iveelt — portfolio landing page styles Design tokens live on :root (light) and [data-theme="dark"]. ============================================================ */ /* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Light-mode design tokens (default). Every color used by the page is declared here so the dark-mode block below only needs to override. */ :root { --bg: #ffffff; --text: #1a1a1a; --text-secondary: #555; --text-muted: #888; --card-bg: #f7f7f7; --card-border: #d0d0d0; --heading-color: #1a1a1a; --dash-color: #bbb; /* Player — light mode */ --player-bg: #e6e6e8; --player-border: #c8c8cc; --lcd-bg: #d8d8db; --lcd-border: #bbbbbe; --lcd-text: #1a1a1a; --lcd-text-secondary: #444; --lcd-text-muted: #777; --player-btn-bg: #d5d5d8; --player-btn-border: #b0b0b4; --player-btn-color: #555; --player-btn-hover: #cccccf; --player-btn-active: #c0c0c3; --waveform-color: #1a1a1a; --waveform-idle: #aaa; --progress-track-bg: #c0c0c3; --progress-fill-color: #1a1a1a; --player-label: #999; --led-idle: #aaa; --led-active: #1a1a1a; --loop-bg: #d5d5d8; --loop-border: #b0b0b4; --loop-color: #888; --loop-active: #1a1a1a; --vent-color: #c8c8cc; --scanline-color: rgba(0,0,0,0.04); /* Accent tokens drive color-pops on player interactions + progress gradient + borders. --accent is dark enough to read on white (≥4.5:1 contrast). --accent-alt is a lighter complementary shade used only for gradient endpoints, never for text. --goat-filter-theme shifts the goat image hue to match the chosen theme. Defaults match "Amber" — the light-mode default. JS overrides to "Forest" in dark mode. */ --accent: #a07030; --accent-alt: #d9bc6c; --goat-filter-theme: hue-rotate(-10deg) saturate(1.2); } /* ===== COLOR THEMES ===== Each theme sets --accent (text-safe), --accent-alt (gradient endpoint only), and --goat-filter-theme (hue-rotates the yellow goat to match). Active theme is set by JS: document.documentElement.setAttribute('data-color', ...) */ [data-color="rose"] { --accent: #c0607a; --accent-alt: #e8a27c; --goat-filter-theme: hue-rotate(-90deg) saturate(1.3); } [data-color="forest"] { --accent: #4f8a62; --accent-alt: #adbd66; --goat-filter-theme: hue-rotate(70deg) saturate(1.0); } [data-color="ocean"] { --accent: #4e72a9; --accent-alt: #a3c1dc; --goat-filter-theme: hue-rotate(160deg) saturate(0.9); } [data-color="amber"] { --accent: #a07030; --accent-alt: #d9bc6c; --goat-filter-theme: hue-rotate(-10deg) saturate(1.2); } /* Dark-mode overrides. Toggled by JS setting data-theme="dark" on . */ [data-theme="dark"] { --bg: #131316; --text: #c8c8cc; --text-secondary: #999; --text-muted: #666; --card-bg: #1c1c20; --card-border: #3a3a3e; --heading-color: #e8e8ec; --dash-color: #555; /* Player — dark mode */ --player-bg: #1c1c1f; --player-border: #3e3e42; --lcd-bg: #111; --lcd-border: #2a2a2e; --lcd-text: #fff; --lcd-text-secondary: #ccc; --lcd-text-muted: #888; --player-btn-bg: #2e2e32; --player-btn-border: #4a4a4e; --player-btn-color: #999; --player-btn-hover: #3a3a3e; --player-btn-active: #222226; --waveform-color: #fff; --waveform-idle: #555; --progress-track-bg: #222; --progress-fill-color: #fff; --player-label: #555; --led-idle: #555; --led-active: #fff; --loop-bg: #2a2a2e; --loop-border: #444; --loop-color: #666; --loop-active: #fff; --vent-color: #333; --scanline-color: rgba(0,0,0,0.12); } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; transition: background 0.3s, color 0.3s; } h1, h2, h3 { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.25; color: var(--heading-color); } a { color: inherit; } ul { list-style: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; } audio { display: none; } /* ===== FOCUS STATES ===== Visible focus ring for keyboard users. Uses the heading color so it adapts to light/dark. :focus-visible means mouse clicks won't show the ring, only keyboard focus does. */ :focus-visible { outline: 2px solid var(--heading-color); outline-offset: 2px; } /* Progress track lives inside an overflow:hidden LCD — an outline would get clipped. Use box-shadow instead so the ring can extend outside the track. */ .progress-track:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--heading-color); } /* ===== LAYOUT ===== Two-column grid on desktop (card | sidebar), collapses to one column ≤820px. */ .container { display: grid; grid-template-columns: 1.1fr 1fr; gap: 55px; max-width: 960px; margin: 55px auto; padding: 0 32px; align-items: start; } /* ===== THEME TOGGLE ===== Fixed ☾/☀ button in the top-right. `.spinning` is a one-shot rotate on click. */ .theme-toggle { position: fixed; top: 20px; right: 20px; width: 34px; height: 34px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; z-index: 100; transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.4s ease; } .theme-toggle:hover { border-color: var(--text-secondary); } .theme-toggle.spinning { transform: rotate(360deg); } /* ===== THEME COLOR PICKER ===== Hamburger button below the sun/moon toggle; clicking it reveals a narrow vertical dropdown with 4 color-theme swatches. Active theme highlighted. */ .theme-picker { position: fixed; top: 62px; /* theme-toggle top(20) + size(34) + gap(8) */ right: 20px; z-index: 100; } .theme-picker-toggle { width: 34px; height: 34px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; cursor: pointer; transition: background 0.3s, border-color 0.3s, color 0.3s; } .theme-picker-toggle:hover { border-color: var(--text-secondary); } .theme-picker-toggle span { width: 16px; height: 2px; background: currentColor; display: block; transition: background 0.3s; } /* Dropdown extends slightly beyond the toggle width for breathing room. */ .theme-picker-menu { position: absolute; top: 38px; right: 0; width: 40px; background: var(--card-bg); border: 1px solid var(--card-border); padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px; transition: background 0.3s, border-color 0.3s; } .theme-picker-menu[hidden] { display: none; } .theme-picker-label { font-family: 'Courier New', 'Lucida Console', monospace; font-size: 9px; color: var(--text-secondary); letter-spacing: 1px; margin-bottom: 2px; transition: color 0.3s; } /* Each swatch is a small square filled with its theme's gradient preview. */ .theme-swatch { width: 26px; height: 26px; padding: 0; border: 1px solid var(--card-border); cursor: pointer; transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s; } .theme-swatch:hover { transform: scale(1.1); border-color: var(--text-secondary); } /* Active theme gets a heavier border so you can see which one is applied. */ .theme-swatch[data-active="true"] { border-color: var(--heading-color); box-shadow: 0 0 0 1px var(--heading-color); } .theme-swatch[data-theme-color="rose"] { background: linear-gradient(135deg, #d9839f, #e8a27c); } .theme-swatch[data-theme-color="forest"] { background: linear-gradient(135deg, #7aa884, #adbd66); } .theme-swatch[data-theme-color="ocean"] { background: linear-gradient(135deg, #6f8cc2, #a3c1dc); } .theme-swatch[data-theme-color="amber"] { background: linear-gradient(135deg, #c89058, #d9bc6c); } /* ===== LEFT CARD ===== Bordered container holding the flag/stripes header, bio, projects, resume, contact, goat. Border blends 20% of the theme accent into the neutral card-border so it picks up the active theme without ever reading as garish. */ .card { background: var(--card-bg); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--card-border)); overflow: hidden; position: relative; transition: background 0.3s, border-color 0.3s; } .card-body { padding: 29px 33px 66px; position: relative; z-index: 1; } /* Flag + Stripes row (top of card): US + Mongolian flags next to Mongolia's tricolor stripes. */ .flag-stripes { display: flex; align-items: center; gap: 10px; margin-bottom: 29px; position: relative; z-index: 1; } .flag-img { height: 27px; width: auto; flex-shrink: 0; object-fit: contain; } /* Stripes — blue(10px) / yellow(7px) / red(4px). Faded in on load via JS adding .visible. */ .stripes { display: flex; flex-direction: column; gap: 3px; flex: 1; } .stripe--blue { height: 10px; background: #3558A0; transition: background 0.3s, opacity 0.6s ease; opacity: 0; } .stripe--yellow { height: 7px; background: #E8B832; transition: background 0.3s, opacity 0.6s ease 0.15s; opacity: 0; } .stripe--red { height: 4px; background: #C4342D; transition: background 0.3s, opacity 0.6s ease 0.3s; opacity: 0; } .stripe--blue.visible { opacity: 1; } .stripe--yellow.visible { opacity: 1; } .stripe--red.visible { opacity: 1; } [data-theme="dark"] .stripe--blue { background: #004d87; } [data-theme="dark"] .stripe--yellow { background: #ffd900; } [data-theme="dark"] .stripe--red { background: #ad0000; } /* Sections inside the card (What I'm Up To, Projects, Resume, Contact). */ .section { margin-bottom: 29px; } .section:last-child { margin-bottom: 0; } .section h2 { font-size: 25px; font-weight: 700; margin-bottom: 9px; } .section p { font-size: 17px; color: var(--text-secondary); line-height: 1.7; } .section p a { text-decoration: underline; transition: color 0.15s; } .section p a:hover { color: var(--accent); } /* Projects toggle — real