/* LifeSoulutions theme · the site is a book on a desk (from the approved r3 design, without its ruled lines). The type keeps the rhythm of the r3 notebook, though no rule is drawn any more: one row is --lh tall and its baseline sits --rule from the top of the row. Each text block keeps whole rows and is shifted by its own font metrics, so its baselines keep to the rows: (ascent - descent) / 2 is .3825 em for Ysabeau Office (1054/-289) and .435 em for Literata (1180/-310); hhea and typo metrics match, so every platform agrees. Without JS (data-mode="static") every page is a normal block in reading order. */ @property --fs { syntax: ''; inherits: true; initial-value: 17px; } @property --lh { syntax: ''; inherits: true; initial-value: 27px; } @property --rule { syntax: ''; inherits: true; initial-value: 20px; } @property --k { syntax: ''; inherits: false; initial-value: .3825; } @property --m { syntax: ''; inherits: false; initial-value: 1; } @property --j { syntax: ''; inherits: false; initial-value: 0; } @property --asc { syntax: ''; inherits: false; initial-value: 1.054; } @property --desc { syntax: ''; inherits: false; initial-value: .289; } body[data-concept="notebook"] { --body-font-family: 'Ysabeau Office', 'Segoe UI', Arial, sans-serif; --ls-display: 'Literata', Georgia, serif; --body-font-size: 18px; --ls-header-height: 64px; --ls-footer-bg: transparent; --ls-footer-ink: var(--ls-navy); --nb-desk: #e6dfd3; --nb-paper: #fbf8f2; --nb-endpaper: #ece6db; --nb-rule: rgb(14 57 91 / .17); --nb-margin: rgb(120 100 88 / .55); --nb-board: #e3d6c8; --nb-board-deep: #d7c7b5; --nb-k-body: .3825; --nb-k-display: .435; --nb-turn: 44px; /* Buttons: plain navy pills (finish.css overrides these tokens). */ --button-background-color: transparent; --button-color: var(--ls-navy); --button-border-color: var(--ls-navy); --button-border-width: 1.5px; --button-border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; --button-hover-background-color: transparent; --button-hover-color: var(--ls-navy); --button-hover-border-color: var(--ls-navy); background: var(--nb-desk); } /* ---------------------------------------------------------------- pages, every mode */ .nb-face { position: relative; } .nb-paper { background: var(--nb-paper); color: var(--ls-ink); } .nb-page { --fs: 17px; --lh: calc(var(--fs) * 1.6); --rule: calc(var(--lh) / 2 + var(--nb-k-body) * var(--fs)); font-size: var(--fs); font-size-adjust: none; line-height: var(--lh); padding: calc(var(--lh) * 2) 8% calc(var(--lh) * 2) calc(11% + 1.1em); background: linear-gradient(90deg, transparent calc(11% - .5px), var(--nb-margin) calc(11% - .5px) calc(11% + .5px), transparent calc(11% + .5px)) 0 0 / 100% 100% no-repeat local, linear-gradient(var(--nb-rule) 0 1px, transparent 1px) 0 var(--rule) / 100% var(--lh) repeat-y local; } .nb-page { --row-base: calc(var(--lh) / 2 + .3825em); } @supports (width: round(1.5px, 1px)) { /* Text layout rounds ascent and descent to whole pixels and floors the half-leading (Blink, WebKit); the rules and every shift below use the same rounding, so baselines and rules meet on the same pixel. */ .nb-page { --lh: round(down, calc(var(--fs) * 1.6), 1px); --rule: calc(round(calc(1.054 * var(--fs)), 1px) + round(down, calc((var(--lh) - round(calc(1.054 * var(--fs)), 1px) - round(calc(.289 * var(--fs)), 1px)) / 2), 1px)); --row-base: calc(round(1.054em, 1px) + round(down, calc((var(--lh) - round(1.054em, 1px) - round(.289em, 1px)) / 2), 1px)); } } .nb-endpaper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px 12%; background: var(--nb-endpaper); } body[data-concept="notebook"] .nb-frontis { max-width: 24em; margin: 0; font-family: var(--ls-display); font-size: clamp(15px, 2.6cqi, 19px); font-style: italic; line-height: 1.55; color: var(--ls-navy); text-align: center; text-wrap: balance; } /* Baseline snap: whole rows per line (--m), the row that carries the baseline (--j), the font's metric (--k). */ body[data-concept="notebook"] .nb-page :is(h1, h2, h3, p, dt, dd, .nb-toc a, .c-topic-index > li, .c-filter-bar > *, .ls-actions > *, .nb-prose li, .nb-form :is(.c-field > label, .wpcf7-form-control-wrap, .c-submit, .wpcf7-response-output)) { position: relative; line-height: calc(var(--m) * var(--lh)); top: calc(var(--rule) + var(--j) * var(--lh) - var(--m) * var(--lh) / 2 - var(--k) * 1em); } @supports (width: round(1.5px, 1px)) { body[data-concept="notebook"] .nb-page :is(h1, h2, h3, p, dt, dd, .nb-toc a, .c-topic-index > li, .c-filter-bar > *, .ls-actions > *, .nb-prose li, .nb-form :is(.c-field > label, .wpcf7-form-control-wrap, .c-submit, .wpcf7-response-output)) { top: calc(var(--rule) + var(--j) * var(--lh) - round(calc(var(--asc) * 1em), 1px) - round(down, calc((var(--m) * var(--lh) - round(calc(var(--asc) * 1em), 1px) - round(calc(var(--desc) * 1em), 1px)) / 2), 1px)); } } body[data-concept="notebook"] .nb-page :is(p, ul, ol, dl, blockquote, figure) { margin-block: 0 var(--lh); } body[data-concept="notebook"] .nb-page :is(h1, h2, h3) { --k: var(--nb-k-display); --asc: 1.18; --desc: .31; color: var(--ls-navy); letter-spacing: -0.005em; text-wrap: balance; } body[data-concept="notebook"] .nb-page h1 { --m: 2; --j: 1; margin: 0 0 var(--lh); font-size: 2.15em; font-weight: 400; } body[data-concept="notebook"] .nb-page .nb-title { --m: 2; --j: 1; margin: 0 0 var(--lh); font-size: 1.6em; font-weight: 400; } body[data-concept="notebook"] .nb-page .nb-title:focus { outline: none; } body[data-concept="notebook"] .nb-page h3 { margin: 0; font-size: 1.025em; font-weight: 500; } body[data-concept="notebook"] .nb-page :is(ul, ol) { padding: 0; list-style: none; } /* Buttons on a page: the label sits on the line. */ body[data-concept="notebook"] .nb-page .button { --button-font-size: 1em; --button-font-weight: 500; --button-padding: 0 1.2em; display: flex; width: fit-content; align-items: baseline; height: var(--lh); min-height: 0; line-height: var(--lh); border-width: 0; --button-border-width: 0; box-shadow: 0 0 0 1.5px currentColor; } body[data-concept="notebook"] .nb-page .ls-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--lh) 1.7em; margin: 0; } body[data-concept="notebook"] .nb-page .ls-actions .ls-more { height: var(--lh); min-height: 0; align-items: baseline; gap: 12px; font-size: .94em; font-style: italic; } body[data-concept="notebook"] .nb-page .ls-line-arrow { top: -.3em; } /* Contents on the inside cover. */ .nb-toc { margin-bottom: var(--lh); } body[data-concept="notebook"] .nb-toc a { --k: var(--nb-k-display); --asc: 1.18; --desc: .31; display: flex; align-items: last baseline; gap: .8em; color: var(--ls-navy); font-family: var(--ls-display); font-size: .99em; } .nb-toc a:hover .nb-toc-label { text-decoration: underline 1px; text-underline-offset: 0; } .nb-toc .c-leader { position: relative; top: -.2em; flex: 1 1 1.5em; min-width: 1.5em; border-bottom: 2px dotted rgb(120 100 88 / .6); } /* Philosophy, quotes. */ body[data-concept="notebook"] .c-first { font-size: 1.08em; } .nb-quote { margin-inline: 0; padding: 0; } body[data-concept="notebook"] .nb-quote p { --k: var(--nb-k-display); --asc: 1.18; --desc: .31; margin: 0; font-family: var(--ls-display); font-size: 1.21em; font-style: italic; color: var(--ls-navy); } /* The one photograph: taped inside the cover. */ body[data-concept="notebook"] .nb-endpaper .nb-plate { position: relative; width: min(80%, 520px); margin: 0; rotate: -1.8deg; } .nb-plate img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 40% 50%; border: .45em solid #fffdf8; box-shadow: 0 1px 2px rgb(35 36 36 / .2), 0 8px 18px rgb(35 36 36 / .14); } .nb-plate::before { content: ""; position: absolute; z-index: 1; top: -.7em; left: 50%; width: 30%; height: 1.5em; translate: -50% 0; rotate: -3deg; background: rgb(236 230 214 / .78); box-shadow: 0 1px 1px rgb(35 36 36 / .08); } /* Values. */ body[data-concept="notebook"] .c-values { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lh) 1.4em; margin: 0; } body[data-concept="notebook"] .c-values dt { --k: var(--nb-k-display); --asc: 1.18; --desc: .31; font-family: var(--ls-display); font-size: 1.025em; font-style: italic; color: var(--ls-navy); } body[data-concept="notebook"] .c-values dd { margin: 0; font-size: .92em; } .nb-book[data-mode="single"] .c-values, .nb-book[data-mode="static"] .c-values { grid-template-columns: 1fr; } /* Topics index: words written along the lines; the line under a word is inked. */ body[data-concept="notebook"] .c-hint { font-style: italic; color: var(--ls-taupe); } body[data-concept="notebook"] .c-topic-index { display: flex; flex-wrap: wrap; font-size: 1.04em; } body[data-concept="notebook"] .c-topic-index > li { display: flex; align-items: baseline; margin: 0; } body[data-concept="notebook"] .c-topic-index > li:not(:last-child)::after { content: "·"; padding-inline: .45em; color: var(--ls-taupe); } body[data-concept="notebook"] :is(.c-topic, .c-reset) { --button-background-color: transparent; --button-border-color: transparent; --button-color: var(--ls-ink); --button-hover-background-color: transparent; --button-hover-color: var(--ls-navy); --button-hover-border-color: transparent; --button-padding: 0 1px; --button-border-radius: 0; --button-border-width: 0; --button-font-weight: 400; --button-font-size: 1em; --on-rule: var(--row-base); height: var(--lh); min-height: 0; line-height: var(--lh); text-decoration: none; background-image: linear-gradient(var(--ink-line, rgb(120 100 88 / .6)), var(--ink-line, rgb(120 100 88 / .6))); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 var(--on-rule); } body[data-concept="notebook"] :is(.c-topic, .c-reset):hover { --ink-line: var(--ls-navy); } body[data-concept="notebook"] .c-topic[aria-pressed="true"] { --button-color: var(--ls-olive-ink); --button-hover-color: var(--ls-olive-ink); --ink-line: var(--ls-olive); background-image: linear-gradient(var(--ls-olive), var(--ls-olive)), linear-gradient(var(--ls-olive-tint), var(--ls-olive-tint)); background-size: 100% 1px, 100% .62em; background-position: 0 var(--on-rule), 0 calc(var(--on-rule) - .55em); } body[data-concept="notebook"] .c-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.2em; min-height: var(--lh); } body[data-concept="notebook"] .c-filter-status { margin: 0; font-style: italic; color: var(--ls-olive-ink); } body[data-concept="notebook"] .c-filter-status:empty { display: none; } body[data-concept="notebook"] .c-reset { --button-color: var(--ls-navy); --ink-line: var(--ls-navy); font-style: italic; } /* Services contents. */ body[data-concept="notebook"] .c-toc { margin: 0; } body[data-concept="notebook"] .c-entry { padding-block: 0 var(--lh); } body[data-concept="notebook"] #services .nb-title { margin-bottom: 0; } body[data-concept="notebook"] .c-entry h3 a { display: flex; align-items: last baseline; gap: .7em; min-height: 0; color: var(--ls-navy); font-family: var(--ls-display); } body[data-concept="notebook"] .c-entry-title { flex: 0 1 auto; } body[data-concept="notebook"] .c-entry .c-leader { position: relative; top: -.22em; flex: 1 1 1.2em; min-width: 1.2em; border-bottom: 2px dotted rgb(120 100 88 / .6); } body[data-concept="notebook"] .c-entry .ls-line-arrow { --ls-arrow-length: 26px; } body[data-concept="notebook"] .c-entry h3 a:hover .c-entry-title { text-decoration: underline 1px; text-underline-offset: 0; } body[data-concept="notebook"] .c-entry p { margin: 0; font-size: .92em; } body[data-concept="notebook"] .c-toc.is-filtered .c-entry { background-image: linear-gradient(90deg, var(--ls-olive) 0 3px, transparent 3px); padding-left: .9em; } body[data-concept="notebook"] .nb-continued .nb-quote { margin-top: 0; } /* Business, learning. */ .nb-future section + section { margin-top: calc(var(--lh) * 2); } body[data-concept="notebook"] .nb-future .c-margin h2 { --m: 2; --j: 1; margin: 0; font-size: 1.42em; font-weight: 400; } body[data-concept="notebook"] .nb-page .ls-status { display: block; width: fit-content; margin: 0 0 var(--lh); padding: 0; border: 0; font-size: .86em; font-style: italic; letter-spacing: .02em; color: var(--ls-taupe); background: linear-gradient(currentColor, currentColor) 0 var(--row-base) / 100% 1px no-repeat; } body[data-concept="notebook"] .c-inline-list { display: flex; flex-wrap: wrap; } body[data-concept="notebook"] .c-inline-list li:not(:last-child)::after { content: "·"; padding-inline: .55em; color: var(--ls-taupe); } /* Contact. */ body[data-concept="notebook"] .nb-page .c-phone { --k: var(--nb-k-display); --asc: 1.18; --desc: .31; --m: 2; --j: 1; margin: 0 0 var(--lh); font-family: var(--ls-display); font-size: 1.83em; } body[data-concept="notebook"] .c-phone a { color: var(--ls-navy); } body[data-concept="notebook"] .nb-page .nb-quote-end { margin-top: calc(var(--lh) * 2); } /* ---------------------------------------------------------------- boards: covers */ /* Beige linen boards, as in the reference cover: navy type; a darker strip and a hinge groove at the binding. */ .nb-board, body[data-concept="notebook"] #Footer.nb-board { color: var(--ls-navy); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 -.01'/%3E%3C/filter%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .012' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 -.015'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 30% 20%, rgb(255 252 246 / .35), transparent 60%), linear-gradient(90deg, rgb(72 52 32 / .22), rgb(72 52 32 / .07) .9%, transparent 3.2%, transparent 3.9%, rgb(72 52 32 / .08) 4.5%, rgb(72 52 32 / .2) 5.05%, rgb(72 52 32 / .05) 5.4%, rgb(255 253 248 / .36) 5.85%, rgb(255 253 248 / .1) 6.7%, transparent 7.7%), var(--nb-board); } /* Front cover: the room photograph (assets/images/cover-room.webp, or the page field) printed on the linen and anchored at the foot; on taller boards the wall continues above it. Logo, motto and heading are set on the wall, NGX signs at the foot as the publisher. Sizes follow the width of the board (cqi), so the composition holds. */ body[data-concept="notebook"] .nb-cover { display: flex; flex-direction: column; align-items: center; overflow: hidden; cursor: pointer; background: radial-gradient(90% 55% at 72% 0%, rgb(255 251 244 / .55), transparent 70%), #e0d1c1; } .nb-cover-photo { position: absolute; left: 0; bottom: 0; z-index: 0; display: block; width: 100%; max-width: none; height: auto; object-fit: cover; object-position: 88% 100%; -webkit-mask-image: linear-gradient(transparent, #000 12%); mask-image: linear-gradient(transparent, #000 12%); pointer-events: none; } /* The cloth the photograph is printed on; then the binding: the round of the spine, the hinge groove, light on the edges. */ .nb-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 -.01'/%3E%3C/filter%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .012' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 -.015'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E"); } .nb-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 3.9%, rgb(72 52 32 / .08) 4.5%, rgb(72 52 32 / .2) 5.05%, rgb(72 52 32 / .05) 5.4%, rgb(255 253 248 / .36) 5.85%, rgb(255 253 248 / .1) 6.7%, transparent 7.7%), linear-gradient(90deg, rgb(72 52 32 / .26), rgb(72 52 32 / .08) .9%, rgb(255 253 248 / .14) 1.9%, transparent 3.2%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset -1px 0 0 rgb(255 255 255 / .25), inset 0 -1px 0 rgb(110 85 60 / .16); } .nb-cover-title { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 84%; padding-top: 21cqi; text-align: center; } body[data-concept="notebook"] .nb-cover-logo { display: block; width: min(65cqi, 520px); height: auto; } body[data-concept="notebook"] .nb-cover-motto { margin: 3.4cqi 0 0; padding-left: .34em; font-family: var(--ls-display); font-size: max(12.5px, 2.45cqi); font-weight: 400; font-style: normal; line-height: 1.3; letter-spacing: .34em; color: #665246; } body[data-concept="notebook"] .nb-cover-title .nb-cover-heading { max-width: 15.5em; margin: 4.2cqi 0 0; font-family: var(--body-font-family); font-size: max(16.5px, 2.6cqi); font-weight: 400; line-height: 1.45; letter-spacing: .04em; color: var(--ls-navy); text-wrap: balance; } .nb-cover-title .nb-cover-heading::before { content: ""; display: block; width: max(28px, 5.4cqi); height: 1px; margin: 0 auto 4.2cqi; background: currentColor; } .nb-imprint { position: absolute; z-index: 2; inset: auto 0 6cqi; display: flex; justify-content: center; font-size: max(9.5px, 1.32cqi); font-weight: 500; line-height: 1; letter-spacing: .22em; text-transform: uppercase; } /* The theme gives every paragraph a bottom margin; the imprint is placed from the foot of the board. */ body[data-concept="notebook"] .nb-imprint { margin: 0; } body[data-concept="notebook"] .nb-imprint a { display: inline-flex; align-items: center; gap: 1.6em; min-height: 32px; color: var(--ls-ink); text-decoration: none; white-space: nowrap; } body[data-concept="notebook"] .nb-imprint a:hover { color: var(--ls-navy); } body[data-concept="notebook"] .nb-imprint img { display: block; box-sizing: content-box; width: auto; height: max(14px, 2.3cqi); padding-left: 1.6em; border-left: 1px solid rgb(35 36 36 / .4); } /* Back cover holds the footer; seen from the back, the binding is on the right. */ body[data-concept="notebook"] #Footer.nb-back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 -.01'/%3E%3C/filter%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .012' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 -.015'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 70% 20%, rgb(255 252 246 / .35), transparent 60%), linear-gradient(270deg, rgb(72 52 32 / .22), rgb(72 52 32 / .07) .9%, transparent 3.2%, transparent 3.9%, rgb(255 253 248 / .1) 4.5%, rgb(255 253 248 / .34) 5.05%, rgb(72 52 32 / .05) 5.5%, rgb(72 52 32 / .2) 5.95%, rgb(72 52 32 / .07) 6.7%, transparent 7.7%); } .nb-book:not([data-mode="static"]) [tabindex="-1"]:focus { outline: none; } .nb-book:not([data-mode="static"]) .nb-page[tabindex="0"]:focus-visible { outline: 2px solid var(--ls-navy, #0e395b); outline-offset: -6px; } body[data-concept="notebook"] #Footer.nb-back { font-size: 14px; } .nb-book:not([data-mode="static"]) #Footer.nb-back { font-size: clamp(12px, min(2.45cqi, 2.15cqh), 15px); } .nb-book:not([data-mode="static"]) #Footer.nb-back h2 { font-size: 1.15em; } .nb-book:not([data-mode="static"]) #Footer.nb-back .ls-footer-logo { width: min(240px, 62%); } body[data-concept="notebook"] .nb-back .ls-wrap { max-width: none; padding-inline: 10% 8%; } body[data-concept="notebook"] .nb-back .ls-footer-main { grid-template-columns: 1fr 1fr; gap: 22px 28px; padding-block: 9% 18px; } body[data-concept="notebook"] .nb-back .ls-footer-brand { grid-column: 1 / -1; } body[data-concept="notebook"] .nb-back .ls-footer-logo { width: min(240px, 70%); margin-bottom: 14px; } body[data-concept="notebook"] .nb-back #footer-services, body[data-concept="notebook"] .nb-back #footer-contact { font-family: var(--ls-display); font-style: italic; font-weight: 400; font-size: 17px; } body[data-concept="notebook"] .nb-back a { min-height: 30px; } body[data-concept="notebook"] .nb-back .ls-footer-bottom { font-size: .9em; } body[data-concept="notebook"] .nb-back .ls-footer-bottom { border-top-color: rgb(14 57 91 / .22); } /* ---------------------------------------------------------------- static (no JS) */ .nb-book[data-mode="static"] { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; } .nb-book[data-mode="static"] .nb-face { margin-bottom: 24px; box-shadow: 0 10px 30px rgb(35 36 36 / .12); } .nb-book[data-mode="static"] .nb-cover { aspect-ratio: 715 / 859; container-type: inline-size; } .nb-book[data-mode="static"] :is(.nb-face[data-loaded="0"], .nb-notes) { display: none; } .nb-js .nb-book[data-mode="static"] { visibility: hidden; animation: nb-failsafe 0s 2.5s forwards; } @keyframes nb-failsafe { to { visibility: visible; } } /* ---------------------------------------------------------------- book modes */ html.nb-on, html.nb-on body { height: 100%; overflow: hidden; overscroll-behavior: none; } /* The desk is a wall in soft daylight, to the right of the side rail. */ html.nb-on body[data-concept="notebook"] { background: radial-gradient(55% 60% at 90% 6%, rgb(255 252 247 / .7), transparent 70%), radial-gradient(70% 55% at 0% 100%, rgb(120 98 76 / .09), transparent 70%), var(--nb-desk); } html.nb-on .nb-desk { position: fixed; inset: calc(var(--ls-header-height) + var(--ls-adminbar, 0px)) 0 0 var(--ls-rail, 0px); display: grid; align-content: center; justify-content: center; justify-items: center; grid-template-columns: auto auto auto; grid-template-areas: "book book book" "prev progress next"; align-items: center; gap: 8px 14px; padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0px)); } .nb-book[data-mode="spread"], .nb-book[data-mode="single"] { grid-area: book; position: relative; isolation: isolate; width: calc(var(--pw) * var(--nb-pages)); height: var(--ph); touch-action: pan-y; -webkit-user-select: none; user-select: none; } /* The book is as wide as the theme's .container (within the room beside the rail) while the screen is tall enough; on short screens it narrows, so the pages keep the proportions of a real book (width / height between .75 and .87). */ .nb-book[data-mode="spread"] { --nb-pages: 2; --ph-room: calc(100dvh - var(--ls-header-height) - var(--ls-adminbar, 0px) - 64px); --pw: min(min(100vw - var(--ls-rail, 0px) - 2 * var(--mobile-paddings), var(--container)) / 2, var(--ph-room) * .87); --ph: min(880px, var(--ph-room), var(--pw) / .75); } .nb-book[data-mode="single"] { --nb-pages: 1; --ph: calc(100dvh - var(--ls-header-height) - var(--ls-adminbar, 0px) - 68px - env(safe-area-inset-bottom, 0px)); --pw: min(100vw - var(--ls-rail, 0px) - 2 * var(--mobile-paddings), var(--container), calc(var(--ph) * .8)); /* one page bound at its left edge: whatever turns past the binding disappears */ clip-path: inset(-40% -40% -40% 0); } .nb-book:not([data-mode="static"]) > main { position: absolute; inset: 0; } .nb-book:not([data-mode="static"]) .nb-face, body[data-concept="notebook"] .nb-book:not([data-mode="static"]) #Footer.nb-face { position: absolute; top: 0; left: 0; width: var(--pw); height: 100%; margin: 0; container-type: size; visibility: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; transition: none; box-shadow: 0 1px 1px rgb(35 36 36 / .08), 0 14px 36px -10px rgb(35 36 36 / .32); } .nb-book:not([data-mode="static"]) .nb-face.is-visible, body[data-concept="notebook"] .nb-book:not([data-mode="static"]) #Footer.nb-face.is-visible { visibility: visible; } .nb-book:not([data-mode="static"]) .nb-cover { cursor: pointer; } .nb-book[data-mode="spread"] .nb-face.nb-recto { left: 50%; } .nb-book[data-mode="spread"] .nb-board { border-radius: 2px 5px 5px 2px; } .nb-book[data-mode="spread"] .nb-back { border-radius: 5px 2px 2px 5px; } .nb-book:not([data-mode="static"]) :is(.nb-face, .nb-page) { touch-action: pan-y; } .nb-book:not([data-mode="static"]) .nb-page { height: 100%; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(120 100 88 / .45) transparent; } /* Type follows the page: its width, and on short wide pages its height, so every spread fits without scrolling. */ .nb-book[data-mode="spread"] .nb-page { --fs: clamp(13.5px, min(2.85cqi, 2.4cqh), 19.5px); padding-block: calc(var(--lh) * 2) var(--lh); } .nb-book[data-mode="single"] .nb-page { --fs: clamp(16px, 1.6cqi + 10px, 18.5px); padding-inline: calc(11% + .9em) 6%; padding-bottom: var(--lh); } /* The closed book: the board's edge on the right and at the foot, and a soft shadow on the wall. The title is placed from the top of the board and the imprint from its foot (cq units here are the board). */ .nb-book:not([data-mode="static"]) .nb-face.nb-cover { box-shadow: 1px 0 0 #d3c3b1, 2px 1px 0 #c5b4a1, 0 2px 4px rgb(60 45 30 / .16), 16px 28px 48px -16px rgb(60 45 30 / .42); } .nb-book:not([data-mode="static"]) .nb-cover-title { padding-top: 17.5cqh; } /* Tall boards (phones): the room grows to most of the height, cropped from the left, and the title comes down a little. */ .nb-book[data-mode="single"] .nb-cover-photo { min-height: 76cqh; } .nb-book[data-mode="single"] .nb-cover-title { padding-top: 15cqh; } .nb-book:not([data-mode="static"]) .nb-imprint { bottom: 5.2cqh; } .nb-book:not([data-mode="static"]) .nb-endpaper { gap: calc(var(--ph) * .05); } .nb-book:not([data-mode="static"]) .nb-endpaper { padding: calc(var(--ph) * .08) calc(var(--pw) * .13) calc(var(--ph) * .08) calc(var(--pw) * .11); } .nb-book:not([data-mode="static"]) .nb-endpaper .nb-plate { width: min(100%, var(--ph) * .62); } .nb-book[data-mode="spread"] .nb-continued { padding-top: calc(var(--lh) * 5); } .nb-book:not([data-mode="static"]) #Footer { overflow: hidden auto; } /* The theme transitions «all»; inherited visibility must switch at once when a page turns. */ .nb-book:not([data-mode="static"]) .nb-face *:not(svg, svg *) { transition-property: color, background-color, border-color, text-decoration-color, opacity, width; } /* More text below: the page fades at the bottom until it is scrolled to the end. */ .nb-book:not([data-mode="static"]) .nb-page[data-more] { mask-image: linear-gradient(180deg, #000 calc(100% - 3.5em), transparent); } /* Gutter shading. */ .nb-book[data-mode="spread"] .nb-paper.nb-verso::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 9%; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(60 50 40 / .12)); } .nb-book[data-mode="spread"] .nb-paper.nb-recto::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 9%; pointer-events: none; background: linear-gradient(270deg, transparent, rgb(60 50 40 / .14)); } .nb-book[data-mode="single"] .nb-paper::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 5%; pointer-events: none; background: linear-gradient(270deg, transparent, rgb(60 50 40 / .1)); } /* Turning (notebook.js): light and shadow over a page, the back of a sheet, the shadow a curl casts. */ .nb-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .nb-sheet { position: absolute; top: 0; left: 0; z-index: 4; width: var(--pw); height: 100%; visibility: hidden; pointer-events: none; background: linear-gradient(90deg, transparent calc(11% - .5px), var(--nb-margin) calc(11% - .5px) calc(11% + .5px), transparent calc(11% + .5px)), linear-gradient(var(--nb-rule) 0 1px, transparent 1px) 0 var(--rule) / 100% var(--lh) repeat-y, #f6f1e8; } .nb-sheet.is-on { visibility: visible; } .nb-cast { position: absolute; inset: 0; z-index: 3; visibility: hidden; pointer-events: none; filter: blur(7px); } .nb-cast.is-on { visibility: visible; } .nb-cast-shape { position: absolute; inset: 0; translate: 0 4px; background: rgb(30 24 16 / .3); } @media (pointer: coarse) { .nb-cast { filter: none; } .nb-cast-shape { translate: 3px 3px; background: rgb(30 24 16 / .12); } } /* Page edges: thickness grows on the side already read. */ .nb-stack { display: none; } .nb-book:not([data-mode="static"]) .nb-stack { display: block; position: absolute; top: 0; height: 100%; width: var(--pw); border-radius: 2px; background: var(--nb-paper); visibility: hidden; } .nb-book:not([data-mode="static"]) .nb-stack.is-on { visibility: visible; } .nb-book[data-mode="spread"] .nb-stack-left { left: 0; } .nb-book:not([data-mode="static"]) .nb-stack-right { left: calc(100% - var(--pw)); } @media (max-width: 959px) { body[data-concept="notebook"] { --ls-header-height: 64px; } } @media (prefers-reduced-motion: reduce) { } /* ---------------------------------------------------------------- chapters from WordPress */ /* Text from the editor sits on the lines like the rest of the book: lists, sub-headings, links, quotes, images. */ body[data-concept="notebook"] .nb-prose :is(ul, ol) { margin-block: 0 var(--lh); padding-left: 1.3em; } body[data-concept="notebook"] .nb-prose ul { list-style: "– "; } body[data-concept="notebook"] .nb-prose ol { list-style: decimal; } body[data-concept="notebook"] .nb-prose li::marker { color: var(--ls-taupe); } body[data-concept="notebook"] .nb-prose h2 { --m: 2; --j: 1; margin: 0; font-size: 1.3em; font-weight: 400; } body[data-concept="notebook"] .nb-prose h3 { margin: 0; } body[data-concept="notebook"] .nb-prose a { color: var(--ls-navy); text-decoration: underline 1px; text-underline-offset: .18em; } body[data-concept="notebook"] .nb-prose blockquote { margin-inline: 0; padding-left: 1em; border-left: 2px solid rgb(14 57 91 / .3); font-style: italic; } body[data-concept="notebook"] .nb-prose blockquote p { margin: 0; } body[data-concept="notebook"] .nb-prose :is(img, video, iframe) { display: block; max-width: 100%; height: auto; } body[data-concept="notebook"] .nb-prose figure { margin-block: 0 var(--lh); } body[data-concept="notebook"] .nb-prose figcaption { font-size: .86em; font-style: italic; color: var(--ls-taupe); } /* Contents: the page each chapter starts on. */ body[data-concept="notebook"] .nb-toc-folio { flex: none; min-width: 1.3em; font-variant-numeric: oldstyle-nums; text-align: right; color: var(--ls-taupe); } /* A service, the profile: a practical note under the text. */ body[data-concept="notebook"] .nb-page .c-note { padding-left: .9em; font-size: .92em; font-style: italic; color: var(--ls-bluegrey); background: linear-gradient(90deg, rgb(14 57 91 / .28) 0 2px, transparent 2px); } /* Blog: dated entries; the post opens on the facing page. */ body[data-concept="notebook"] .c-posts { margin: 0; } body[data-concept="notebook"] .c-post { padding-block: 0 var(--lh); } body[data-concept="notebook"] .c-post p { margin: 0; } body[data-concept="notebook"] .nb-page .c-post-date { margin: 0; font-size: .82em; font-style: italic; letter-spacing: .03em; color: var(--ls-taupe); } body[data-concept="notebook"] .c-post h3 a { color: var(--ls-navy); font-family: var(--ls-display); text-decoration: none; } body[data-concept="notebook"] .c-post h3 a:hover { text-decoration: underline 1px; text-underline-offset: .15em; } body[data-concept="notebook"] .nb-page .c-empty { font-style: italic; color: var(--ls-taupe); } body[data-concept="notebook"] .c-pager .ls-more { height: var(--lh); min-height: 0; font-size: .94em; font-style: italic; } /* Contact. */ body[data-concept="notebook"] .nb-page .c-mail { font-size: .94em; font-style: italic; } body[data-concept="notebook"] .nb-page .c-mail .ls-more { display: inline; min-height: 0; font-size: inherit; } body[data-concept="notebook"] .nb-page .c-place { color: var(--ls-taupe); } /* The contact form is written on the lines: each label on a row, each answer on the rows below; the rule under the answer is the field. Contact Form 7 keeps its own validation and messages. */ body[data-concept="notebook"] .nb-form .wpcf7 { margin: 0; } body[data-concept="notebook"] .nb-form form { margin: 0 0 var(--lh); } body[data-concept="notebook"] .nb-form .hidden-fields-container { display: none; } body[data-concept="notebook"] .nb-form .c-field { margin: 0; } body[data-concept="notebook"] .nb-form label { display: block; margin: 0; font-size: .92em; font-style: italic; color: var(--ls-taupe); } body[data-concept="notebook"] .nb-form .wpcf7-form-control-wrap { display: block; } body[data-concept="notebook"] .nb-form :is(input:not([type="checkbox"], [type="submit"]), textarea) { display: block; width: 100%; height: var(--lh); margin: 0; padding: 0 .2em; font: inherit; line-height: var(--lh); color: var(--ls-ink); border: 0; border-radius: 0; box-shadow: none; -webkit-appearance: none; appearance: none; /* The field's own line is inked over the page rule: --row-base is the baseline inside a row. */ background: linear-gradient(rgb(14 57 91 / .45) 0 1px, transparent 1px) 0 var(--row-base) / 100% var(--lh) repeat-y; } /* Four lines to write on (the general field rule above is more specific than a bare textarea). */ body[data-concept="notebook"] .nb-form textarea.wpcf7-form-control { height: calc(var(--lh) * 4); resize: vertical; } body[data-concept="notebook"] .nb-form :is(input, textarea):focus-visible { outline: 2px solid var(--ls-navy); outline-offset: 2px; background: rgb(14 57 91 / .04); } body[data-concept="notebook"] .nb-form .wpcf7-not-valid { background: rgb(138 47 47 / .06); } body[data-concept="notebook"] .nb-form .wpcf7-not-valid-tip { display: block; font-size: .86em; font-style: italic; line-height: var(--lh); color: #8a2f2f; } body[data-concept="notebook"] .nb-form .c-consent label { display: flex; align-items: baseline; gap: .6em; font-size: .9em; } body[data-concept="notebook"] .nb-form .c-consent .wpcf7-list-item { margin: 0; } body[data-concept="notebook"] .nb-form input[type="checkbox"] { flex: none; width: 1.05em; height: 1.05em; margin: 0; accent-color: var(--ls-navy); } body[data-concept="notebook"] .nb-form .c-submit { display: flex; align-items: center; gap: 1em; margin: var(--lh) 0 0; } body[data-concept="notebook"] .nb-form .wpcf7-submit { display: inline-flex; height: var(--lh); min-height: 0; padding: 0 1.2em; font: inherit; font-weight: 500; line-height: var(--lh); color: var(--ls-navy); cursor: pointer; --button-border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; background: transparent; border: 0; box-shadow: 0 0 0 1.5px currentColor; } body[data-concept="notebook"] .nb-form .wpcf7-submit:hover { background: rgb(14 57 91 / .05); } body[data-concept="notebook"] .nb-form .wpcf7-submit:disabled { opacity: .45; cursor: not-allowed; } body[data-concept="notebook"] .nb-form .wpcf7-spinner { margin: 0; } body[data-concept="notebook"] .nb-form .wpcf7-response-output { margin: var(--lh) 0 0; padding: 0 .5em; font-size: .92em; font-style: italic; border: 1px solid currentColor; } body[data-concept="notebook"] .nb-form .c-privacy { font-size: .86em; font-style: italic; color: var(--ls-bluegrey); } /* A chapter not loaded yet: an empty page; dots appear if it takes a moment. */ .nb-pending { position: relative; } .nb-pending::before { content: "· · ·"; position: absolute; top: 46%; right: 0; left: 0; text-align: center; letter-spacing: .3em; color: var(--ls-taupe); opacity: 0; animation: ls-wait .3s .5s forwards; } @keyframes ls-wait { to { opacity: .75; } } /* The progress cursor while a chapter loads. */ @media (hover: hover) and (pointer: fine) { .nb-desk.is-loading { cursor: progress; } } @media (prefers-reduced-motion: reduce) { .nb-pending::before { animation: none; opacity: .75; } } /* ---------------------------------------------------------------- the printed book */ /* Book paper: no rules and no margin line. The text block sits within book margins, a little wider at the outer edge than at the binding, and ends above a band at the foot where the page number is printed, so text that scrolls never runs under it. The type keeps the rows of the r3 rhythm. */ body[data-concept="notebook"] .nb-page { background: none; padding-inline: 9% 8%; } .nb-sheet { background: #f6f1e8; } .nb-book[data-mode="spread"] .nb-verso .nb-page { padding-inline: 11% 9%; } .nb-book[data-mode="spread"] .nb-recto .nb-page { padding-inline: 9% 11%; } .nb-book[data-mode="single"] .nb-page { padding-inline: 9% 8%; } .nb-book:not([data-mode="static"]) .nb-paper { --folio-band: clamp(30px, 6.4cqh, 54px); --head-band: clamp(24px, 5.4cqh, 46px); } /* The text block starts where it did, below a band at the head that carries the running head; text that scrolls is cut off at both bands, so it never runs under the running head or the page number. */ .nb-book:not([data-mode="static"]) .nb-paper > .nb-page { height: calc(100% - var(--folio-band) - var(--head-band)); margin-top: var(--head-band); padding-top: max(0px, calc(var(--lh) * 2 - var(--head-band))); } .nb-book[data-mode="spread"] .nb-paper > .nb-continued { padding-top: max(0px, calc(var(--lh) * 5 - var(--head-band))); } /* Running heads: the title of the page in spaced capitals, centred in the band at the head of both its pages (a service: «Υπηρεσίες - name», an article: «Άρθρο - title»; book.php sets the capitals without accents, as Greek is set). A head longer than the band is cut with an ellipsis. Blank pages and the boards carry none. */ .nb-head { display: none; } .nb-book:not([data-mode="static"]) .nb-head { position: absolute; inset: 0 0 auto; z-index: 1; display: block; box-sizing: border-box; height: var(--head-band); padding: .45em 12% 0 calc(12% + .2em); overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; font-family: var(--ls-display); font-size: clamp(10px, 2cqi, 13px); line-height: calc(var(--head-band) - .45em); letter-spacing: .2em; color: var(--ls-taupe); } /* Drop caps: the first letter of a chapter two lines deep in the display face. initial-letter where the browser has it; elsewhere (Firefox) a float, which Firefox fits from the top of the letter to the font's descent: its top is placed at the cap height of line 1 and, with the margin below, it ends at line 2 (cap heights: Brygada .67, Ysabeau .658; descent .25). For N lines: size ((N-1)·lh + .658em) / .67, margin-top (.5 + .4187·(N-1))·lh - .2805em, margin-bottom (.5 + .5813·(N-1))·lh - .6395em - 1px. */ body[data-concept="notebook"] :is(p.nb-opening, .nb-opening > p:first-of-type)::first-letter { float: left; margin: calc(var(--lh) * .9187 - .2805em) calc(var(--lh) * .25) calc(var(--lh) * 1.0813 - .6395em - 1px) 0; font-family: var(--ls-display); font-size: calc((var(--lh) + .658em) / .67); font-weight: 400; line-height: 1; color: var(--ls-navy); } @supports (initial-letter: 2) or (-webkit-initial-letter: 2) { body[data-concept="notebook"] :is(p.nb-opening, .nb-opening > p:first-of-type)::first-letter { float: none; margin: 0 calc(var(--lh) * .25) 0 0; font-size: inherit; line-height: inherit; -webkit-initial-letter: 2; initial-letter: 2; } } /* Page numbers (folios), centred in the band at the foot. */ .nb-folio { display: none; } .nb-book:not([data-mode="static"]) .nb-folio { position: absolute; inset: auto 0 0; z-index: 1; display: flex; align-items: center; justify-content: center; height: var(--folio-band); padding-bottom: .3em; pointer-events: none; font-family: var(--ls-display); font-size: clamp(11.5px, 2.3cqi, 14.5px); line-height: 1; letter-spacing: .06em; color: var(--ls-taupe); } /* Contents: the chapters numbered in reading order and the sections of a chapter indented beneath it, in the text face. Each entry is a grid (number, title, page); the number stands by the first line of a long title, the page by its last line, and a row of printer's dots runs from the end of the title to the page, as in a printed book. */ body[data-concept="notebook"] .nb-page .nb-toc { margin: 0; } body[data-concept="notebook"] .nb-page .nb-toc-sections { margin: 0; padding: 0 0 0 2.05em; } body[data-concept="notebook"] .nb-toc a { display: grid; grid-template-columns: auto auto minmax(.8em, 1fr) auto; column-gap: .55em; align-items: last baseline; } body[data-concept="notebook"] .nb-toc-sections a { --k: var(--nb-k-body); --asc: 1.054; --desc: .289; grid-template-columns: auto minmax(.8em, 1fr) auto; font-family: var(--body-font-family); font-size: .9em; color: var(--ls-ink); } body[data-concept="notebook"] .nb-toc-sections a:hover { color: var(--ls-navy); } .nb-toc-num { align-self: start; min-width: 1.5em; color: var(--ls-taupe); font-variant-numeric: lining-nums tabular-nums; } /* The dots between a title and its page: drawn, not typed. Every dot is the same disc on the same 6px pitch, laid on the baseline of the title's last line, and the pitch is counted from the right edge, where the page numbers are, so the dots of every row stand in the same columns, chapters and sections alike. Where the browser can round a width to whole pitches, the row of dots also starts on a whole dot (no dot is ever cut). */ .nb-toc-dots { --dot: 6px; align-self: end; justify-self: end; width: 100%; min-width: 0; height: var(--lh); background: radial-gradient(circle at 50% var(--dot-y, 70%), rgb(120 100 88 / .9) 1px, rgb(120 100 88 / 0) 1.4px) right bottom / var(--dot) var(--lh) repeat-x; } @supports (width: round(down, 100%, 6px)) { .nb-toc-dots { width: round(down, 100%, var(--dot)); } } body[data-concept="notebook"] .nb-toc a { --dot-y: calc(var(--lh) / 2 + var(--k) * 1em - 1px); } @supports (width: round(1.5px, 1px)) { body[data-concept="notebook"] .nb-toc a { --dot-y: round(calc(var(--lh) / 2 + var(--k) * 1em - 1px), 1px); } } .nb-toc-folio { min-width: 1.4em; text-align: right; font-variant-numeric: lining-nums tabular-nums; } /* Phones: the contents keep to one page. */ .nb-book[data-mode="single"] .nb-paper.nb-contents > .nb-page { --fs: clamp(14.5px, 1.6cqi + 9px, 18.5px); padding-top: max(0px, calc(var(--lh) - var(--head-band))); } /* ---------------------------------------------------------------- cursors (mouse only) */ /* A hand: an open hand over the pages, which says the page can be taken and turned; a closed hand while a page is dragged (and at the outer edges, where a corner lifts); the pointing hand over links and buttons. notebook.js lays .nb-hit over the book only for the edges and a drag, and the cursor there is that layer's. No rule may follow the state of the book itself (the attributes and classes notebook.js changes on .nb-book): every change of it would restyle the whole book, a visible stall as a corner lifts. */ .nb-hit { position: absolute; inset: 0; z-index: 60; display: none; cursor: grab; } .nb-hit[data-cursor] { display: block; } .nb-hit:is([data-cursor="grab"], [data-cursor="grab-back"]) { cursor: grabbing; } @media (hover: hover) and (pointer: fine) { html.nb-on .nb-book .nb-face { cursor: grab; } html.nb-on .nb-book :is(a[href], button:not(:disabled), summary, label[for], [role="button"], .nb-cover) { cursor: pointer; } } /* The shade of the binding falls on the paper's print too. */ .nb-book:not([data-mode="static"]) .nb-paper::after { z-index: 3; } /* ---------------------------------------------------------------- the desk */ /* The book lies on a light oak desk in daylight; the side rail's notes are stuck beside it. The photograph (images/desk-*.avif|webp, top-down, the objects at the right edge and in the corners) is fixed behind everything and never scrolls; the oak colour stands in until it loads. Phones get the right side of the desk: the plant shows above the book and the papers below it. */ html { background-color: #c9a67d; } body.ls-book[data-concept="notebook"], html.nb-on body.ls-book[data-concept="notebook"] { --nb-desk: #c9a67d; background: transparent; } body.ls-book::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--nb-desk) url("../images/desk-1536.webp") 50% 50% / cover no-repeat; background-image: image-set(url("../images/desk-1536.avif") type("image/avif"), url("../images/desk-1536.webp") type("image/webp")); } @media (max-width: 959px) { body.ls-book::before { background-image: url("../images/desk-720.webp"); background-image: image-set(url("../images/desk-720.avif") type("image/avif"), url("../images/desk-720.webp") type("image/webp")); background-position: 100% 50%; } } /* On the wood the book casts a warmer, deeper shadow; the daylight comes from the window at the upper left. */ .nb-book:not([data-mode="static"]) .nb-face, body[data-concept="notebook"] .nb-book:not([data-mode="static"]) #Footer.nb-face { box-shadow: 0 1px 2px rgb(58 36 14 / .22), 0 18px 34px -14px rgb(58 36 14 / .55); } .nb-book:not([data-mode="static"]) .nb-face.nb-cover { box-shadow: 1px 0 0 #d3c3b1, 2px 1px 0 #c5b4a1, 0 2px 4px rgb(58 36 14 / .28), 16px 28px 44px -12px rgb(58 36 14 / .6); } .nb-book[data-mode="static"] .nb-face { box-shadow: 0 1px 2px rgb(58 36 14 / .2), 0 16px 30px -12px rgb(58 36 14 / .5); } /* ---------------------------------------------------------------- page controls */ /* One paper pill on the desk: first page, previous, the page number as printed (04, or 04–05 for a spread) which is a field - write a page number and press Enter to turn to it -, next, last page. Round buttons without outlines; a line at the foot of the pill shows how far the book is read. The pill is only there with JavaScript and in the turning modes (the static book scrolls). */ .nb-pager { display: none; } html.nb-on .nb-pager { grid-area: nav; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 2px; padding: 5px 6px 8px; border-radius: 999px; color: var(--ls-navy); background: rgb(251 248 242 / .95); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 1px 1px rgb(58 36 14 / .2), 0 12px 26px -10px rgb(58 36 14 / .55); } html.nb-on .nb-desk { grid-template-columns: auto; grid-template-areas: "book" "nav"; gap: 14px; } .nb-book[data-mode="static"] ~ .nb-pager { display: none; } .nb-pg { appearance: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ls-navy); box-shadow: none; cursor: pointer; transition: background-color .2s ease, scale .15s ease, opacity .2s ease; -webkit-tap-highlight-color: transparent; } .nb-pg:hover { background: rgb(14 57 91 / .08); color: var(--ls-navy); } .nb-pg:active { scale: .9; background: rgb(14 57 91 / .15); } .nb-pg:focus-visible { outline: 0; background: rgb(14 57 91 / .1); box-shadow: 0 0 0 2px var(--nb-paper), 0 0 0 4px var(--ls-navy); } .nb-pg[aria-disabled="true"] { opacity: .25; pointer-events: none; } .nb-pg svg { display: block; } .nb-pg-num { display: block; margin: 0; padding: 0; } .nb-pg-input { /* The theme paints every field from its form tokens (border, radius, colours): here the number sits plain in the pill. */ --form-border-width: 1px; --form-border-color: transparent; --form-background-color: transparent; --form-border-radius: 999px; --form-padding: 0 .3em; --form-font-size: 1.2rem; --form-color: var(--ls-navy); appearance: none; display: block; width: 7.2ch; height: 40px; margin: 0; font-family: var(--ls-display); line-height: 40px; letter-spacing: .06em; text-align: center; font-variant-numeric: lining-nums tabular-nums; cursor: text; transition: background-color .2s ease, border-color .2s ease; } .nb-pg-input:hover { background-color: rgb(14 57 91 / .08); } .nb-pg-input:focus-visible { outline: 2px solid var(--ls-navy); outline-offset: 1px; background-color: #fff; border-color: rgb(14 57 91 / .35); } .nb-pg-track { position: absolute; inset: auto 22px 3px; height: 2px; border-radius: 2px; background: rgb(14 57 91 / .1); } .nb-pg-bar { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--ls-navy); opacity: .5; transform-origin: left; transform: scaleX(var(--nb-progress, 0)); transition: transform .5s ease; } @media (prefers-reduced-motion: reduce) { .nb-pg, .nb-pg-bar, .nb-pg-input { transition: none; } } /* ---------------------------------------------------------------- photographs beside the text */ /* The page facing (or following) a page of text carries one, two or four photographs filling the text block, with the same margins, running head and page number as the text page. Without JavaScript the plates stack at a fixed ratio. */ .nb-book .nb-paper > .nb-page.nb-pics { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: clamp(10px, 2.4cqi, 20px); padding-bottom: var(--lh); overflow: hidden; } .nb-book .nb-paper > .nb-pics.nb-pics-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .nb-book .nb-paper > .nb-pics.nb-pics-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } body[data-concept="notebook"] .nb-pics .nb-pic { display: flex; flex-direction: column; min-height: 0; margin: 0; } .nb-pic-img { display: block; flex: 1 1 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgb(58 36 14 / .1); } .nb-pic figcaption { padding-top: .45em; font-size: .8em; font-style: italic; line-height: 1.3; color: var(--ls-taupe); } .nb-book[data-mode="static"] .nb-pic-img { flex: none; height: auto; aspect-ratio: 4 / 3; } /* The page's own content (photographs, galleries, extra headings) inside the text. */ body[data-concept="notebook"] .nb-prose img { border-radius: 2px; } body[data-concept="notebook"] .nb-prose :is(.wp-block-gallery, .gallery) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; margin: 0 0 var(--lh); padding: 0; list-style: none; } body[data-concept="notebook"] .nb-prose :is(.wp-block-gallery.columns-3, .gallery-columns-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-concept="notebook"] .nb-prose :is(.wp-block-gallery, .gallery) :is(figure, .gallery-item) { margin: 0; } body[data-concept="notebook"] .nb-prose :is(.wp-block-gallery, .gallery) img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; } body[data-concept="notebook"] .nb-prose .wp-block-image img { width: 100%; } body[data-concept="notebook"] .nb-prose .alignleft { float: left; max-width: 50%; margin: 0 1em var(--lh) 0; } body[data-concept="notebook"] .nb-prose .alignright { float: right; max-width: 50%; margin: 0 0 var(--lh) 1em; } body[data-concept="notebook"] .nb-prose .aligncenter { margin-inline: auto; } body[data-concept="notebook"] .nb-prose h3 { margin-block: 0 var(--lh); font-size: 1.05em; } /* One page at a time (phones): the page of photographs and the blank pages are not turned to; the photographs follow the text of their page, and the page scrolls on to them. */ .nb-inline-pics { display: none; } .nb-book[data-mode="single"] :is(.nb-media, .nb-notes) { display: none; } .nb-book[data-mode="single"] .nb-inline-pics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lh); margin-top: calc(var(--lh) * 2); padding-bottom: var(--lh); } .nb-book[data-mode="single"] .nb-inline-pics.nb-inline-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nb-book[data-mode="single"] .nb-inline-pics .nb-pic { margin: 0; } .nb-book[data-mode="single"] .nb-inline-pics .nb-pic-img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgb(58 36 14 / .1); } .nb-book[data-mode="single"] .nb-inline-1 .nb-pic-img { aspect-ratio: 4 / 5; object-fit: cover; } .nb-book[data-mode="single"] .nb-inline-2 .nb-pic-img { aspect-ratio: 4 / 3; object-fit: cover; } .nb-book[data-mode="single"] .nb-inline-4 .nb-pic-img { aspect-ratio: 1; object-fit: cover; } /* ---------------------------------------------------------------- plain buttons */ /* Buttons are plain pills in navy: no outline drawn by hand, no pen. */ body[data-concept="notebook"] { --button-background-color: var(--ls-navy); --button-color: #fbf8f2; --button-border-color: transparent; --button-border-width: 0; --button-border-radius: 999px; --button-hover-background-color: #174a74; --button-hover-color: #fff; --button-hover-border-color: transparent; } body[data-concept="notebook"] .nb-page .button { box-shadow: none; border-radius: 999px; background: var(--button-background-color); color: var(--button-color); transition: background-color .2s ease, translate .15s ease; } body[data-concept="notebook"] .nb-page .button:hover { background: var(--button-hover-background-color); color: var(--button-hover-color); } body[data-concept="notebook"] .nb-page .button:focus-visible { outline: 2px solid var(--ls-navy); outline-offset: 3px; } /* ---------------------------------------------------------------- the blog in the contents */ /* After the last chapter of the list: the blog's categories, each with its articles. */ body[data-concept="notebook"] .nb-toc-blog { margin-top: calc(var(--lh) * .5); padding-left: 1.7em; font-size: .92em; } body[data-concept="notebook"] .nb-toc-blog :is(.nb-toc-cat, .nb-toc-none) { margin: 0; font-family: var(--ls-display); color: var(--ls-navy); } body[data-concept="notebook"] .nb-toc-blog .nb-toc-cat { font-weight: 500; } body[data-concept="notebook"] .nb-toc-blog .nb-toc-none { font-style: italic; color: var(--ls-taupe); } body[data-concept="notebook"] .nb-toc-blog a { color: var(--ls-navy); text-decoration: none; } body[data-concept="notebook"] .nb-toc-blog a:is(:hover, :focus-visible) { text-decoration: underline 1px; text-underline-offset: .18em; } body[data-concept="notebook"] .nb-toc-posts { margin: 0 0 calc(var(--lh) * .5); padding: 0 0 0 1em; list-style: "– "; } body[data-concept="notebook"] .nb-toc-posts li { margin: 0; } /* ---------------------------------------------------------------- titles: one size on every page */ /* Every page title (the h1 of the page, the h2 of the other pages) is 1.6 em of the page's own type size; on phones the contents page is set a little smaller, so its title takes the size of the others. */ body[data-concept="notebook"] .nb-page :is(h1, h2).nb-title { font-size: 1.6em; font-weight: 400; } .nb-book[data-mode="single"] .nb-paper.nb-contents > .nb-page .nb-title { font-size: calc(1.6 * clamp(16px, 1.6cqi + 10px, 18.5px)); } body[data-concept="notebook"] .nb-toc-pager { display: flex; align-items: center; gap: .6em; margin: 0 0 calc(var(--lh) * .25); } body[data-concept="notebook"] .nb-toc-pages { min-width: 4ch; text-align: center; font-family: var(--ls-display); font-size: .95em; font-variant-numeric: lining-nums tabular-nums; color: var(--ls-navy); } .nb-toc-pg { appearance: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ls-navy); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background-color .2s ease, opacity .2s ease; } .nb-toc-pg:hover { background: rgb(14 57 91 / .08); color: var(--ls-navy); } .nb-toc-pg:focus-visible { outline: 2px solid var(--ls-navy); outline-offset: 2px; } .nb-toc-pg[aria-disabled="true"] { opacity: .25; pointer-events: none; } /* ---------------------------------------------------------------- one page per address: the subtitles are h2 */ /* Every address has one h1 (the title of its page) and its subtitles are h2: the values of the philosophy, the services of the services page and the services still being set up, the articles of a list. They keep the look they had. */ /* Philosophy: each value is a subtitle with its text. */ body[data-concept="notebook"] .c-value h2 { margin: 0; font-family: var(--ls-display); font-size: 1.025em; font-weight: 400; font-style: italic; } body[data-concept="notebook"] .c-value p { margin: 0; font-size: .92em; } /* Services: all of them on one page; each is a subtitle that leads to its page. The row of dots between the name and the arrow is drawn like the one in the contents: the same disc on the same pitch, counted from the arrow. */ body[data-concept="notebook"] .c-entry h2 { --dot-y: calc(var(--lh) / 2 + var(--k) * 1em - 1px); margin: 0; font-size: 1.025em; font-weight: 500; } @supports (width: round(1.5px, 1px)) { body[data-concept="notebook"] .c-entry h2 { --dot-y: round(calc(var(--lh) / 2 + var(--k) * 1em - 1px), 1px); } } body[data-concept="notebook"] .c-entry h2 a { display: grid; grid-template-columns: auto minmax(1.2em, 1fr) auto; column-gap: .7em; align-items: last baseline; min-height: 0; color: var(--ls-navy); font-family: var(--ls-display); } body[data-concept="notebook"] .c-entry h2 a:hover .c-entry-title { text-decoration: underline 1px; text-underline-offset: 0; } body[data-concept="notebook"] .c-entry .c-leader { --dot: 6px; position: static; top: auto; flex: none; min-width: 0; border: 0; align-self: end; justify-self: end; width: 100%; height: var(--lh); background: radial-gradient(circle at 50% var(--dot-y, 70%), rgb(120 100 88 / .9) 1px, rgb(120 100 88 / 0) 1.4px) right bottom / var(--dot) var(--lh) repeat-x; } @supports (width: round(down, 100%, 6px)) { body[data-concept="notebook"] .c-entry .c-leader { width: round(down, 100%, var(--dot)); } } /* The services still being set up: sections at the end of the same page. */ body[data-concept="notebook"] .c-future { margin-top: var(--lh); } body[data-concept="notebook"] .c-future + .c-future { margin-top: calc(var(--lh) * 2); } body[data-concept="notebook"] .c-future h2 { --m: 2; --j: 1; margin: 0; font-size: 1.3em; font-weight: 400; } /* ---------------------------------------------------------------- articles */ /* The title, a few words, the categories as buttons, then the articles two to a row (one on a narrow page). Every row of buttons is exactly one row of the page tall, so the text below keeps to the rows. */ body[data-concept="notebook"] .c-intro { margin: 0 0 var(--lh); } body[data-concept="notebook"] .c-cats ul { display: flex; flex-wrap: wrap; column-gap: .5em; row-gap: 0; margin: 0 0 var(--lh); padding: 0; list-style: none; } body[data-concept="notebook"] .c-cats li { display: flex; align-items: center; height: var(--lh); margin: 0; } body[data-concept="notebook"] .c-cat { display: inline-flex; align-items: center; height: calc(var(--lh) - 6px); padding: 0 .85em; border: 1px solid rgb(14 57 91 / .35); border-radius: 999px; font-size: .86em; line-height: 1; white-space: nowrap; color: var(--ls-navy); text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } body[data-concept="notebook"] .c-cat:hover { background: rgb(14 57 91 / .08); color: var(--ls-navy); } body[data-concept="notebook"] .c-cat[aria-current="page"] { background: var(--ls-navy); border-color: var(--ls-navy); color: #fbf8f2; } body[data-concept="notebook"] .c-cat:focus-visible { outline: 2px solid var(--ls-navy); outline-offset: 2px; } /* Two columns whenever the page is wide enough for two (the track minimum is a third of the width plus a pixel, so a third column never fits), one column on a phone. */ body[data-concept="notebook"] .c-posts { --gap: 1.6em; display: grid; column-gap: var(--gap); margin: 0; grid-template-columns: repeat(auto-fill, minmax(max(11.5em, calc((100% - 2 * var(--gap)) / 3 + 1px)), 1fr)); } body[data-concept="notebook"] .c-post h2 { margin: 0; font-size: 1.025em; font-weight: 500; } body[data-concept="notebook"] .c-post h2 a { color: var(--ls-navy); font-family: var(--ls-display); text-decoration: none; } body[data-concept="notebook"] .c-post h2 a:hover { text-decoration: underline 1px; text-underline-offset: .15em; } body[data-concept="notebook"] .c-post-excerpt { font-size: .92em; } body[data-concept="notebook"] .c-pager { grid-column: 1 / -1; } /* An article: its date and categories under the title. */ body[data-concept="notebook"] .c-article .c-post-date { margin: 0 0 var(--lh); } body[data-concept="notebook"] .c-article .c-post-date a { color: inherit; text-decoration: underline 1px; text-underline-offset: .18em; } /* ---------------------------------------------------------------- the back cover, a page of its own */ /* The first line under the logo is the h1 of the page; it reads as the lines below it. */ body[data-concept] #Footer .ls-footer-lead { max-width: 340px; margin: 0 0 4px; font-family: var(--body-font-family); font-size: inherit; font-weight: 400; line-height: inherit; letter-spacing: 0; color: inherit; } @media (prefers-reduced-motion: reduce) { body[data-concept="notebook"] .c-cat { transition: none; } } /* ---------------------------------------------------------------- phones: the page folds over the binding like a book */ /* One page is shown, bound at its left edge. A gutter at the left holds the pile of pages already turned: a leaf turned from right to left folds over the binding and lands, foreshortened, on that pile instead of leaving the screen (notebook.js squashes the folded part towards the fold until it fills the gutter). */ .nb-book[data-mode="single"] { --nb-gutter: clamp(18px, 6.5vw, 30px); --pw: min(100vw - var(--ls-rail, 0px) - 2 * var(--mobile-paddings) - var(--nb-gutter), var(--container), calc(var(--ph) * .8)); margin-left: var(--nb-gutter); clip-path: none; } .nb-book[data-mode="single"] .nb-stack-left { left: calc(-1 * var(--nb-gutter)); width: var(--nb-gutter); border-radius: 14px 0 0 14px / 8px 0 0 8px; /* The edge of the pages that have been turned, seen from the front: page lines, a rounded outer edge that is a little shorter than the page, and the shade where the paper bends into the fold at the binding. */ background: linear-gradient(90deg, transparent 45%, rgb(60 50 40 / .1) 75%, rgb(60 50 40 / .34)), repeating-linear-gradient(90deg, rgb(70 55 40 / .24) 0 1px, transparent 1px 3px), linear-gradient(90deg, #ddd5c6, #faf7f0 35%, #f1ece2); clip-path: polygon(0 1.4%, 100% 0, 100% 100%, 0 98.6%); box-shadow: none; filter: drop-shadow(-1px 3px 5px rgb(35 36 36 / .28)); } /* Only the front cover has been turned: a plain board, no page edges. */ .nb-book[data-mode="single"] .nb-stack-left[data-kind="board"] { border-radius: 3px 0 0 3px; background: linear-gradient(90deg, #d6c6b2, #e3d6c8 60%, #cdbca7); clip-path: none; } /* The back of a leaf in motion: plain paper, or the inside of a cover. */ .nb-book[data-mode="single"] .nb-sheet.is-board { background: var(--nb-endpaper); }