/* ============================================================ E INK READER — stylesheet ------------------------------------------------------------ ★ TO CHANGE THE LOOK, EDIT THE BLOCK BELOW. ★ Everything else builds itself from these values. ============================================================ */ :root{ /* ---- PAPER TONE (the default theme) -------------------- */ --paper: #f5f2ec; /* page background */ --card: #fbf9f4; /* cards, panels */ --ink: #1e1e1c; /* main text */ --ink-soft: #55534d; /* secondary text */ --line: #ddd7ca; /* hairlines, borders */ --accent: #5f6f5c; /* sage green — links, chips */ --accent-2: #8e9d88; /* lighter sage */ --shell: #78876f; /* the device body colour */ /* ---- SHAPE ---------------------------------------------- */ --radius: 14px; --maxw: 1120px; /* ---- TYPE ------------------------------------------------ */ --font-ui: 'Nunito', system-ui, -apple-system, sans-serif; --font-read: 'EB Garamond', Georgia, 'Times New Roman', serif; --read-size: 1.02rem; /* reader body size — the Aa buttons change this */ --read-lead: 1.72; /* reader line height */ } /* ---- THE OTHER THREE THEMES ------------------------------- */ /* Click the theme dots in the status bar, or set the default with in every page. */ html[data-theme="sepia"]{ --paper:#f0e6d4; --card:#f8f0e1; --ink:#3a2d1c; --ink-soft:#6d5b41; --line:#dbc9a9; --accent:#8a6534; --accent-2:#b08a55; --shell:#9c7f56; } html[data-theme="slate"]{ --paper:#e8e9ea; --card:#f4f5f6; --ink:#1c1f22; --ink-soft:#565c62; --line:#d0d3d6; --accent:#3f4a54; --accent-2:#6d7a86; --shell:#5d666e; } html[data-theme="night"]{ --paper:#16181a; --card:#1e2124; --ink:#e6e3dc; --ink-soft:#9a968d; --line:#31353a; --accent:#a9bda3; --accent-2:#7d9077; --shell:#2b3033; } /* ============================================================ BASE ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font-ui); background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .25s, color .25s; } /* paper grain — delete these 5 lines for a perfectly flat background */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.3;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } html[data-theme="night"] body::before{mix-blend-mode:screen;opacity:.06} img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} /* e-ink refresh flash — added by layout.js on every page load */ .eink-flash{ position:fixed;inset:0;background:var(--ink);z-index:9999; pointer-events:none;animation:einkFlash .42s steps(3) forwards; } @keyframes einkFlash{0%{opacity:.9}55%{opacity:.75}100%{opacity:0}} /* ============================================================ STATUS BAR (the e-reader strip at the very top) ============================================================ */ .statusbar{ position:sticky;top:0;z-index:60; background:var(--card);border-bottom:1px solid var(--line); font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--ink-soft); } .statusbar .wrap{display:flex;align-items:center;gap:14px;height:34px} .sb-right{margin-left:auto;display:flex;align-items:center;gap:12px} .themes{display:flex;gap:6px} .themes button{ width:14px;height:14px;border-radius:50%;cursor:pointer;padding:0; border:1.5px solid var(--line);transition:transform .15s; } .themes button:hover{transform:scale(1.18)} .themes button[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px} .battery{display:inline-flex;align-items:center;gap:5px} .battery i{ width:20px;height:10px;border:1.4px solid currentColor;border-radius:2px; position:relative;display:inline-block; } .battery i::after{content:"";position:absolute;right:-4px;top:2.5px;width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0} .battery i b{position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:64%;background:currentColor;display:block;border-radius:1px} /* ============================================================ MASTHEAD + NAV ============================================================ */ .masthead{padding:46px 0 28px;text-align:center} .masthead .mark{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; font-weight:800;font-size:1.9rem;letter-spacing:-.03em; } .masthead .mark svg{width:26px;height:26px;stroke:var(--accent)} .masthead .tagline{ font-family:var(--font-read);font-style:italic;color:var(--ink-soft); font-size:1.05rem;margin-top:6px; } .nav{ position:sticky;top:34px;z-index:55; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line);border-bottom:1px solid var(--line); margin-bottom:44px; } .nav .wrap{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding-top:0;padding-bottom:0} .nav a{ text-decoration:none;font-weight:700;font-size:.86rem;color:var(--ink-soft); padding:13px 15px;border-bottom:2px solid transparent;transition:.18s; } .nav a:hover{color:var(--ink)} .nav a.on{color:var(--ink);border-bottom-color:var(--accent)} /* ============================================================ SHARED BITS ============================================================ */ .eyebrow{ display:inline-flex;align-items:center;gap:7px; font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);background:var(--card); border:1px solid var(--line);border-radius:999px;padding:6px 14px; } .page-head{max-width:640px;margin:0 auto 44px;text-align:center} .page-head h1{ font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.035em;line-height:1.08; font-weight:800;margin:16px 0 12px; } .page-head h1 em, h2 em{font-family:var(--font-read);font-style:italic;font-weight:400;color:var(--accent)} .page-head p{color:var(--ink-soft);font-size:1.02rem} h2{font-size:1.6rem;letter-spacing:-.025em;font-weight:800;line-height:1.15} .sec-title{ display:flex;align-items:center;gap:14px;margin:0 0 22px; font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent); } .sec-title::after{content:"";flex:1;height:1px;background:var(--line)} .btn{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; background:var(--ink);color:var(--paper);border:1.5px solid var(--ink); border-radius:999px;padding:11px 22px;text-decoration:none; font-family:inherit;font-weight:700;font-size:.88rem; transition:transform .18s, background .18s; } .btn:hover{transform:translateY(-2px);background:var(--accent);border-color:var(--accent)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn.ghost:hover{background:var(--card);border-color:var(--accent);color:var(--ink)} .chip{ border:1.5px solid var(--line);background:var(--card);border-radius:999px; padding:7px 14px;font-family:inherit;font-size:.78rem;font-weight:700; color:var(--ink-soft);cursor:pointer;transition:.18s; } .chip:hover{border-color:var(--accent);color:var(--accent)} .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* ============================================================ DEVICE MOCKUP (used on the home page) ============================================================ */ .device{ width:296px;margin:0 auto;position:relative; border-radius:26px;padding:13px 13px 30px; background:linear-gradient(150deg, color-mix(in srgb, var(--shell) 78%, #fff), var(--shell) 55%, color-mix(in srgb, var(--shell) 80%, #000)); box-shadow:0 26px 60px -22px rgba(35,40,32,.5), inset 0 1px 0 rgba(255,255,255,.3); } .device::after{content:"";position:absolute;right:-3px;top:76px;width:4px;height:44px;background:#c05b45;border-radius:3px} .device .screen{ background:color-mix(in srgb, var(--card) 92%, var(--ink) 3%); border-radius:12px;padding:20px 18px 14px;min-height:412px; display:flex;flex-direction:column;overflow:hidden;position:relative; box-shadow:inset 0 0 0 1px rgba(0,0,0,.09), inset 0 2px 12px rgba(0,0,0,.05); } .device .pagefoot{ margin-top:auto;padding-top:12px;display:flex;justify-content:space-between; font-family:var(--font-read);font-size:.66rem;color:var(--ink-soft); } /* ============================================================ READING TYPE (the book text itself) ============================================================ */ .prose{ font-family:var(--font-read); font-size:var(--read-size); line-height:var(--read-lead); color:var(--ink); text-align:justify; hyphens:auto; } .prose p+p{text-indent:1.3em;margin-top:0} .prose p{margin-bottom:0} .prose h2{ font-family:var(--font-read);font-weight:500;font-style:italic; font-size:1.5em;letter-spacing:0;margin:1.6em 0 .5em;text-align:left; } .prose blockquote{ border-left:2px solid var(--accent);padding-left:18px;margin:1.5em 0; font-style:italic;color:var(--ink-soft);text-align:left;text-indent:0; } .prose .dropcap::first-letter{ float:left;font-size:3.3em;line-height:.86;padding:.06em .1em 0 0;font-weight:500; } .prose mark{background:color-mix(in srgb, var(--accent) 22%, transparent);color:inherit;padding:.05em 0} /* ============================================================ HOME ============================================================ */ .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;margin-bottom:80px} .hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem);letter-spacing:-.038em;line-height:1.04;font-weight:800;margin:20px 0 16px} .hero h1 em{font-family:var(--font-read);font-style:italic;font-weight:400;color:var(--accent)} .hero .lede{color:var(--ink-soft);font-size:1.06rem;max-width:44ch;margin-bottom:26px} .hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:30px} .stats{display:flex;gap:30px;flex-wrap:wrap} .stats div b{display:block;font-size:1.4rem;letter-spacing:-.02em} .stats div span{font-size:.8rem;color:var(--ink-soft);font-weight:700} /* now-reading strip */ .now{ display:grid;grid-template-columns:76px 1fr auto;gap:20px;align-items:center; background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:20px 22px;margin-bottom:14px; } .now .cover{aspect-ratio:2/3;border-radius:3px 7px 7px 3px;border-left:4px solid rgba(0,0,0,.16);box-shadow:0 8px 20px -10px rgba(0,0,0,.4)} .now h3{font-family:var(--font-read);font-size:1.3rem;font-weight:500;line-height:1.2} .now .by{font-size:.82rem;color:var(--ink-soft);font-weight:700;margin-bottom:10px} .bar{height:5px;background:var(--line);border-radius:99px;overflow:hidden} .bar i{display:block;height:100%;background:var(--accent);border-radius:99px} .pct{font-size:.74rem;color:var(--ink-soft);font-weight:700;margin-top:7px} /* ============================================================ LIBRARY / SHELF ============================================================ */ .shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:28px} .bookcard{text-decoration:none;display:block} .bookcard .cover{ aspect-ratio:2/3;border-radius:3px 9px 9px 3px;padding:20px 15px; display:flex;flex-direction:column;justify-content:space-between; border-left:5px solid rgba(0,0,0,.17); box-shadow:0 16px 34px -18px rgba(0,0,0,.55); transition:transform .3s; } .bookcard:hover .cover{transform:translateY(-8px) rotate(-1.2deg)} .bookcard .cover span{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.65;color:#1e1e1c} .bookcard .cover h3{font-family:var(--font-read);font-size:1.02rem;font-weight:500;line-height:1.22;color:#1e1e1c} .bookcard .cover em{display:block;font-family:var(--font-read);font-size:.78rem;color:#1e1e1c;opacity:.6;margin-top:5px} .bookcard .cover .orn{display:flex;flex-direction:column;gap:3px;opacity:.28} .bookcard .cover .orn i{display:block;height:1px;background:#1e1e1c} .bookcard .cover .orn i:last-child{width:60%} .bookcard .meta{margin-top:13px} .bookcard .meta b{display:block;font-size:.88rem;font-weight:700;letter-spacing:-.01em} .bookcard .meta span{font-size:.76rem;color:var(--ink-soft);font-weight:700} .bookcard .bar{margin-top:9px} .filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:38px} /* ============================================================ READER PAGE ============================================================ */ .reader-shell{max-width:720px;margin:0 auto} .reader-toolbar{ display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center; background:var(--card);border:1px solid var(--line);border-radius:999px; padding:9px 12px;margin-bottom:40px;position:sticky;top:80px;z-index:40; } .reader-toolbar .sep{width:1px;height:20px;background:var(--line);margin:0 4px} .reader-title{text-align:center;margin-bottom:34px} .reader-title .by{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .reader-title h1{font-family:var(--font-read);font-weight:400;font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.15;margin:10px 0} .reader-page{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:clamp(28px,5vw,60px);box-shadow:0 20px 50px -34px rgba(0,0,0,.5); } .turner{display:flex;justify-content:space-between;align-items:center;margin-top:30px;gap:14px} .turner .count{font-family:var(--font-read);font-size:.9rem;color:var(--ink-soft)} /* ============================================================ HIGHLIGHTS ============================================================ */ .quotes{columns:2;column-gap:26px} .quote{ break-inside:avoid;margin-bottom:26px; background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:4px var(--radius) var(--radius) 4px;padding:26px 28px; } .quote p{font-family:var(--font-read);font-size:1.12rem;line-height:1.6;font-style:italic;margin-bottom:14px} .quote .src{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)} .quote .src b{color:var(--accent)} /* ============================================================ NOTES ============================================================ */ .notes{display:grid;gap:2px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .note{ background:var(--card);padding:24px 26px;display:grid; grid-template-columns:110px 1fr;gap:24px;align-items:start; border-bottom:1px solid var(--line); } .note:last-child{border-bottom:none} .note .when{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-top:4px} .note h3{font-family:var(--font-read);font-size:1.24rem;font-weight:500;margin-bottom:7px} .note p{color:var(--ink-soft);font-size:.94rem} .note .tags{margin-top:11px;display:flex;gap:7px;flex-wrap:wrap} .note .tags span{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);border-radius:99px;padding:3px 10px} /* ============================================================ ABOUT ============================================================ */ .about{display:grid;grid-template-columns:1fr 1.25fr;gap:52px;align-items:start} .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px} .stat-rows{border-top:1px solid var(--line)} .stat-rows div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:.92rem} .stat-rows div span{color:var(--ink-soft);font-weight:700} .stat-rows div b{font-weight:800} .year-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13px,1fr));gap:5px;margin-top:6px} .year-grid i{aspect-ratio:1;border-radius:2px;background:var(--line)} .year-grid i.r1{background:color-mix(in srgb, var(--accent) 35%, var(--line))} .year-grid i.r2{background:color-mix(in srgb, var(--accent) 65%, var(--line))} .year-grid i.r3{background:var(--accent)} /* ============================================================ CONTACT ============================================================ */ .form{display:grid;gap:16px;max-width:560px;margin:0 auto} .form label{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:7px} .form input,.form textarea,.form select{ width:100%;font-family:inherit;font-size:.96rem;color:var(--ink); background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:13px 15px; } .form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent)} .form textarea{min-height:150px;resize:vertical;font-family:var(--font-read);font-size:1rem} .form-note{font-size:.86rem;color:var(--ink-soft);text-align:center;margin-top:6px} .sent{background:var(--card);border:1.5px solid var(--accent);border-radius:var(--radius);padding:18px;text-align:center;font-weight:700;display:none} .faq{max-width:640px;margin:70px auto 0} .faq details{border-bottom:1px solid var(--line);padding:18px 0} .faq summary{cursor:pointer;font-weight:800;font-size:1rem;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"+ ";color:var(--accent);font-weight:800} .faq details[open] summary::before{content:"– "} .faq p{color:var(--ink-soft);font-size:.94rem;margin-top:10px} /* ============================================================ FOOTER ============================================================ */ .foot{border-top:1px solid var(--line);margin-top:96px;padding:44px 0 40px} .foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-soft);font-weight:700} .foot a{text-decoration:none} .foot a:hover{color:var(--accent)} main{min-height:50vh} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:900px){ .hero,.about{grid-template-columns:1fr;gap:40px} .quotes{columns:1} .note{grid-template-columns:1fr;gap:8px} .now{grid-template-columns:60px 1fr;gap:16px} .now .btn{grid-column:1/-1} } @media(max-width:560px){ .wrap{padding:0 18px} .nav .wrap{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap} .nav a{white-space:nowrap;padding:12px 11px} .shelf{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:20px} .statusbar .wrap{gap:10px} .sb-left-extra{display:none} }