@charset "UTF-8"; /* ──────────────────────────────────────────────────────────────────────────── Personal Site — Swiss‑Style Chat UI --------------------------------------------------------------------------- WHAT'S IN HERE • Theme tokens (light/dark), incl. explicit overrides via [data-theme] • Layout grid + responsive breakpoints • Chat area capped to viewport height (no page jump) • Message bubbles, chips, composer • Project cards/list + view toggle • Top‑right theme tabs with micro‑interactions (ripple, spring) • Unified CTA button style (“Case Study”) incl. shine animation • Accessibility: reduced‑motion fallbacks, focus halos • Optional: `.messages.reverse` utility to render newest on top (CSS‑only) BREAKPOINTS • ≤1200px, ≤960px, ≤720px, ≤560px, ≤480px, ≤400px, ≤360px Tip: If your header height changes, tweak the `calc()` under .messages. ──────────────────────────────────────────────────────────────────────────── */ /* ========== RESET ========== */ * { box-sizing: border-box } html, body { height: 100% } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial; } /* ========== THEME TOKENS (auto via OS) ========== */ :root{ --bg: #f7f7f7; /* background (light) */ --fg: #0c0c0c; /* foreground text */ --muted:#707070; /* secondary text */ --card:#ffffff; /* surfaces/cards */ --line:#e6e6e6; /* borders, grid hairlines */ --accent:#e31e24; /* Swiss red */ --accent-ink:#ffffff; /* text on accent */ --chip:#11111108; /* subtle chip bg */ } @media (prefers-color-scheme: dark){ :root{ --bg:#0b0d12; --fg:#e8eefc; --muted:#8b93a7; --card:#101521; --line:#1c2233; --accent:#ff4d57; --accent-ink:#0b0d12; --chip:#ffffff0f; } } /* === Explicit theme override via === */ html[data-theme="light"]:root{ --bg:#f7f7f7; --fg:#0c0c0c; --muted:#707070; --card:#ffffff; --line:#e6e6e6; --accent:#e31e24; --accent-ink:#ffffff; --chip:#11111108; } html[data-theme="dark"]:root{ --bg:#0b0d12; --fg:#e8eefc; --muted:#8b93a7; --card:#101521; --line:#1c2233; --accent:#ff4d57; --accent-ink:#0b0d12; --chip:#ffffff0f; } /* ========== PAGE LAYOUT ========== */ body { background: var(--bg); color: var(--fg); } /* Responsive two‑column grid that collapses to one column */ .container{ display: grid; grid-template-columns: 360px 1fr; gap: 32px; padding: 32px; max-width: 1200px; margin: 0 auto; } @media (max-width: 1200px){ .container { padding: 28px; gap: 28px; } } @media (max-width: 960px){ .container { grid-template-columns: 1fr; gap: 20px; padding: 20px; } } @media (max-width: 560px){ .container { padding: 14px; } } /* Left rail (sticky on desktop; static on mobile) */ .rail{ display: flex; flex-direction: column; gap: 24px; position: sticky; top: 20px; align-self: start; } @media (max-width: 960px){ .rail{ position: static; top: auto; } } /* Brand block */ .brand{ display: flex; gap: 16px; align-items: center; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; } .mark{ width: 40px; height: 40px; background: var(--fg); border-radius: 4px; position: relative; } .mark::after{ content:""; position:absolute; inset:8px; background:var(--accent); } .brand-title{ font-weight: 800; letter-spacing: .06em; } .brand-sub{ margin: 4px 0 0; color: var(--muted); font-size: 12px; } /* Generic panel */ .panel{ padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; font-size: 12px;} .panel-title{ font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 8px; color: var(--muted); } /* ========== CHIPS ========== */ .chips{ display: flex; flex-wrap: wrap; gap: 8px; } .chip{ appearance:none; border:none; background: var(--chip); border:1px solid var(--line); color: var(--fg); padding:10px 12px; border-radius: 999px; cursor: pointer; font-weight: 600; } .chip:hover{ outline:2px solid var(--fg); outline-offset: -2px; } @media (max-width: 560px){ .chips{ gap: 6px; } .chip{ padding:10px 12px; font-size: 13px; } } /* ========== CHAT ========== */ /* Cap chat to viewport; the scroll happens inside .messages */ .chat{ display:flex; flex-direction:column; max-height:100vh; /* never exceed viewport */ min-height:60vh; /* feels better on desktop */ } .messages{ flex: 1 1 auto; display: flex; flex-direction: column; /* default: newest at bottom (JS can prepend instead) */ gap: 14px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: auto; /* Leave room for header/rails/composer. Adjust if your header is taller. */ max-height: calc(100vh - 220px); } @media (max-width: 960px){ .messages{ max-height: calc(100vh - 180px); padding: 18px; } } @media (max-width: 720px){ .messages{ padding: 16px; } } /* OPTIONAL: CSS‑only newest‑on‑top (if you don't want to handle it in JS) Add class="messages reverse" to use this. */ .messages.reverse{ flex-direction: column-reverse; } .msg{ max-width: 70ch; padding: 12px 14px; border-radius: 14px; line-height: 1.5; white-space: pre-wrap; animation: drop-in 180ms ease-out both; /* tiny entrance motion */ } @keyframes drop-in{ from { transform: translateY(-4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (max-width: 720px){ .msg{ max-width: 100%; } } .msg.user{ align-self: flex-end; background: transparent; border: 1px solid var(--line); } .msg.bot{ align-self: flex-start; background: linear-gradient(180deg, var(--bg), var(--card)); border: 1px solid var(--line); } .msg strong{ font-weight: 800; } .meta{ font-size: 12px; color: var(--muted); margin-top: 4px; } .cta-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } /* ========== COMPOSER ========== */ .composer{ display:flex; gap:12px; margin-top:16px; } .input{ flex:1; padding:14px 16px; border-radius: 12px; border:1px solid var(--line); background: var(--card); color: var(--fg); } .btn{ padding:12px 16px; border-radius:12px; border:1px solid var(--line); background: var(--bg); color: var(--fg); font-weight:800; text-transform: uppercase; letter-spacing:.08em; transition: transform .12s ease, filter .12s ease; } .btn:hover{ transform: translateY(-1px); } .toggle-row{ display:flex; gap:8px; } @media (max-width: 720px){ .composer{ flex-direction: column; gap: 10px; } .btn{ width: 100%; padding: 14px 16px; } /* comfy tap target */ } /* ========== PRIMARY CTA (Unified “Case Study” button) ========== */ /* Make .btn-primary and .btn.cta look identical; add shine swipe */ /* ===== BUTTONS — Standardised Look ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; /* unified font size */ font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 12px; /* unified padding */ min-height: 28px; /* consistent height */ border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); position: relative; overflow: hidden; /* needed for shine animation */ transition: transform 0.12s ease, filter 0.12s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* Primary (Swiss red) */ .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; } /* Secondary (grey) */ .btn-secondary { background: var(--card); color: var(--fg); border-color: var(--line); } /* Shine micro-animation (same as "See Case Study") */ .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 0%, rgba(255, 255, 255, 0.22) 20%, transparent 40% ); transform: translateX(-120%); } .btn:hover::after { animation: btn-shine 700ms cubic-bezier(.2, .8, .2, 1); } @keyframes btn-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } } /* Size variants (kept consistent) */ .btn.sm{ padding:8px 10px; border-radius:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:11px; background: var(--card); } .btn.tiny{ padding:6px 10px; border-radius:10px; } .btn.sm.active{ background: var(--accent); color: var(--accent-ink); border-color: transparent; } /* Ensure tiny CTAs don't get border contrast lines */ .btn.cta.tiny, .btn-primary.btn.tiny{ border-color: transparent; } /* ========== SWISS HAIRLINE GRID ========== */ .container::before{ content:""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 0 31px, var(--line) 31px 32px), linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px); background-size: 32px 32px; opacity: .08; } @media (max-width: 560px){ .container::before{ opacity: .04; } } /* ========== SCROLLBAR (WebKit) ========== */ .messages::-webkit-scrollbar{ height:12px; width:12px; } .messages::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 10px; } /* ========== LINKS ========== */ a{ color: inherit; } a.link{ color: var(--fg); text-decoration: underline; text-underline-offset: 2px; } /* ========== PROJECTS: View Toggle + Cards/List ========== */ .proj-view-toggle{ display: flex; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; } .proj-content{ margin-top: 4px; } /* Card grid scales gracefully across breakpoints */ .proj-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } @media (max-width: 1200px){ .proj-grid{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } @media (max-width: 720px){ .proj-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } } @media (max-width: 480px){ .proj-grid{ grid-template-columns: 1fr; gap: 10px; } } .proj-card{ background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: transform .12s ease, box-shadow .12s ease; } .proj-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); } .proj-head .proj-title{ font-weight: 800; } .proj-head .proj-meta{ font-size: 12px; color: var(--muted); margin-top: 2px; } .proj-body{ font-size: 14px; } .proj-chips{ display: flex; flex-wrap: wrap; gap: 6px; } .proj-chips .chip{ background: var(--chip); border:1px solid var(--line); padding: 4px 8px; border-radius: 999px; font-size: 11px; } /* List rendering */ .proj-list{ display: flex; flex-direction: column; gap: 6px; } .proj-row-title{ margin-bottom: 2px; } .proj-row-meta{ font-size: 12px; color: var(--muted); } .proj-row-sum{ font-size: 14px; } .proj-row-line{ height: 1px; background: var(--line); opacity: .5; margin: 8px 0; } /* Motion safety */ @media (prefers-reduced-motion: reduce){ .msg, .proj-card, .btn { animation: none !important; transition: none !important; } } /* ========== TOP BAR + THEME TABS ========== */ .topbar{ position: sticky; top: 0; z-index: 60; display: flex; justify-content: flex-end; padding: 14px 20px; background: transparent; } /* Nice frosted look when supported */ @supports (backdrop-filter: blur(6px)){ .topbar{ backdrop-filter: blur(6px); background: color-mix(in oklab, var(--bg) 65%, transparent); } } @media (max-width: 560px){ .topbar{ padding: 10px 12px; } } /* Two‑tab (Light/Dark) control */ .exp-tabs { --w: 136px; --h: 40px; position: relative; width: var(--w); height: var(--h); display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: 999px; background: var(--card); overflow: hidden; } @media (max-width: 400px){ .exp-tabs{ --w: 120px; --h: 36px; } } .exp-tabs .tab{ appearance:none; border:0; background:transparent; cursor:pointer; font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing:.06em; text-transform: uppercase; color: var(--fg); position: relative; z-index: 2; transition: transform .12s ease, color .2s ease, opacity .2s ease; overflow: hidden; /* for ripple */ } .exp-tabs .tab:hover{ transform: translateY(-1px); opacity: .95; } .exp-tabs .tab:active{ transform: translateY(0); opacity: .9; } .exp-tabs .tab:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--fg) 22%, transparent); border-radius: 999px; } /* Sliding indicator */ .exp-tabs .indicator{ position: absolute; z-index: 1; top: 2px; left: 2px; height: calc(var(--h) - 4px); width: calc((var(--w) - 4px)/2); background: var(--bg); border-radius: 999px; transition: transform .2s ease; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 1px color-mix(in oklab, var(--line) 60%, transparent), 0 8px 20px rgba(0,0,0,.10); } html[data-theme="dark"] .exp-tabs .indicator{ background: #0e1320; } .exp-tabs[data-mode="light"] .indicator { transform: translateX(0); } .exp-tabs[data-mode="dark"] .indicator { transform: translateX(calc((var(--w) - 4px)/2)); } /* Ripple element (JS injects ) */ .exp-tabs .tab .ripple{ position: absolute; border-radius: 999px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0); background: color-mix(in oklab, var(--fg) 10%, transparent); } @keyframes ripple-pop{ 0% { opacity:.25; transform: translate(-50%,-50%) scale(0); } 60% { opacity:.18; transform: translate(-50%,-50%) scale(1); } 100% { opacity:0; transform: translate(-50%,-50%) scale(1.25); } } /* ========== TINY DEVICE TWEAKS (≤360px) ========== */ @media (max-width: 360px){ .brand{ padding: 12px; } .panel{ padding: 12px; } .msg{ font-size: 14px; } .input{ padding: 12px 14px; } }