*, *::before, *::after { box-sizing: border-box; } html { height: 100%; background-color: var(--bg); } /* ---- Theme tokens ---- */ /* 1 · Marbre & Encre (default) */ :root, [data-theme="marbre"] { --bg: #f3efe6; --surface: #ffffff; --ink: #221d33; --muted: #6b6478; --accent: #4b3b78; --on-accent: #f3efe6; --border: #ddd4c0; } /* 1bis · Papier & Encre */ [data-theme="papier-encre"] { --bg: #f6f3ec; --surface: #ffffff; --ink: #232030; --muted: #7d7686; --accent: #45507a; --on-accent: #f6f3ec; --border: #dfd9cb; } /* 2 · Papier Notion */ [data-theme="notion"] { --bg: #fbfaf7; --surface: #ffffff; --ink: #1f1b16; --muted: #847d70; --accent: #2f5875; --on-accent: #fbfaf7; --border: #e4e0d6; } /* 3 · Crépuscule */ [data-theme="crepuscule"] { --bg: #15131c; --surface: #1c1926; --ink: #ece6f5; --muted: #948aab; --accent: #dda85e; --on-accent: #15131c; --border: #332e42; } body { background-color: transparent; color: var(--ink); font-family: "Victor Mono", monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 500; margin: 0; padding: 20px; min-height: 100%; overflow-x: hidden; position: relative; } /* Faint tramed (dithered) accent, a light nod to the marble/gaz references */ body::before { content: ""; position: fixed; top: -70px; right: -70px; width: 280px; height: 280px; pointer-events: none; z-index: -1; background-image: radial-gradient(circle, var(--accent) 1px, transparent 1.4px); background-size: 5px 5px; -webkit-mask-image: radial-gradient(ellipse 60% 65% at 55% 45%, black 0%, black 30%, transparent 72%); mask-image: radial-gradient(ellipse 60% 65% at 55% 45%, black 0%, black 30%, transparent 72%); opacity: 0.4; } /* Hardcoded (non-custom-property) background classes, toggled by script.js. These target , not : in Safari, body kept an opaque background-color that painted over html and never repainted again after the first JS-driven theme switch, confirmed by a live-DOM snapshot where body's class was correct but the screen still showed the old color. body stays transparent so html always shows through. See script.js applyThemeBackground(). */ html.theme-bg-marbre { background-color: #f3efe6; } html.theme-bg-papier-encre { background-color: #f6f3ec; } html.theme-bg-notion { background-color: #fbfaf7; } html.theme-bg-crepuscule { background-color: #15131c; } #theme-switcher.theme-bg-marbre { background-color: #ffffff; border-color: #ddd4c0; } #theme-switcher.theme-bg-papier-encre { background-color: #ffffff; border-color: #dfd9cb; } #theme-switcher.theme-bg-notion { background-color: #ffffff; border-color: #e4e0d6; } #theme-switcher.theme-bg-crepuscule { background-color: #1c1926; border-color: #332e42; } #terminal { font-size: 16px; } #terminal p { margin: 4px 0; } .input-line { display: flex; align-items: center; justify-content: start; margin: 22px 0 6px; flex-wrap: wrap; } .input-line:first-child { margin-top: 0; } .prompt-label { display: flex; align-items: center; flex-shrink: 0; } .prompt-arrow { color: var(--accent); margin-right: 10px; font-weight: bold; } .prefix { color: var(--accent); margin-right: 10px; white-space: nowrap; } .prefix-symbol { color: var(--accent); margin-right: 10px; white-space: nowrap; } .input-group { display: flex; align-items: center; } input { background: transparent; border: none; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; width: auto; min-width: 50px; outline: none; padding: 0; margin: 0; /* Critical for alignment with ghost text */ } /* Wrapper to hold input and ghost overlay */ .input-wrapper { position: relative; display: flex; /* Ensures input takes full height/width */ } .ghost-text { position: absolute; top: 0; left: 0; pointer-events: none; color: var(--muted); font-style: italic; white-space: pre; /* Preserves spaces */ z-index: 1; } .input-wrapper input { z-index: 2; /* Input must be above ghost */ width: auto; } input::placeholder { font-style: regular; opacity: 0.7; } #start-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background-color: var(--bg); z-index: 1000; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; } #start-overlay span { font-size: 1.2rem; color: var(--accent); animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } @media (max-width: 600px) { #terminal { font-size: 18px; } .input-line { margin-bottom: 9px; } .input-group { flex-basis: 100%; margin-top: 5px; } } #mobile-autocomplete-btn { background-color: var(--accent); color: var(--on-accent); padding: 2px 6px; border-radius: 4px; font-weight: bold; font-size: 0.8rem; margin-left: 8px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); text-align: center; white-space: nowrap; font-family: "Victor Mono", monospace; align-self: center; text-transform: lowercase; display: inline-flex; align-items: center; justify-content: center; } .suggestion-item { padding: 2px 10px; border-radius: 12px; color: var(--ink); font-size: 0.9em; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); background-color: color-mix(in srgb, var(--ink) 5%, transparent); } .suggestion-item:hover { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px) scale(1.02); font-weight: 600; } .suggestion-info { background-color: color-mix(in srgb, var(--ink) 8%, transparent); } .suggestion-helper { background-color: transparent; border-color: color-mix(in srgb, var(--ink) 15%, transparent); color: var(--muted); } .tagline { font-style: italic; color: var(--muted); } .profile-img { width: 150px; height: 150px; border-radius: 50%; margin: 15px 0; border: 3px solid var(--accent); object-fit: cover; display: block; box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 20%, transparent); } /* ---- Theme switcher ---- */ #theme-switcher { position: fixed; top: 14px; right: 14px; z-index: 20; display: flex; gap: 8px; padding: 6px; background-color: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 4px 15px color-mix(in srgb, var(--ink) 12%, transparent); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .theme-dot { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 15%, transparent); } .theme-dot:hover { transform: scale(1.1); } .theme-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-dot.active { border-color: var(--ink); } @media (max-width: 600px) { #theme-switcher { top: 8px; right: 8px; gap: 6px; padding: 5px; } .theme-dot { width: 16px; height: 16px; } } @media (prefers-reduced-motion: reduce) { .suggestion-item, .theme-dot { transition: none; } } /* ---- Blog reader ---- */ .blog-reader { position: fixed; inset: 0; z-index: 900; background-color: var(--bg); overflow-y: auto; padding: 60px 24px 100px; } .blog-reader-hint { position: fixed; top: 14px; left: 14px; z-index: 901; background-color: var(--surface); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-family: "Victor Mono", monospace; font-weight: 500; font-size: 0.85rem; cursor: pointer; } .blog-reader-hint:hover { color: var(--ink); border-color: var(--accent); } /* Secondary, quieter than the "q" badge — no border, no hover state, not clickable, so it reads as informational rather than actionable. Still needs an opaque background: body text keeps scrolling underneath it. */ .blog-reader-scroll-hint { position: fixed; bottom: 14px; left: 14px; z-index: 901; background-color: var(--surface); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-family: "Victor Mono", monospace; font-size: 0.78rem; box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 10%, transparent); pointer-events: none; } .blog-reader-inner { max-width: 680px; margin: 0 auto; } .blog-reader article h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 8px; color: var(--ink); } .blog-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 36px; } .blog-body p { line-height: 1.75; margin: 18px 0; color: var(--ink); } .blog-body h2 { font-size: 1.35rem; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--ink); } .blog-body h3 { font-size: 1.1rem; margin: 32px 0 12px; color: var(--ink); } .blog-body pre { background-color: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; overflow-x: auto; font-size: 0.85rem; line-height: 1.6; margin: 20px 0; } .blog-body code { font-family: "Victor Mono", monospace; } .blog-file { margin: 20px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background-color: var(--surface); } .blog-file-toggle { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: none; border: none; color: var(--ink); font-family: "Victor Mono", monospace; font-weight: 600; font-size: 0.9rem; cursor: pointer; text-align: left; } .blog-file-toggle:hover { color: var(--accent); } .blog-file-caret { color: var(--accent); transition: transform 0.2s ease; } .blog-file.open .blog-file-caret { transform: rotate(90deg); } .blog-file-body { display: none; margin: 0; border-top: 1px solid var(--border); border-radius: 0; } .blog-file.open .blog-file-body { display: block; } @media (max-width: 600px) { .blog-reader { padding: 70px 16px 80px; } .blog-reader article h1 { font-size: 1.6rem; } } @media (prefers-reduced-motion: reduce) { .blog-file-caret { transition: none; } }