/* Notebook design system — Refined Field Note register. Shared by index.html, reader.html, presentation.html, preview.html. */ :root { --ink: #10243b; --paper: #fdfbf4; --desk: #efe9da; --copper: #b87338; --hl: #ffe08a; --muted: #6f695e; --grid: rgba(16, 36, 59, .055); --line: rgba(16, 36, 59, .28); --thai: "Sarabun", ui-sans-serif, system-ui, sans-serif; --display: "Noto Sans Thai", "Sarabun", ui-sans-serif, system-ui, sans-serif; --hand: "Caveat", cursive; --mono: "IBM Plex Mono", ui-monospace, monospace; } /* Desk background lives on ; pages opt in with .nb-desk */ .nb-desk { background: var(--desk); background-image: radial-gradient(circle at 80% 8%, rgba(184, 115, 56, .08), transparent 30rem); color: var(--ink); font-family: var(--thai); } /* File-folder tab bar */ .nb-tabs { display: flex; gap: 2px; padding: 18px 0 0; border-bottom: 1.5px solid var(--line); position: relative; z-index: 2; overflow-x: auto; scrollbar-width: none; } .nb-tabs::-webkit-scrollbar { display: none; } .nb-tab { font: 700 13px var(--display); padding: 8px 16px; color: var(--muted); text-decoration: none; border-radius: 8px 8px 0 0; white-space: nowrap; } .nb-tab:hover { color: var(--ink); } .nb-tab.active { color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-bottom: 2px solid var(--paper); margin-bottom: -1.5px; } .nb-tab.active::before { content: "▪"; color: var(--copper); margin-right: 6px; } /* The notebook page */ .nb-page { background: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 26px 26px; border: 1px solid rgba(16, 36, 59, .35); border-top: none; border-radius: 0 0 10px 10px; box-shadow: 0 1px 0 rgba(16, 36, 59, .25), 0 18px 40px rgba(16, 36, 59, .12); position: relative; } .nb-page::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--copper); border-radius: 0 0 0 10px; } .nb-page-pad { padding: 0 40px; } /* Buttons */ .nb-btn { display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--display); padding: 12px 22px; border-radius: 8px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .nb-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 36, 59, .15); } .nb-btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 2px 0 rgba(16, 36, 59, .7); } /* Cards */ .nb-card { background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 22px rgba(16, 36, 59, .07); } /* Highlighter emphasis */ .nb-hl { background: linear-gradient(transparent 62%, var(--hl) 62%); } /* Handwritten annotation — max 1–2 per page, copper only */ .nb-annot { font: 600 19px var(--hand); color: var(--copper); } /* Kicker label */ .nb-kicker { font: 700 12px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--copper); } /* Loop chips */ .nb-chip { font: 600 12.5px var(--mono); border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 13px; background: #fff; color: var(--ink); white-space: nowrap; } .nb-chip.gate { background: var(--copper); border-color: var(--copper); color: #fff; } @media (max-width: 720px) { .nb-tab { font-size: 12px; padding: 7px 11px; } .nb-page-pad { padding: 0 18px; } }