/* ============================================================= Het Gripcare Protocol — e-book stijl (Modern Stoïcijn) Alles gescoped onder .gc-ebook zodat het veilig embedt op een bestaande website zonder conflicten. ============================================================= */ /* Tokens — gedeeld met huisstijl */ .gc-ebook{ --gc-page:#ECE6DC; /* perkament */ --gc-paper:#F4F0E6; /* lichter perkament voor cards */ --gc-ink:#1A1816; /* warme inkt */ --gc-ink-soft:#2A2520; --gc-stone:#3A352E; --gc-mono:#7A736A; /* secundair / labels */ --gc-rule:#1A18161A; /* subtiele lijnen */ --gc-rule-strong:#1A181633; --gc-sand:#C9BFAE; --gc-copper:#B5613A; /* accentkleur — spaarzaam */ --gc-serif:"Fraunces", Georgia, serif; --gc-sans:"Inter Tight", -apple-system, system-ui, sans-serif; --gc-mono-font:"JetBrains Mono", ui-monospace, "SF Mono", monospace; --gc-measure:64ch; } /* Reset binnen container */ .gc-ebook, .gc-ebook *, .gc-ebook *::before, .gc-ebook *::after{ box-sizing:border-box; } /* Body-style alleen toepassen wanneer .gc-ebook op zit (standalone-modus). In embed-modus blijft de host-pagina intact. */ body.gc-ebook{ margin:0; background:var(--gc-page); color:var(--gc-ink); font-family:var(--gc-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* In embed-modus: zelfde achtergrond op de root container */ .gc-ebook-root{ background:var(--gc-page); color:var(--gc-ink); font-family:var(--gc-sans); font-size:17px; line-height:1.6; } /* ===================== LAYOUT ===================== */ .gc-ebook .gc-shell{ max-width:1280px; margin:0 auto; padding:0 clamp(20px, 5vw, 64px); } .gc-ebook .gc-cover{ padding:clamp(80px, 14vw, 160px) 0 clamp(60px, 10vw, 120px); border-bottom:1px solid var(--gc-rule); } .gc-ebook .gc-eyebrow{ font-family:var(--gc-mono-font); font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--gc-mono); margin:0; } .gc-ebook .gc-cover h1{ font-family:var(--gc-serif); font-weight:300; font-size:clamp(48px, 9vw, 128px); line-height:0.95; letter-spacing:-0.035em; margin:24px 0 0; color:var(--gc-ink); max-width:14ch; text-wrap:balance; } .gc-ebook .gc-cover h1 em{ font-style:italic; font-weight:300; } .gc-ebook .gc-cover .gc-sub{ font-family:var(--gc-serif); font-style:italic; font-weight:300; font-size:clamp(20px, 2.4vw, 28px); line-height:1.35; color:var(--gc-ink-soft); margin:32px 0 0; max-width:42ch; letter-spacing:-0.01em; } .gc-ebook .gc-cover-meta{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; margin-top:80px; padding-top:32px; border-top:1px solid var(--gc-rule); } .gc-ebook .gc-cover-meta div h4{ font-family:var(--gc-mono-font); font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--gc-mono); margin:0 0 10px; } .gc-ebook .gc-cover-meta div p{ margin:0; font-size:14px; line-height:1.5; color:var(--gc-ink-soft); } @media (max-width: 720px){ .gc-ebook .gc-cover-meta{ grid-template-columns:repeat(2, 1fr); gap:24px; } } /* ===================== TOC ===================== */ .gc-ebook .gc-toc{ padding:clamp(60px, 10vw, 120px) 0; border-bottom:1px solid var(--gc-rule); } .gc-ebook .gc-toc-head{ display:grid; grid-template-columns:180px 1fr; gap:48px; margin-bottom:48px; align-items:baseline; } .gc-ebook .gc-toc-head h2{ font-family:var(--gc-serif); font-weight:300; font-size:clamp(32px, 4vw, 48px); line-height:1; letter-spacing:-0.025em; margin:0; } .gc-ebook .gc-toc-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--gc-rule); } .gc-ebook .gc-toc-list li{ display:grid; grid-template-columns:80px 1fr auto; gap:24px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--gc-rule); } .gc-ebook .gc-toc-list .gc-toc-num{ font-family:var(--gc-mono-font); font-size:12px; letter-spacing:0.14em; color:var(--gc-mono); } .gc-ebook .gc-toc-list a{ font-family:var(--gc-serif); font-weight:300; font-size:clamp(20px, 2.2vw, 26px); line-height:1.25; letter-spacing:-0.015em; color:var(--gc-ink); text-decoration:none; transition:color .2s ease; } .gc-ebook .gc-toc-list a:hover{ color:var(--gc-copper); } .gc-ebook .gc-toc-list .gc-toc-page{ font-family:var(--gc-mono-font); font-size:11px; letter-spacing:0.14em; color:var(--gc-mono); } @media (max-width: 720px){ .gc-ebook .gc-toc-head{ grid-template-columns:1fr; gap:16px; } .gc-ebook .gc-toc-list li{ grid-template-columns:48px 1fr; gap:16px; } .gc-ebook .gc-toc-list .gc-toc-page{ display:none; } } /* ===================== DISCLAIMER ===================== */ .gc-ebook .gc-disclaimer{ padding:clamp(48px, 8vw, 96px) 0; border-bottom:1px solid var(--gc-rule); } .gc-ebook .gc-disclaimer-inner{ display:grid; grid-template-columns:180px 1fr; gap:48px; align-items:start; } .gc-ebook .gc-disclaimer .gc-eyebrow{ margin-top:6px; } .gc-ebook .gc-disclaimer p{ font-size:14px; line-height:1.6; color:var(--gc-ink-soft); max-width:62ch; margin:0; } @media (max-width: 720px){ .gc-ebook .gc-disclaimer-inner{ grid-template-columns:1fr; gap:16px; } } /* ===================== CHAPTERS ===================== */ .gc-ebook .gc-chapter{ padding:clamp(72px, 12vw, 140px) 0; border-bottom:1px solid var(--gc-rule); } .gc-ebook .gc-chapter:last-of-type{ border-bottom:0; } .gc-ebook .gc-chapter-head{ display:grid; grid-template-columns:180px 1fr; gap:48px; margin-bottom:64px; align-items:baseline; } .gc-ebook .gc-chapter-num{ font-family:var(--gc-mono-font); font-size:12px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--gc-mono); } .gc-ebook .gc-chapter-head h2{ font-family:var(--gc-serif); font-weight:300; font-size:clamp(36px, 5.2vw, 64px); line-height:1; letter-spacing:-0.025em; margin:0; color:var(--gc-ink); text-wrap:balance; } .gc-ebook .gc-chapter-head h2 em{ font-style:italic; } .gc-ebook .gc-chapter-body{ display:grid; grid-template-columns:180px minmax(0, 1fr); gap:48px; } .gc-ebook .gc-chapter-body > .gc-spacer{ /* gutter — leeg, geeft de body een mooie indent */ } .gc-ebook .gc-chapter-body > .gc-prose{ max-width:var(--gc-measure); } @media (max-width: 880px){ .gc-ebook .gc-chapter-head{ grid-template-columns:1fr; gap:16px; } .gc-ebook .gc-chapter-body{ grid-template-columns:1fr; gap:0; } } /* ===================== PROSE ===================== */ .gc-ebook .gc-prose{ font-family:var(--gc-sans); font-size:17px; line-height:1.65; color:var(--gc-ink-soft); } .gc-ebook .gc-prose p{ margin:0 0 1.1em; } .gc-ebook .gc-prose .lead{ font-family:var(--gc-serif); font-weight:300; font-style:italic; font-size:clamp(22px, 2.6vw, 28px); line-height:1.4; letter-spacing:-0.01em; color:var(--gc-ink); margin:0 0 1.4em; max-width:38ch; } .gc-ebook .gc-prose h3{ font-family:var(--gc-serif); font-weight:300; font-size:clamp(24px, 2.6vw, 32px); line-height:1.15; letter-spacing:-0.02em; color:var(--gc-ink); margin:2.2em 0 0.6em; } .gc-ebook .gc-prose h3 em{ font-style:italic; } .gc-ebook .gc-prose h4{ font-family:var(--gc-mono-font); font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--gc-mono); margin:2em 0 0.8em; } .gc-ebook .gc-prose em{ font-style:italic; } .gc-ebook .gc-prose strong, .gc-ebook .gc-prose b{ font-weight:600; color:var(--gc-ink); } .gc-ebook .gc-prose a{ color:var(--gc-copper); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .gc-ebook .gc-prose a:hover{ text-decoration-thickness:2px; } .gc-ebook .gc-prose ul, .gc-ebook .gc-prose ol{ margin:0 0 1.4em; padding:0; list-style:none; } .gc-ebook .gc-prose li{ position:relative; padding-left:28px; margin:0 0 0.6em; line-height:1.6; } .gc-ebook .gc-prose ul.dash li::before{ content:""; position:absolute; left:0; top:0.7em; width:14px; height:1px; background:var(--gc-stone); } .gc-ebook .gc-prose ol.num{ counter-reset:gcli; } .gc-ebook .gc-prose ol.num li{ counter-increment:gcli; padding-left:42px; } .gc-ebook .gc-prose ol.num li::before{ content:counter(gcli, decimal-leading-zero); position:absolute; left:0; top:0.15em; font-family:var(--gc-mono-font); font-size:11px; letter-spacing:0.1em; color:var(--gc-copper); font-weight:500; } /* Pullquote */ .gc-ebook .gc-prose .pullquote{ font-family:var(--gc-serif); font-weight:300; font-style:italic; font-size:clamp(24px, 3.2vw, 36px); line-height:1.25; letter-spacing:-0.015em; color:var(--gc-ink); margin:1.6em 0; padding:0.4em 0 0.4em 28px; border-left:1px solid var(--gc-copper); max-width:30ch; } /* Tables */ .gc-ebook .gc-prose table.data{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:14px; background:var(--gc-paper); border:1px solid var(--gc-rule); } .gc-ebook .gc-prose table.data th, .gc-ebook .gc-prose table.data td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--gc-rule); vertical-align:top; line-height:1.5; } .gc-ebook .gc-prose table.data thead th{ font-family:var(--gc-mono-font); font-size:10px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--gc-mono); background:transparent; border-bottom:1px solid var(--gc-rule-strong); } .gc-ebook .gc-prose table.data tbody tr:last-child td{ border-bottom:0; } .gc-ebook .gc-prose table.data td:first-child{ font-weight:500; color:var(--gc-ink); } /* Aside / Takeaways */ .gc-ebook .gc-prose aside.takeaways{ margin:2.2em 0 0; padding:32px 36px; background:var(--gc-ink); color:var(--gc-page); border-radius:2px; } .gc-ebook .gc-prose aside.takeaways .ta-label{ font-family:var(--gc-mono-font); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gc-sand); margin-bottom:18px; } .gc-ebook .gc-prose aside.takeaways ol{ margin:0; padding:0; list-style:none; counter-reset:tali; } .gc-ebook .gc-prose aside.takeaways ol li{ counter-increment:tali; padding-left:42px; margin:0 0 12px; font-family:var(--gc-serif); font-weight:300; font-size:18px; line-height:1.4; letter-spacing:-0.01em; color:var(--gc-page); } .gc-ebook .gc-prose aside.takeaways ol li:last-child{ margin-bottom:0; } .gc-ebook .gc-prose aside.takeaways ol li::before{ content:counter(tali, decimal-leading-zero); position:absolute; left:0; top:0.25em; font-family:var(--gc-mono-font); font-size:11px; letter-spacing:0.1em; color:var(--gc-copper); font-weight:500; } /* Foreword sign-off */ .gc-ebook .gc-prose .signoff{ font-family:var(--gc-serif); font-style:italic; font-weight:300; font-size:22px; line-height:1.4; letter-spacing:-0.01em; color:var(--gc-ink); margin-top:2em; } .gc-ebook .gc-prose .signoff .sig{ display:inline-block; font-family:var(--gc-mono-font); font-style:normal; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gc-mono); margin-top:8px; } /* ===================== CLOSER + COLOPHON ===================== */ .gc-ebook .gc-closer{ padding:clamp(80px, 14vw, 160px) 0 clamp(60px, 10vw, 120px); border-bottom:1px solid var(--gc-rule); } .gc-ebook .gc-closer-grid{ display:grid; grid-template-columns:180px 1fr; gap:48px; } .gc-ebook .gc-closer h2{ font-family:var(--gc-serif); font-weight:300; font-size:clamp(36px, 5.2vw, 64px); line-height:1; letter-spacing:-0.025em; margin:0 0 32px; } .gc-ebook .gc-closer h2 em{ font-style:italic; } .gc-ebook .gc-cta{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; padding-top:32px; border-top:1px solid var(--gc-rule); } .gc-ebook .gc-cta-card{ padding:32px; background:var(--gc-paper); border:1px solid var(--gc-rule); display:flex; flex-direction:column; } .gc-ebook .gc-cta-card .gc-eyebrow{ margin-bottom:12px; } .gc-ebook .gc-cta-card h4{ font-family:var(--gc-serif); font-weight:300; font-size:24px; line-height:1.2; letter-spacing:-0.015em; margin:0 0 8px; color:var(--gc-ink); } .gc-ebook .gc-cta-card p{ margin:0 0 20px; font-size:14px; line-height:1.5; color:var(--gc-ink-soft); } .gc-ebook .gc-cta-card .gc-btn{ margin-top:auto; align-self:flex-start; display:inline-block; padding:12px 22px; background:var(--gc-ink); color:var(--gc-page); text-decoration:none; font-family:var(--gc-mono-font); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:500; transition:background .2s ease; } .gc-ebook .gc-cta-card .gc-btn:hover{ background:var(--gc-copper); } .gc-ebook .gc-cta-card .gc-btn.ghost{ background:transparent; color:var(--gc-ink); border:1px solid var(--gc-ink); } .gc-ebook .gc-cta-card .gc-btn.ghost:hover{ background:var(--gc-ink); color:var(--gc-page); } @media (max-width: 720px){ .gc-ebook .gc-closer-grid{ grid-template-columns:1fr; gap:16px; } .gc-ebook .gc-cta{ grid-template-columns:1fr; } } .gc-ebook .gc-colophon{ padding:48px 0 64px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-family:var(--gc-mono-font); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gc-mono); } .gc-ebook .gc-colophon a{ color:var(--gc-mono); text-decoration:none; } .gc-ebook .gc-colophon a:hover{ color:var(--gc-ink); } /* ===================== READING PROGRESS ===================== */ .gc-ebook .gc-progress{ position:sticky; top:0; height:2px; background:transparent; z-index:5; } .gc-ebook .gc-progress-bar{ height:100%; background:var(--gc-copper); width:0%; transition:width 0.1s linear; } /* Smooth scrolling */ html{ scroll-behavior:smooth; } /* ===================== PRINT ===================== */ @page{ size: A4; margin: 18mm 16mm 20mm 16mm; } @media print{ body.gc-ebook, .gc-ebook-root{ background:#fff !important; color:#000 !important; } /* Hide chrome that doesn't belong in print */ .gc-ebook .gc-progress, .gc-ebook .gc-cta, .gc-ebook .gc-colophon{ display:none !important; } /* Cover stays on first page, no page break before it */ .gc-ebook .gc-cover{ break-before: avoid !important; page-break-before: avoid !important; padding: 0 !important; min-height: auto !important; } /* Chapter starts on new page, but no leading blank page */ .gc-ebook .gc-chapter{ break-before: page; page-break-before: always; padding: 0 !important; } .gc-ebook .gc-chapter:first-of-type{ break-before: avoid; page-break-before: avoid; } /* TOC and disclaimer flow inline (no forced break) */ .gc-ebook .gc-toc, .gc-ebook .gc-disclaimer{ break-before: auto; page-break-before: auto; padding: 24px 0 !important; } /* Avoid breaking inside critical blocks */ .gc-ebook .gc-prose h3, .gc-ebook .gc-prose h4{ break-after: avoid; page-break-after: avoid; } .gc-ebook .gc-prose aside.takeaways, .gc-ebook .gc-prose table.data, .gc-ebook .gc-prose .pullquote, .gc-ebook .gc-prose ul, .gc-ebook .gc-prose ol{ break-inside: avoid; page-break-inside: avoid; } .gc-ebook .gc-prose p, .gc-ebook .gc-prose li{ orphans: 3; widows: 3; } /* Print-friendly typography */ .gc-ebook{ font-size: 11pt; line-height: 1.5; } .gc-ebook .gc-cover h1{ font-size: 48pt; } .gc-ebook h2{ font-size: 22pt; } .gc-ebook h3{ font-size: 14pt; } .gc-ebook h4{ font-size: 12pt; } /* Hyperlinks subtle in print */ .gc-ebook a{ color: #000; text-decoration: underline; } /* Takeaway box keeps light tint */ .gc-ebook .gc-prose aside.takeaways{ background:#f4f0e6 !important; color:#000 !important; } .gc-ebook .gc-prose aside.takeaways ol li{ color:#000 !important; } /* Prevent horizontal overflow */ .gc-ebook *{ max-width: 100% !important; } }