/* =========================================================================== THE FOUNDER'S NOTEBOOK — cosy retro notepad styles Hand-drawn (Excalidraw "Virgil") · warm cream paper · washi tape · sticky notes =========================================================================== */ @font-face { font-family: "Virgil"; src: url("fonts/Virgil.woff2") format("woff2"); font-display: swap; } :root { /* paper + ink */ --paper: #fbf3df; --paper-2: #f6ecd2; --rule: rgba(72,104,124,.16); --margin-line: rgba(196,90,74,.55); --ink: #3b3127; --ink-soft: #6a5f50; --ink-strong: #2a221b; /* retro accent palette */ --c-mustard: #E0A82E; --c-terracotta: #C75D4A; --c-teal: #3E7C76; --c-blue: #5E7C99; --c-plum: #8A5A83; --c-olive: #6E8B3D; --c-rust: #B5651D; --c-slate: #54707A; /* highlighters (translucent) */ --hl-yellow: rgba(255,221,87,.60); --hl-green: rgba(150,214,140,.50); --hl-pink: rgba(247,150,170,.45); --hl-blue: rgba(140,196,235,.45); --tape: rgba(228,210,150,.42); --tape-edge: rgba(180,160,90,.30); /* per-page accent (overridden on ) */ --accent: var(--c-teal); --hl: var(--hl-yellow); --paper-w: 900px; --shadow: 0 18px 40px rgba(20,12,4,.45), 0 2px 6px rgba(20,12,4,.30); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Virgil", "Segoe Print", "Comic Sans MS", "Chalkboard SE", cursive; color: var(--ink); font-size: 18px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* warm wooden desk */ background: radial-gradient(120% 90% at 50% -10%, rgba(255,236,200,.16), transparent 60%), radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.55), transparent 55%), repeating-linear-gradient(92deg, #3a2c20 0px, #3a2c20 3px, #34271c 3px, #34271c 6px), linear-gradient(150deg, #4a3826, #2c2016); background-attachment: fixed; min-height: 100vh; padding: 46px 18px 90px; } /* faint desk grain overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .06; background-image: url("data:image/svg+xml;utf8,"); } /* ============================= the paper sheet ============================ */ .sheet { position: relative; z-index: 1; max-width: var(--paper-w); margin: 0 auto; background: repeating-linear-gradient(transparent 0 33px, var(--rule) 33px 34px), linear-gradient(180deg, var(--paper), var(--paper-2)); background-position: 0 60px, 0 0; border-radius: 6px 8px 10px 8px; box-shadow: var(--shadow); padding: 58px 56px 64px 96px; /* big left gutter for binding + margin */ border: 1px solid rgba(120,90,50,.18); } /* red margin line */ .sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: 74px; width: 2px; background: var(--margin-line); opacity: .8; } /* spiral binding holes down the left */ .sheet::after { content: ""; position: absolute; top: 26px; bottom: 26px; left: 26px; width: 22px; background-image: radial-gradient(circle at 11px 11px, rgba(0,0,0,.34) 0 6px, rgba(0,0,0,.10) 6px 8px, transparent 9px); background-size: 22px 46px; background-repeat: repeat-y; filter: drop-shadow(1px 1px 0 rgba(255,255,255,.4)); } /* slightly torn paper feel + soft inner shading */ .sheet > * { position: relative; } /* ============================== page header ============================== */ .kicker { display: inline-block; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 12px 4px; transform: rotate(-1.6deg); border-radius: 3px 9px 4px 8px; box-shadow: 1px 2px 0 rgba(0,0,0,.18); } h1.title { font-size: clamp(38px, 6vw, 62px); line-height: 1.04; margin: 16px 0 6px; color: var(--ink-strong); letter-spacing: .5px; } .subtitle { font-size: 21px; color: var(--ink-soft); margin: 0 0 6px; max-width: 60ch; } .headrule { height: 14px; margin: 14px 0 30px; max-width: 540px; background: no-repeat left center/contain url("data:image/svg+xml;utf8,"); opacity: .8; } /* coffee ring stain, top-right of the sheet */ .stain { position: absolute; top: 28px; right: 40px; width: 86px; height: 86px; border-radius: 50%; border: 7px solid rgba(150,95,40,.16); box-shadow: inset 0 0 0 3px rgba(150,95,40,.07); transform: rotate(12deg); pointer-events: none; } /* ============================== prose body ============================== */ .prose { font-size: 18.5px; } .prose > :first-child { margin-top: 0; } .prose h2 { font-size: 30px; margin: 46px 0 14px; color: var(--ink-strong); display: inline-block; transform: rotate(-.5deg); background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-position: 0 86%; background-size: 100% 44%; padding: 0 .12em; } .prose h3 { font-size: 23px; margin: 30px 0 8px; color: var(--accent); display: inline-block; background: no-repeat left bottom/100% 7px url("data:image/svg+xml;utf8,"); padding-bottom: 4px; } .prose h4 { font-size: 19.5px; margin: 22px 0 6px; color: var(--ink-strong); } .prose p { margin: 12px 0; } .prose strong { color: var(--ink-strong); } .prose em { color: var(--c-rust); font-style: normal; text-decoration: underline wavy rgba(181,101,29,.4); text-underline-offset: 3px; } .prose a { color: var(--accent); text-decoration: none; border-bottom: 2px dotted var(--accent); } .prose a:hover { background: var(--hl); } /* lists with hand-drawn bullets */ .prose ul { list-style: none; padding-left: 6px; } .prose ul > li { position: relative; padding-left: 28px; margin: 7px 0; } .prose ul > li::before { content: "✦"; position: absolute; left: 2px; top: -1px; color: var(--accent); font-size: 15px; } .prose ol { padding-left: 26px; } .prose ol > li { margin: 7px 0; } .prose ol > li::marker { color: var(--accent); font-weight: bold; } /* nested lists get a quieter dash */ .prose ul ul > li::before, .prose ol ul > li::before { content: "–"; color: var(--ink-soft); } /* task checkboxes */ .prose li.task-list-item { list-style: none; padding-left: 30px; } .prose li.task-list-item::before { content: none; } .prose input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-left: -26px; margin-right: 8px; border: 2px solid var(--accent); border-radius: 4px 6px 4px 6px; transform: rotate(-3deg); vertical-align: -3px; position: relative; } .prose input[type="checkbox"]:checked::after { content: "✓"; position: absolute; left: 1px; top: -5px; color: var(--accent); font-size: 17px; } /* blockquote -> sticky note */ .prose blockquote { position: relative; margin: 26px 8px; padding: 22px 24px 20px; background: #fff7b8; color: var(--ink-strong); border: none; border-radius: 2px; box-shadow: 2px 6px 14px rgba(20,12,4,.22); transform: rotate(-1deg); } .prose blockquote::before { /* washi tape */ content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: var(--tape); border-left: 1px dashed var(--tape-edge); border-right: 1px dashed var(--tape-edge); } .prose blockquote p { margin: 6px 0; } .prose blockquote:nth-of-type(2n) { background: #cdeaff; transform: rotate(.8deg); } .prose blockquote:nth-of-type(3n) { background: #ffd6e2; transform: rotate(-.6deg); } .prose blockquote:nth-of-type(4n) { background: #d6f5cf; transform: rotate(1deg); } /* "Steer" callout (enhance.js tags it) */ .prose .steer { background: #eef6f4; border-left: 6px solid var(--accent); border-radius: 4px; padding: 12px 16px; margin: 10px 0 20px; transform: rotate(-.2deg); box-shadow: 1px 3px 0 rgba(0,0,0,.06); } .prose .steer strong:first-child { color: var(--accent); } /* code */ .prose code { font-family: "Courier New", monospace; background: rgba(62,124,118,.12); padding: 1px 6px; border-radius: 4px; font-size: .92em; } .prose pre { background: #322a20; color: #f3e7cf; padding: 16px 18px; border-radius: 8px; overflow:auto; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), 2px 4px 10px rgba(0,0,0,.25); transform: rotate(-.3deg); } .prose pre code { background: none; color: inherit; padding: 0; } /* tables -> retro grid */ .table-wrap { overflow-x: auto; margin: 22px 0; } .prose table { border-collapse: collapse; width: 100%; background: rgba(255,255,255,.5); box-shadow: 2px 4px 10px rgba(20,12,4,.14); } .prose th { background: var(--accent); color: #fff; text-align: left; padding: 9px 12px; font-size: 16px; letter-spacing: .4px; } .prose td { padding: 9px 12px; border-bottom: 1px dashed rgba(90,70,40,.25); vertical-align: top; } .prose tr:nth-child(2n) td { background: rgba(255,236,190,.35); } /* hr -> hand-drawn divider */ .prose hr { border: none; height: 18px; margin: 36px 0; background: no-repeat center/contain url("data:image/svg+xml;utf8,"); opacity: .55; } /* ============================== navigation tabs ============================== */ .tabrail { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: 6px; padding: 8px 0; } .tabrail a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font-size: 15px; padding: 7px 12px 7px 14px; border-radius: 10px 0 0 10px; background: var(--tab-c, #6a5f50); box-shadow: -2px 2px 6px rgba(0,0,0,.3); transform: translateX(calc(100% - 40px)); transition: transform .18s ease, filter .18s ease; white-space: nowrap; filter: saturate(.85) brightness(.95); } .tabrail a .num { font-size: 13px; opacity: .85; min-width: 16px; text-align: center; } .tabrail a:hover { transform: translateX(0); filter: none; } .tabrail a.active { transform: translateX(0); filter: none; box-shadow: -3px 3px 8px rgba(0,0,0,.4); outline: 2px solid rgba(255,255,255,.5); outline-offset: -2px; } /* per-page floating contents */ .page-toc { position: fixed; top: 50%; left: 14px; transform: translateY(-50%); z-index: 25; max-width: 190px; background: rgba(251,243,223,.94); border: 1px solid rgba(120,90,50,.25); border-radius: 8px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 14px; line-height: 1.5; } .page-toc .toc-title { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .page-toc a { display: block; color: var(--ink-soft); text-decoration: none; padding: 2px 0; } .page-toc a:hover { color: var(--accent); } @media (max-width: 1280px) { .page-toc { display: none; } } /* ============================== footer nav ============================== */ .pagenav { display: flex; justify-content: space-between; gap: 16px; margin-top: 54px; padding-top: 22px; border-top: 2px dashed rgba(90,70,40,.25); } .pagenav a { text-decoration: none; color: var(--ink-strong); background: var(--paper); border: 2px solid var(--accent); padding: 8px 16px; border-radius: 12px 4px 12px 4px; box-shadow: 2px 3px 0 var(--accent); transition: transform .12s ease; } .pagenav a:hover { transform: translate(1px,1px); box-shadow: 1px 2px 0 var(--accent); } .pagenav a.prev::before { content: "← "; } .pagenav a.next::after { content: " →"; } .pagenav .spacer { flex: 1; } .pageno { text-align: center; color: var(--ink-soft); font-size: 15px; margin-top: 26px; } /* ============================== shared bits ============================== */ .tape-strip { display:inline-block; background: var(--tape); padding: 2px 18px; transform: rotate(-2deg); border-left: 1px dashed var(--tape-edge); border-right: 1px dashed var(--tape-edge); } /* gentle settle-in */ @keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .sheet { animation: settle .5s ease both; } @media (prefers-reduced-motion: reduce) { .sheet { animation: none; } } /* ============================== responsive ============================== */ @media (max-width: 760px) { body { padding: 20px 8px 70px; font-size: 17px; } .sheet { padding: 40px 22px 48px 60px; } .sheet::after { left: 14px; } .sheet::before { left: 46px; } .tabrail { top: auto; bottom: 0; right: 0; left: 0; transform: none; flex-direction: row; overflow-x: auto; background: rgba(30,22,14,.92); padding: 6px; gap: 6px; } .tabrail a { transform: none; border-radius: 8px; padding: 6px 10px; flex: 0 0 auto; } .tabrail a span.label { display: none; } .tabrail a.active span.label { display: inline; } h1.title { font-size: 34px; } .stain { display: none; } } /* =========================================================================== APP LAYER — links, my-take, write boxes, diagrams, Today / Goals / Journal =========================================================================== */ /* external-link "opens in new tab" marker */ a.ext::after { content: " \2197"; font-size: .78em; opacity: .7; vertical-align: super; } .prose a.ext { border-bottom-style: dotted; } /* "My take" callout (Claude's answer) */ .prose .mytake { background: #fbe9d8; border-left: 6px solid var(--c-rust); border-radius: 4px; padding: 12px 16px; margin: 8px 0 16px; transform: rotate(.2deg); box-shadow: 1px 3px 0 rgba(0,0,0,.06); } .prose .mytake strong:first-child { color: var(--c-rust); } /* write surfaces (your answer / notes / journal) */ .write-wrap { margin: 10px 0 22px; } .write-wrap .wlabel { font-size: 14px; letter-spacing: .5px; color: var(--accent); display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .write-wrap .saved { font-size: 12px; color: var(--c-olive); opacity: 0; transition: opacity .2s; } .write-wrap .saved.show { opacity: 1; } textarea.write { width: 100%; min-height: 84px; resize: vertical; font-family: inherit; font-size: 17px; color: var(--ink); line-height: 1.7; background: repeating-linear-gradient(transparent 0 30px, var(--rule) 30px 31px); background-color: rgba(255,255,255,.45); border: 1.5px dashed rgba(120,90,50,.4); border-radius: 8px; padding: 8px 12px; } textarea.write:focus { outline: none; border-color: var(--accent); background-color: #fffdf6; } /* per-page notes panel */ .notes-panel { margin-top: 40px; border-top: 2px dashed rgba(90,70,40,.25); padding-top: 18px; } /* diagrams */ .diagram { margin: 26px 0; padding: 16px 14px 10px; background: rgba(255,255,255,.45); border: 1.5px solid rgba(120,90,50,.22); border-radius: 12px 4px 12px 4px; box-shadow: 2px 4px 10px rgba(20,12,4,.10); } .diagram svg { width: 100%; height: auto; display: block; } .diagram svg text { font-family: "Virgil", "Segoe Print", cursive; } .diagram figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; text-align: center; } /* nav group labels */ .tabrail .grouplabel { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.55); text-align: right; padding: 6px 14px 2px 0; transform: translateX(calc(100% - 40px)); } .tabrail a:hover ~ .grouplabel { } /* buttons */ .btn { font-family: inherit; font-size: 16px; cursor: pointer; background: var(--paper); color: var(--ink-strong); border: 2px solid var(--accent); border-radius: 12px 4px 12px 4px; padding: 6px 14px; box-shadow: 2px 3px 0 var(--accent); transition: transform .1s; } .btn:hover { transform: translate(1px,1px); box-shadow: 1px 2px 0 var(--accent); } .btn.small { font-size: 14px; padding: 4px 10px; border-width: 1.5px; box-shadow: 1px 2px 0 var(--accent); } .btn.ghost { background: transparent; box-shadow: none; border-style: dashed; } /* ---------------- Today ---------------- */ .daynav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; } .daynav .date-big { font-size: 26px; color: var(--ink-strong); } .daynav .pill { font-size: 13px; color: #fff; background: var(--accent); padding: 2px 10px; border-radius: 4px 9px 4px 8px; transform: rotate(-2deg); } .daynav .arrow { font-size: 22px; line-height: 1; } .progress-wrap { margin: 14px 0 6px; } .progress-bar { height: 14px; background: rgba(120,90,50,.18); border-radius: 8px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); } .progress-bar > span { display: block; height: 100%; background: var(--accent); } .progress-label { font-size: 13px; color: var(--ink-soft); margin-top: 4px; } .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; } .meta-card { background: var(--paper); border: 2px solid rgba(120,90,50,.25); border-radius: 10px; padding: 12px 14px; } .meta-card .k { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); } .meta-card .v { font-size: 17px; color: var(--ink-strong); margin-top: 3px; } .onething { background: #fff7b8; border-radius: 4px; padding: 14px 16px; margin: 14px 0; box-shadow: 2px 5px 12px rgba(20,12,4,.18); transform: rotate(-.6deg); position: relative; } .onething .k { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--c-rust); } .onething .v { font-size: 19px; color: var(--ink-strong); margin-top: 4px; } .sched { margin: 8px 0; } .sblock { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(90,70,40,.18); } .sblock .time { font-size: 14px; color: var(--ink-soft); text-align: right; padding-top: 2px; } .sblock .time .dur { display: block; font-size: 11px; opacity: .7; } .sblock .body .ttl { font-size: 18px; color: var(--ink-strong); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sblock .body .note { font-size: 14px; color: var(--ink-soft); margin-top: 2px; } .sblock.now { background: linear-gradient(90deg, rgba(224,168,46,.18), transparent); border-radius: 8px; } .sblock.now .ttl::before { content: "▶ now"; font-size: 11px; color: #fff; background: var(--c-rust); padding: 1px 7px; border-radius: 6px; } .sblock.past { opacity: .55; } .chip { font-size: 11px; color: #fff; padding: 1px 8px; border-radius: 7px; letter-spacing: .3px; } .chip.Build{background:#54707A}.chip.Sell{background:#C75D4A}.chip.Learn{background:#3E7C76} .chip.Network{background:#6E8B3D}.chip.Reflect{background:#8A5A83}.chip.Anchor{background:#9c7b50} .chip.Break{background:#7e93a0}.chip.Rest{background:#9a8f7d} .dtask { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 6px 2px; font-size: 15px; } .dtask input { margin-top: 4px; } .dtask .meta { font-size: 12px; color: var(--ink-soft); } .dtask label { cursor: pointer; } .dtask.done label { text-decoration: line-through; opacity: .6; } /* mini month calendar */ .minical { margin: 12px 0; } .minical .mc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .minical table { width: 100%; border-collapse: collapse; } .minical td, .minical th { text-align: center; padding: 3px; font-size: 13px; } .minical th { color: var(--ink-soft); font-size: 11px; } .minical td .d { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; } .minical td .d:hover { background: var(--hl); } .minical td .d.today { outline: 2px solid var(--accent); } .minical td .d.sel { background: var(--accent); color: #fff; } .minical td .d.inplan { box-shadow: inset 0 -3px 0 rgba(110,139,61,.5); } .minical td .d.has { font-weight: bold; } /* ---------------- Goals / metrics ---------------- */ .metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 14px 0; } .metric { background: var(--paper); border: 2px solid rgba(120,90,50,.25); border-radius: 10px; padding: 12px; text-align: center; } .metric .k { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--accent); } .metric input { width: 100%; text-align: center; font-family: inherit; font-size: 24px; color: var(--ink-strong); border: none; background: transparent; border-bottom: 2px dashed rgba(120,90,50,.3); } .metric input:focus { outline: none; border-color: var(--accent); } .metric .sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; } .goal-add { display: flex; gap: 8px; margin: 12px 0; } .goal-add input { flex: 1; font-family: inherit; font-size: 16px; padding: 8px 12px; border: 1.5px dashed rgba(120,90,50,.4); border-radius: 8px; background: rgba(255,255,255,.5); } .goal-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(90,70,40,.18); } .goal-item.done .gtext { text-decoration: line-through; opacity: .6; } .goal-item .gtext { flex: 1; font-size: 16px; } .goal-item .del { cursor: pointer; color: var(--ink-soft); border: none; background: none; font-size: 16px; } /* ---------------- Journal ---------------- */ .journal-entry { background: rgba(255,255,255,.4); border: 1px solid rgba(120,90,50,.2); border-radius: 8px; padding: 12px 14px; margin: 10px 0; } .journal-entry .je-date { font-size: 13px; color: var(--accent); margin-bottom: 4px; } .journal-entry .je-text { white-space: pre-wrap; font-size: 16px; } @media (max-width: 680px) { .meta-grid, .metric-grid { grid-template-columns: 1fr; } } /* =========================================================================== GLOSSARY tooltips + user HIGHLIGHTS / COMMENTS =========================================================================== */ .term { position: relative; border-bottom: 1.5px dotted var(--accent); cursor: help; background: linear-gradient(var(--hl-blue), var(--hl-blue)) no-repeat 0 100% / 100% 0; transition: background-size .15s; } .term:hover, .term:focus, .term.open { background-size: 100% 100%; outline: none; } .term::after { content: attr(data-def); position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%); display: none; z-index: 80; width: max-content; max-width: 280px; background: #2b2018; color: #f7eede; font-size: 14px; line-height: 1.45; text-align: left; padding: 9px 12px; border-radius: 9px; box-shadow: 0 8px 22px rgba(0,0,0,.45); pointer-events: none; white-space: normal; border-bottom: none; } .term::before { content: ""; position: absolute; left: 50%; bottom: 150%; transform: translate(-50%, 100%); display: none; z-index: 81; border: 7px solid transparent; border-top-color: #2b2018; } .term:hover::after, .term:focus::after, .term.open::after, .term:hover::before, .term:focus::before, .term.open::before { display: block; } /* user highlights + comments */ mark.ann { background: transparent; color: inherit; } mark.ann.hl { background: var(--hl-yellow); border-radius: 3px; box-shadow: 0 0 0 1px rgba(224,168,46,.35); } mark.ann.cmt { background: #cfe8ff; border-bottom: 2px solid var(--c-blue); border-radius: 2px; cursor: pointer; } mark.ann.cmt::after { content: "✎"; font-size: .7em; vertical-align: super; color: var(--c-blue); margin-left: 1px; } .annot-bar { position: absolute; z-index: 90; display: flex; gap: 6px; background: rgba(43,32,24,.97); padding: 6px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.45); } .cmt-pop { position: absolute; z-index: 90; max-width: 300px; background: var(--paper); border: 2px solid var(--c-blue); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); } .cmt-pop .cmt-body { font-size: 15px; line-height: 1.5; margin-bottom: 8px; white-space: pre-wrap; color: var(--ink-strong); } /* review page */ .review-item { background: rgba(255,255,255,.45); border: 1px solid rgba(120,90,50,.22); border-left: 4px solid var(--accent); border-radius: 8px; padding: 12px 14px; margin: 10px 0; } .review-item .quote { font-style: italic; color: var(--ink-soft); border-left: 3px solid rgba(120,90,50,.3); padding-left: 10px; margin: 6px 0; } .review-item .cmt { font-size: 16px; color: var(--ink-strong); } .review-item .src { font-size: 13px; color: var(--ink-soft); margin-top: 4px; } .review-group h3 { margin-top: 22px; } /* =========================================================================== PAGE-TURN effect (pageflip.js) =========================================================================== */ .flip-stage { position: fixed; inset: 0; z-index: 200; perspective: 2200px; overflow: hidden; pointer-events: none; } .flip-under { position: fixed; border-radius: 6px 8px 10px 8px; background: repeating-linear-gradient(transparent 0 33px, var(--rule) 33px 34px), linear-gradient(180deg, var(--paper), var(--paper-2)); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; opacity: .25; } .under-hint, .leaf-hint { font-size: 30px; color: var(--ink-soft); opacity: .6; transform: rotate(-2deg); padding: 0 20px; text-align: center; } .flip-leaf { position: fixed; transform-style: preserve-3d; will-change: transform; } .leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 6px 8px 10px 8px; } .leaf-front { background: linear-gradient(180deg, var(--paper), var(--paper-2)); box-shadow: var(--shadow); } .leaf-front .flip-clone { position: absolute; top: 0; left: 0; } .leaf-back { transform: rotateY(180deg); background: repeating-linear-gradient(transparent 0 33px, var(--rule) 33px 34px), linear-gradient(180deg, var(--paper-2), var(--paper)); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } /* spine shading on the turning leaf */ .flip-leaf::after { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none; } .flip-leaf.to-next::after { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.22), transparent); } .flip-leaf.to-prev::after { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.22), transparent); } /* =========================================================================== Capture / Command palette / Inbox / Sync / Decisions =========================================================================== */ .kf-fab { position: fixed; right: 26px; bottom: 26px; z-index: 150; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; font-size: 30px; line-height: 1; color: #fff; background: var(--c-terracotta); border: none; box-shadow: 0 6px 16px rgba(0,0,0,.35); transition: transform .12s; } .kf-fab:hover { transform: translateY(-2px) rotate(90deg); } .kf-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(20,12,4,.45); display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; } .kf-modal { width: 100%; max-width: 560px; background: linear-gradient(180deg, var(--paper), var(--paper-2)); border-radius: 12px; border: 1px solid rgba(120,90,50,.3); box-shadow: 0 24px 60px rgba(0,0,0,.5); padding: 18px 20px; animation: settle .25s ease both; } .kf-modal.kf-palette { max-width: 640px; padding: 12px; } .kf-modal-h { font-size: 20px; color: var(--ink-strong); margin-bottom: 12px; } .kf-sub { font-size: 13px; color: var(--ink-soft); margin-left: 8px; } .kf-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .kf-hint { font-size: 13px; color: var(--ink-soft); margin-top: 10px; font-style: italic; } .kf-pal-input { width: 100%; font-family: inherit; font-size: 18px; padding: 10px 12px; border: none; border-bottom: 2px dashed rgba(120,90,50,.35); background: transparent; color: var(--ink-strong); } .kf-pal-input:focus { outline: none; border-color: var(--accent); } .kf-pal-list { max-height: 56vh; overflow-y: auto; margin-top: 8px; } .kf-pal-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .kf-pal-row.sel { background: var(--hl-yellow); } .kf-pal-icon { color: var(--accent); text-align: center; } .kf-pal-t { color: var(--ink-strong); font-size: 16px; } .kf-pal-sub { color: var(--ink-soft); font-size: 12px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kf-inbox-item { display: grid; grid-template-columns: 22px 1fr 24px; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px dashed rgba(90,70,40,.2); } .kf-inbox-item.done .kf-inbox-text { text-decoration: line-through; opacity: .55; } .kf-inbox-item.ready { background: rgba(110,139,61,.12); border-radius: 6px; } .kf-inbox-text { font-size: 16px; color: var(--ink-strong); } .kf-inbox-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; } .kf-x { border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 15px; } .kf-toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); z-index: 320; background: #2b2018; color: #f7eede; padding: 10px 18px; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,.4); opacity: 0; transition: opacity .25s, transform .25s; font-size: 15px; } .kf-toast.show { opacity: 1; transform: translate(-50%, 0); } .sync-pill { position: fixed; left: 16px; bottom: 14px; z-index: 40; font-size: 12px; color: var(--ink-soft); background: rgba(251,243,223,.9); border: 1px solid rgba(120,90,50,.3); border-radius: 14px; padding: 3px 10px; cursor: pointer; box-shadow: 1px 2px 4px rgba(0,0,0,.2); } .sync-pill.saving { color: var(--c-rust); } .sync-pill.synced { color: var(--c-olive); } .sync-pill.pulled { color: var(--c-teal); } .sync-pill.off { opacity: .6; } /* decisions / bets */ .dec-form { background: rgba(255,255,255,.4); border: 1.5px dashed rgba(120,90,50,.35); border-radius: 10px; padding: 14px 16px; margin: 12px 0 22px; } .dec-form .k { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .dec-inp, .dec-form textarea, .dec-form input { width: 100%; font-family: inherit; font-size: 16px; padding: 8px 10px; margin: 5px 0; border: 1px dashed rgba(120,90,50,.4); border-radius: 8px; background: rgba(255,255,255,.6); } .dec-row { display: flex; gap: 12px; } .dec-row > div { flex: 1; } .dec-sub { font-size: 12px; color: var(--ink-soft); margin-top: 6px; } .dec-card { background: var(--paper); border: 2px solid rgba(120,90,50,.25); border-left: 5px solid var(--accent); border-radius: 10px; padding: 14px 16px; margin: 12px 0; } .dec-card.killed { opacity: .6; border-left-color: var(--c-slate); } .dec-card.doubled { border-left-color: var(--c-olive); } .dec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .dec-title { font-size: 19px; color: var(--ink-strong); } .dec-badge { font-size: 11px; padding: 2px 9px; border-radius: 8px; color: #fff; background: var(--c-blue); } .dec-badge.doubled { background: var(--c-olive); } .dec-badge.killed { background: var(--c-slate); } .dec-line { font-size: 15px; margin: 7px 0; } .dec-line .dl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin-right: 6px; } .dec-line .dl.kill { color: var(--c-terracotta); } .dec-line .dl.go { color: var(--c-olive); } .dec-when { font-size: 14px; color: var(--ink-soft); margin-top: 8px; } .dec-when.due { color: var(--c-terracotta); } .due-banner { background: #fdeede; border: 2px solid var(--c-rust); border-radius: 10px; padding: 12px 16px; margin: 6px 0 14px; font-size: 16px; color: var(--ink-strong); } .due-link { margin-left: 6px; color: var(--c-rust); font-weight: bold; text-decoration: none; border-bottom: 2px dotted var(--c-rust); } mark.qhit { background: var(--hl-yellow); border-radius: 3px; transition: background 1.2s ease; } mark.qhit.fade { background: transparent; } @media (max-width: 760px) { .kf-fab { bottom: 72px; right: 16px; } .sync-pill { bottom: 64px; } }