/* DocFluence hosted-site theme (2026-09-29): editorial rail layout, one brand colour plus derived tints. Palette is the logo's own: dark green #2e6417, mint #d9f4cd, black. Editorial direction per docs/brand-knowledge-base.md S39: strong typography, generous whitespace, magazine layouts, subtle movement, selective data visualization. No hospital blue, no gradients, no stock clinical imagery. Layout device is a two-column editorial rail: the label sits in the margin, the argument in the column. Figures use one hue, text in ink tokens, log scale declared. */ :root { --paper: #fbfaf6; --paper-2: #f3f1ea; --mint: #d9f4cd; --mint-soft: #eef8e8; --mint-line: #b9e3a8; --green: #2e6417; --green-deep: #1f4a0f; --ink: #111111; --ink-soft: #4a4a46; --ink-faint: #85847d; --rule: rgba(17, 17, 17, 0.12); --rule-soft: rgba(17, 17, 17, 0.07); --card: #ffffff; --shadow: 0 1px 2px rgba(17,17,17,0.04), 0 12px 32px -18px rgba(46,100,23,0.35); --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --cond: "Antonio", "Oswald", "Arial Narrow", sans-serif; --shell: 76rem; --gutter: 1.5rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0f140c; --paper-2: #151c11; --mint: #23361b; --mint-soft: #182412; --mint-line: #2f4a25; --green: #8fd074; --green-deep: #b9e8a4; --ink: #f1f3ec; --ink-soft: #c2c7b9; --ink-faint: #8a9184; --rule: rgba(241, 243, 236, 0.16); --rule-soft: rgba(241, 243, 236, 0.09); --card: #151c11; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -18px rgba(0,0,0,0.6); } } :root[data-theme="dark"] { --paper: #0f140c; --paper-2: #151c11; --mint: #23361b; --mint-soft: #182412; --mint-line: #2f4a25; --green: #8fd074; --green-deep: #b9e8a4; --ink: #f1f3ec; --ink-soft: #c2c7b9; --ink-faint: #8a9184; --rule: rgba(241,243,236,0.16); --rule-soft: rgba(241,243,236,0.09); --card: #151c11; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -18px rgba(0,0,0,0.6); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.7; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; } ::selection { background: var(--green); color: #fff; } .skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: .75rem 1rem; z-index: 50; } .skip:focus { left: 1rem; top: 1rem; } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } /* ---------------------------------------------------------------- type --- */ .h1, .h2, .h1-sm, .post-title, .cap-title, .step-title, .flow-t { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; } .h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.08; margin: 0 0 1.25rem; max-width: 26ch; } .h1-hero { font-size: clamp(2.6rem, 6.4vw, 4.8rem); max-width: 22ch; } .h1-sm { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.15; margin: 0 0 1rem; max-width: 28ch; } .h2 { font-size: clamp(1.55rem, 2.9vw, 2.2rem); line-height: 1.18; margin: 0 0 1.25rem; max-width: 30ch; } .h1 em, .h1-hero em, .h2 em { font-style: italic; color: var(--green); } .eyebrow { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: .6rem; } .eyebrow::before { content: ""; width: 1.4rem; height: 2px; background: var(--green); border-radius: 2px; } .eyebrow a { text-decoration: none; } .numeral { font-family: var(--cond); font-size: 2.2rem; line-height: 1; color: var(--mint-line); margin: 0 0 1.1rem; letter-spacing: .02em; } p { margin: 0 0 1.15rem; max-width: 68ch; } .lede { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.62; color: var(--ink-soft); max-width: 60ch; } .footnote, .under-form, .hint, .fig-note, .fig-caption { font-size: .86rem; color: var(--ink-faint); line-height: 1.6; } /* ------------------------------------------------------------ masthead --- */ .masthead { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule-soft); } .masthead-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; } .logo { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; } .logo-img { height: 2.6rem; width: auto; } .logo-lockup { display: none; align-items: center; gap: .7rem; } .logo-lockup-text { display: inline-flex; } .logo-lockup-text .lock-text { color: var(--ink); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; } .logo-lockup img { height: 2.3rem; width: auto; } .logo-lockup .lock-text { font-family: var(--cond); font-weight: 400; font-size: 1.55rem; letter-spacing: .18em; line-height: 1; } .logo-lockup .lock-text b { font-weight: 400; color: var(--green); } @media (prefers-color-scheme: dark) { } .nav { display: flex; align-items: center; gap: 1.75rem; } .nav ul { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; } .nav ul a { font-size: .9rem; text-decoration: none; color: var(--ink-soft); padding-block: .35rem; border-bottom: 2px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .nav ul a:hover { color: var(--ink); } .nav ul a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green); } .nav .nav-cta { color: #fff; } .nav [data-df-part="nav"] { display: flex; align-items: center; gap: 1.75rem; } /* editable nav part wrapper: keep links + button on one row (2026-10-13) */ .navtoggle-input, .navtoggle { display: none; } @media (max-width: 66rem) { .nav [data-df-part="nav"] { flex-direction: column; align-items: stretch; gap: 0; } .navtoggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; cursor: pointer; align-items: flex-end; } .navtoggle span { display: block; width: 1.4rem; height: 2px; background: var(--ink); border-radius: 2px; } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: .5rem var(--gutter) 1.5rem; box-shadow: var(--shadow); } .navtoggle-input:checked ~ .nav { display: flex; } .nav ul { flex-direction: column; align-items: stretch; gap: 0; } .nav ul li { border-bottom: 1px solid var(--rule-soft); } .nav ul a { display: block; padding: .85rem 0; font-size: 1rem; border-bottom: none; } .nav-cta { margin-top: 1.25rem; text-align: center; } } /* ------------------------------------------------------------- buttons --- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: .92rem; font-weight: 600; line-height: 1; padding: 1rem 1.55rem; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .btn-sm { padding: .72rem 1.15rem; font-size: .86rem; } .btn-primary { background: var(--green); color: #fff; box-shadow: 0 8px 20px -10px rgba(46,100,23,.6); } .btn-primary:hover { background: var(--green-deep); transform: translateY(-1px); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #0f140c; } } :root[data-theme="dark"] .btn-primary { color: #0f140c; } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--rule); } .btn-secondary:hover { border-color: var(--green); color: var(--green); } .btn-text { display: inline-block; font-size: .95rem; font-weight: 600; color: var(--green); text-decoration: none; border-bottom: 1.5px solid var(--mint-line); padding-bottom: 2px; transition: border-color 140ms ease, color 140ms ease; } .btn-text:hover { color: var(--green-deep); border-bottom-color: var(--green); } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; } /* -------------------------------------------------------------- layout --- */ .band { padding: clamp(3.25rem, 7vw, 6rem) 0; border-bottom: 1px solid var(--rule-soft); } .band-tint { background: var(--paper-2); } .band-mint { background: var(--mint-soft); border-color: var(--mint-line); } .band:last-of-type { border-bottom: none; } .editorial { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 3.5rem; align-items: start; } .rail { position: sticky; top: 6.25rem; } .rail .eyebrow, .rail .numeral { margin-bottom: 0; } .column > :last-child { margin-bottom: 0; } @media (max-width: 58rem) { .editorial { grid-template-columns: 1fr; gap: 0; } .rail { position: static; } .rail .eyebrow, .rail .numeral { margin-bottom: 1rem; } } /* hero */ .hero { position: relative; overflow: hidden; padding: clamp(4rem, 10vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); } .hero-panel { background: var(--mint-soft); border: 1px solid var(--mint-line); border-radius: 20px; padding: clamp(1.5rem, 4vw, 3rem); } .pagehead { position: relative; padding: clamp(3.25rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule-soft); overflow: hidden; } .pagehead .shell { position: relative; } /* ---------------------------------------------------------- collections --- */ .cap-grid { list-style: none; margin: 2rem 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.1rem; } .cap-grid > li { background: var(--card); border: 1px solid var(--rule-soft); border-radius: 14px; padding: 1.4rem 1.4rem 1.5rem; position: relative; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .cap-grid > li::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--mint-line); } .cap-grid > li:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--mint-line); } .cap-title { font-size: 1.18rem; margin: .4rem 0 .55rem; } .cap-grid p { font-size: .95rem; color: var(--ink-soft); margin: 0; max-width: 42ch; } .steps { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; } .steps > li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.35rem 0 0; border-top: 1px solid var(--rule); } .steps > li::before { content: counter(step, decimal-leading-zero); font-family: var(--cond); font-size: 1.9rem; line-height: 1; color: var(--green); padding-top: .2rem; } .steps > li > * { grid-column: 2; } .step-title { font-size: 1.28rem; margin: 0 0 .5rem; } .steps p { color: var(--ink-soft); margin: 0; } .tags { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem .5rem; margin: 1.75rem 0 0; padding: 0; } .tags > li { font-size: .78rem; color: var(--green-deep); background: var(--mint-soft); border: 1px solid var(--mint-line); border-radius: 100px; padding: .34rem .75rem; line-height: 1.3; } .related { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; } .qa { margin: 1.75rem 0 0; display: grid; gap: .25rem; } .qa dt { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: .45rem; } .qa dd { margin: 0 0 1.75rem; max-width: 66ch; color: var(--ink-soft); } .qa dd:last-child { margin-bottom: 0; } .discipline .column { background: var(--card); border: 1px solid var(--rule-soft); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.5rem); } .note { border-left: 3px solid var(--green); background: var(--mint-soft); border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; max-width: 62ch; } .note p { color: var(--ink-soft); margin-bottom: 0; } .closing { max-width: 46rem; } .band-closing { background: var(--green); color: #fff; border-bottom: none; } .band-closing .h1-sm, .band-closing .lede { color: #fff; } .band-closing .lede { opacity: .9; } .band-closing .btn-primary { background: #fff; color: var(--green-deep); box-shadow: none; } .band-closing .btn-primary:hover { background: var(--mint); } .band-closing .btn-secondary { color: #fff; border-color: rgba(255,255,255,.5); } .band-closing .btn-secondary:hover { border-color: #fff; color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band-closing { color: #0f140c; } :root:not([data-theme="light"]) .band-closing .h1-sm, :root:not([data-theme="light"]) .band-closing .lede { color: #0f140c; } } /* ------------------------------------------------------------- figures --- */ .fig-head { max-width: 46rem; margin-bottom: 2.25rem; } .proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; } .proof-tile { margin: 0; background: var(--card); border: 1px solid var(--mint-line); border-radius: 16px; padding: 1.4rem 1.4rem 1.2rem; } .proof-label { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem; } .proof-number { font-family: var(--serif); font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.05; color: var(--green); margin: 0 0 .35rem; letter-spacing: -.02em; overflow-wrap: anywhere; } .proof-sub { font-size: .9rem; color: var(--ink-soft); margin: 0 0 1rem; } .proof-bars { width: 100%; height: auto; } .fig-axis { stroke: var(--rule); stroke-width: 1; } .fig-bar { fill: var(--green); } .fig-bar-muted { fill: var(--mint-line); } .fig-bar-soft { fill: var(--mint-line); } .fig-val { font-family: var(--sans); font-size: 9px; fill: var(--ink-soft); } .fig-note { margin: .5rem 0 0; } .fig-table { margin-top: 1.5rem; font-size: .9rem; } .fig-table summary { cursor: pointer; color: var(--ink-faint); } .fig-table table { border-collapse: collapse; margin-top: .75rem; width: 100%; max-width: 40rem; } .fig-table th, .fig-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rule-soft); } .fig-caption { margin: 1.25rem 0 0; max-width: 62ch; } .fig-rank { margin: 1.75rem 0 0; } .rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .rank-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: center; gap: .75rem; position: relative; } .rank-n { font-family: var(--cond); font-size: 1.1rem; color: var(--ink-faint); } .rank-bar { display: block; height: 1.9rem; width: var(--w); border-radius: 6px; background: var(--mint); border: 1px solid var(--mint-line); grid-column: 2; grid-row: 1; } .rank-name { grid-column: 2; grid-row: 1; padding-left: .8rem; font-size: .92rem; color: var(--ink); } .rank-row-hl .rank-bar { background: var(--green); border-color: var(--green); } .rank-row-hl .rank-name { color: #fff; font-weight: 600; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rank-row-hl .rank-name { color: #0f140c; } } :root[data-theme="dark"] .rank-row-hl .rank-name { color: #0f140c; } .flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1rem; align-items: stretch; margin: 0; } .flow-node { background: var(--card); border: 1px solid var(--mint-line); border-radius: 16px; padding: 1.4rem; } .flow-node-end { border-color: var(--green); } .flow-k { font-family: var(--cond); font-size: 1.6rem; color: var(--mint-line); margin: 0 0 .2rem; line-height: 1; } .flow-t { font-size: 1.5rem; margin: 0 0 .4rem; } .flow-q { font-size: .92rem; color: var(--ink-soft); margin: 0 0 .9rem; } .flow-list { list-style: none; margin: 0; padding: 0; font-size: .86rem; color: var(--ink-soft); display: grid; gap: .2rem; } .flow-list li::before { content: "\2022"; color: var(--green); margin-right: .5rem; } .flow-arrow { display: flex; align-items: center; color: var(--green); width: 2.2rem; } @media (max-width: 58rem) { .flow { grid-template-columns: 1fr; } .flow-arrow { transform: rotate(90deg); width: auto; justify-content: center; } } .funnel { margin: 1.75rem 0 0; display: grid; gap: .55rem; } .funnel-row { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; } .funnel-bar { display: block; height: 3.2rem; width: var(--w); border-radius: 8px; background: var(--mint); border: 1px solid var(--mint-line); grid-row: 1; grid-column: 1; } .funnel-text { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; justify-content: center; padding-left: 1rem; font-size: .92rem; line-height: 1.3; } .funnel-gov { font-size: .78rem; color: var(--ink-soft); } .funnel-row:nth-child(4) .funnel-bar { background: var(--green); border-color: var(--green); } .funnel-row:nth-child(4) .funnel-text { color: #fff; } .funnel-row:nth-child(4) .funnel-gov { color: rgba(255,255,255,.85); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .funnel-row:nth-child(4) .funnel-text, :root:not([data-theme="light"]) .funnel-row:nth-child(4) .funnel-gov { color: #0f140c; } } /* ------------------------------------------------------------- insights -- */ .post-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.1rem; } .post-list > li { background: var(--card); border: 1px solid var(--rule-soft); border-radius: 16px; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .post-list > li:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--mint-line); } .post-list a { display: block; padding: 1.5rem 1.5rem 1.6rem; text-decoration: none; height: 100%; } .post-title { font-size: 1.32rem; margin: 0 0 .6rem; line-height: 1.22; } .post-summary { color: var(--ink-soft); margin: 0; font-size: .93rem; max-width: 62ch; } .post-list .play-trigger { margin: -1rem 1.5rem 1.5rem; } .post-meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .85rem; } .tag-inline::before { content: "\00b7"; margin-right: .7rem; color: var(--mint-line); } .post-meta > :first-child.tag-inline::before { content: none; margin: 0; } .prose { max-width: 44rem; } .prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.22; letter-spacing: -.012em; margin: 2.75rem 0 1rem; } .prose h3 { font-family: var(--serif); font-weight: 500; font-size: 1.22rem; margin: 2.25rem 0 .75rem; } .prose p, .prose li { font-size: 1.06rem; line-height: 1.72; } .prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.3rem; } .prose li { margin-bottom: .5rem; } .prose blockquote { margin: 2rem 0; padding: 1rem 1.5rem; border-left: 3px solid var(--green); background: var(--mint-soft); border-radius: 0 12px 12px 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); } .prose a { color: var(--green); text-decoration-color: var(--mint-line); text-underline-offset: 3px; } .prose a:hover { text-decoration-color: var(--green); } .prose hr { border: none; border-top: 1px solid var(--rule); margin: 2.75rem 0; } .prose h2:last-of-type { margin-top: 3.25rem; padding-top: 2rem; border-top: 1px solid var(--rule); } /* -------------------------------------------------------------- contact -- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem 4.5rem; align-items: start; } @media (max-width: 58rem) { .contact-grid { grid-template-columns: 1fr; } } .contact-form-col { background: var(--card); border: 1px solid var(--rule-soft); border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.5rem); } .contact-aside { border-top: 3px solid var(--green); padding-top: 1.5rem; } .contact-aside p { font-size: .95rem; color: var(--ink-soft); max-width: 48ch; } .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.4rem; } .field { grid-column: 1 / -1; } .field-half { grid-column: span 1; } @media (max-width: 34rem) { .field-grid { grid-template-columns: 1fr; } .field-half { grid-column: 1 / -1; } } .field label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5rem; } .field .opt { text-transform: none; letter-spacing: 0; color: var(--ink-faint); font-weight: 400; } .field .hint { margin: -.25rem 0 .5rem; } input, textarea, select { width: 100%; font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: .85rem .95rem; } textarea { resize: vertical; } input:focus, textarea:focus, select:focus { border-color: var(--green); outline-offset: 1px; } select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.3rem, calc(100% - .85rem) 1.3rem; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .field-err input, .field-err textarea, .field-err select { border-color: #b3431f; } .err { font-size: .85rem; color: #b3431f; margin: .4rem 0 0; } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } form .btn { margin-top: 2rem; } .under-form { margin: 1rem 0 0; } .notice { border-left: 3px solid var(--green); background: var(--mint-soft); border-radius: 0 12px 12px 0; padding: 1rem 1.5rem; max-width: 54ch; } .notice p { margin: 0; color: var(--ink-soft); } .notice-err { border-left-color: #b3431f; background: transparent; } /* ---------------------------------------------------------------- legal -- */ .legal { max-width: 44rem; } .legal h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 2.25rem 0 .75rem; } .legal p, .legal li { font-size: .98rem; color: var(--ink-soft); } .legal ul { padding-left: 1.3rem; } /* --------------------------------------------------------------- footer -- */ .footer { background: var(--ink); color: var(--paper); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer { background: var(--paper-2); color: var(--ink); } } :root[data-theme="dark"] .footer { background: var(--paper-2); color: var(--ink); } .footer-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem 3rem; align-items: start; } @media (max-width: 52rem) { .footer-inner { grid-template-columns: 1fr; } } .footer-line { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.45; margin: 0 0 .85rem; max-width: 34ch; } .footer-place, .footer-legal { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; margin: 0; } .footer-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; } .footer-nav a { display: block; padding: .35rem 0; font-size: .92rem; text-decoration: none; opacity: .75; } .footer-nav a:hover { opacity: 1; } .footer-legal { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; } .footer-legal a { text-decoration: none; } .footer-legal a:hover { text-decoration: underline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer-legal { border-top-color: var(--rule); } } /* ------------------------------------------------------------- podcast --- */ .show-name { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-soft); margin: -.4rem 0 1.25rem; } .player { width: 100%; max-width: 44rem; margin-top: 1.75rem; border-radius: 2px; } .transcript { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1.5rem 0; max-width: 44rem; } .transcript > summary { cursor: pointer; list-style: none; display: grid; gap: .3rem; } .transcript > summary::-webkit-details-marker { display: none; } .transcript-label { font-family: var(--serif); font-size: 1.22rem; } .transcript-label::after { content: " +"; color: var(--ink-faint); font-family: var(--sans); } .transcript[open] .transcript-label::after { content: " \2212"; } .transcript-hint { font-size: .88rem; color: var(--ink-faint); } .transcript-body { margin-top: 1.75rem; } .transcript-body p { color: var(--ink-soft); } .sticky-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink); color: var(--paper); border-top: 1px solid rgba(255,255,255,.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sticky-player { background: var(--paper-2); color: var(--ink); border-top-color: var(--rule); } } :root[data-theme="dark"] .sticky-player { background: var(--paper-2); color: var(--ink); border-top-color: var(--rule); } .sticky-player-inner { display: flex; align-items: center; gap: 1.5rem; padding-block: .75rem; } .sp-meta { min-width: 0; flex: 0 1 22rem; } .sp-show { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0; } .sp-title { font-family: var(--serif); font-size: 1rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-player audio { flex: 1 1 auto; height: 2.5rem; min-width: 0; } .sp-close { background: none; border: none; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: .6; padding: .25rem .5rem; } .sp-close:hover { opacity: 1; } body.has-player .footer { padding-bottom: 6rem; } @media (max-width: 46rem) { .sticky-player-inner { flex-wrap: wrap; gap: .5rem 1rem; } .sp-meta { flex: 1 1 100%; } .sticky-player audio { flex: 1 1 100%; } } /* --------------------------------------------------------------- motion -- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- blog --- */ .pagehead-tight { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .crumb-sep { color: var(--ink-faint); margin: 0 .35rem; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; } @media (max-width: 62rem) { .blog-layout { grid-template-columns: 1fr; } } .blog-main > :last-child { margin-bottom: 0; } .bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; } .bgrid-3 { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .bcard { background: var(--card); border: 1px solid var(--rule-soft); border-radius: 16px; overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .bcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--mint-line); } .bcard-link { display: block; text-decoration: none; height: 100%; } .bcard-body { padding: 1.1rem 1.25rem 1.25rem; } .bcard-cat { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 0 0 .45rem; } .bcard-title { font-family: var(--serif); font-weight: 400; font-size: 1.22rem; line-height: 1.22; letter-spacing: -.01em; margin: 0 0 .55rem; text-wrap: balance; } .bcard-summary { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bcard-meta { font-size: .76rem; color: var(--ink-faint); margin: 0; display: flex; gap: .9rem; } .bcard-big { margin-bottom: 1.25rem; } .bcard-big .bcard-link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .bcard-big .thumb { height: 100%; } .bcard-big .bcard-body { padding: 1.75rem; align-self: center; } .bcard-big .bcard-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .bcard-big .bcard-summary { -webkit-line-clamp: 4; font-size: .95rem; } @media (max-width: 46rem) { .bcard-big .bcard-link { grid-template-columns: 1fr; } } .thumb { width: 100%; height: auto; display: block; aspect-ratio: 400 / 220; } .th-bg { fill: var(--mint-soft); } .th-green { fill: var(--green); opacity: .92; } .th-mint { fill: var(--mint); } .th-line { fill: none; stroke: var(--green); stroke-width: 1.5; } .th-ring { fill: none; stroke: var(--mint-line); stroke-width: 3; } .th-label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; fill: var(--green-deep); } .bfilter { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin: 0 0 1.25rem; padding: .9rem 1.1rem; background: var(--mint-soft); border: 1px solid var(--mint-line); border-radius: 12px; } .bfilter p { margin: 0; } .bfilter-n { color: var(--ink-faint); margin-left: .75rem; font-size: .88rem; } .bsb { position: sticky; top: 6.25rem; display: grid; gap: 1.75rem; } @media (max-width: 62rem) { .bsb { position: static; } } .bsearch { display: flex; gap: .5rem; } .bsearch input { border-radius: 999px; padding: .7rem 1rem; font-size: .92rem; } .bsb-h { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .75rem; } .bsb-block { border-top: 1px solid var(--rule-soft); padding-top: 1.25rem; } .bsb-cats, .bsb-recent, .bsb-cloud { list-style: none; margin: 0; padding: 0; } .bsb-cats li a { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; text-decoration: none; font-size: .9rem; color: var(--ink); border-bottom: 1px solid var(--rule-soft); } .bsb-cats li a:hover, .bsb-cats li a[aria-current] { color: var(--green); } .bsb-n { font-size: .74rem; color: var(--ink-faint); background: var(--paper-2); border-radius: 999px; padding: .1rem .55rem; } .bsb-recent li { padding: .55rem 0; border-bottom: 1px solid var(--rule-soft); } .bsb-recent a { display: block; font-size: .9rem; font-weight: 500; text-decoration: none; line-height: 1.35; } .bsb-recent a:hover { color: var(--green); } .bsb-date { display: block; font-size: .74rem; color: var(--ink-faint); margin-top: .2rem; } .bsb-cloud { display: flex; flex-wrap: wrap; gap: .4rem; } .bsb-cloud a { display: inline-block; font-size: .78rem; color: var(--green-deep); background: var(--mint-soft); border: 1px solid var(--mint-line); border-radius: 999px; padding: .3rem .7rem; text-decoration: none; } .bsb-cloud a:hover, .bsb-cloud a[aria-current] { background: var(--mint); } .bsb-cta p { margin: 0 0 .5rem; font-size: .92rem; color: var(--ink-soft); } .post-tags { margin-top: 2.5rem; } .post-tags a { text-decoration: none; color: inherit; } .related-block { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); } .related-block .h2 { font-size: 1.5rem; margin-bottom: 1.25rem; } /* --------------------------------------------------------- testimonials --- */ .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; } .quote { margin: 0; background: var(--card); border: 1px solid var(--mint-line); border-radius: 16px; padding: 1.6rem 1.6rem 1.4rem; } .quote blockquote { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.18rem; line-height: 1.5; } .quote blockquote::before { content: "\201C"; color: var(--green); font-size: 2rem; line-height: 0; margin-right: .2rem; vertical-align: -.4rem; } .quote figcaption { font-size: .86rem; color: var(--ink-soft); display: grid; } .quote figcaption strong { color: var(--ink); font-weight: 600; } /* ---------------------------------------------------------- positioning --- */ .pos { margin: 1.75rem 0 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; } .pos-panel { border-radius: 16px; padding: 1.4rem; border: 1px solid var(--rule-soft); background: var(--card); } .pos-after { border-color: var(--green); background: var(--mint-soft); } .pos-k { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .5rem; } .pos-after .pos-k { color: var(--green); } .pos-t { font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; margin: 0 0 1rem; } .pos-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .pos-cloud li { font-size: .8rem; color: var(--ink-soft); opacity: var(--o, .5); border: 1px dashed var(--rule); border-radius: 999px; padding: .28rem .7rem; } .pos-one { font-weight: 600; color: var(--green-deep); margin: 0 0 .9rem; } .pos-out { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; color: var(--ink-soft); } .pos-out li::before { content: "\2192"; color: var(--green); margin-right: .5rem; } .pos-arrow { display: flex; align-items: center; color: var(--green); width: 2.2rem; } .pos .fig-caption { grid-column: 1 / -1; } @media (max-width: 58rem) { .pos { grid-template-columns: 1fr; } .pos-arrow { transform: rotate(90deg); width: auto; justify-content: center; } } /* ------------------------------------------------------ founder photo ----- */ .column-with-photo { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; align-items: start; } .column-with-photo > *:not(.founder-photo) { grid-column: 2; } .founder-photo { grid-column: 1; grid-row: 1 / span 6; width: 11rem; height: 11rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--mint); } @media (max-width: 46rem) { .column-with-photo { grid-template-columns: 1fr; } .column-with-photo > *:not(.founder-photo) { grid-column: 1; } .founder-photo { grid-row: auto; width: 8rem; height: 8rem; } } .about-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 3rem; align-items: center; } .about-portrait { width: 100%; max-width: 22rem; margin-left: auto; border-radius: 24px; object-fit: cover; aspect-ratio: 1; box-shadow: var(--shadow); } .about-name { margin: 1rem 0 0; display: grid; font-size: .95rem; color: var(--ink-soft); } .about-name strong { color: var(--ink); font-size: 1.05rem; } @media (max-width: 58rem) { .about-grid { grid-template-columns: 1fr; } .about-portrait { max-width: 14rem; margin: 0; order: -1; } } .cover-img { width: 100%; aspect-ratio: 400 / 220; object-fit: cover; display: block; } .post-cover { width: 100%; max-width: 100%; aspect-ratio: 1440 / 792; object-fit: cover; border-radius: 20px; margin: 0 0 1rem; } .post-subtitle { font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.35; color: var(--ink-soft); margin: -.5rem 0 1rem; max-width: 40ch; } .bcard-sub { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ------------------------------------------------------- segment art ----- */ .column-has-art { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 0 2rem; } .column-has-art > *:not(.seg-art) { grid-column: 1; } .seg-art { grid-column: 2; grid-row: 1 / span 10; width: 16rem; aspect-ratio: 1; object-fit: cover; border-radius: 18px; border: 1px solid var(--mint-line); } @media (max-width: 58rem) { .column-has-art { grid-template-columns: 1fr; } .column-has-art > *:not(.seg-art) { grid-column: 1; } .seg-art { grid-row: auto; width: 100%; max-width: 20rem; margin-bottom: 1rem; } } /* ---------------------------------------------------------- pagination --- */ .bpages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; margin-top: 2.5rem; } .bp { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem; border-radius: 999px; border: 1px solid var(--rule); font-size: .92rem; font-weight: 500; text-decoration: none; color: var(--ink); background: var(--card); transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease; } .bp:hover { border-color: var(--green); color: var(--green); } .bp-current { background: var(--green); border-color: var(--green); color: #fff; } .bp-arrow { font-size: 1.4rem; line-height: 1; gap: .35rem; padding: 0 .9rem; } .bp-word { font-size: .82rem; font-weight: 600; letter-spacing: .01em; font-family: var(--sans, inherit); } .bp-count { flex-basis: 100%; text-align: center; font-size: .84rem; color: var(--ink-faint); margin-top: .5rem; } @media (max-width: 30rem) { .bp-word { display: none; } .bp-arrow { padding: 0 .6rem; } } .bp-off { opacity: .35; pointer-events: none; } .bp-gap { border: none; background: none; min-width: 1.5rem; color: var(--ink-faint); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bp-current { color: #0f140c; } } .latest-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; max-width: none; } .latest-head .h2 { margin-bottom: 0; } @media (max-width: 46rem) { .latest-head { flex-direction: column; align-items: start; } } /* ---------------------------------------------------- page header art --- */ .pagehead-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .pagehead-art { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 20px; border: 1px solid var(--mint-line); box-shadow: 0 18px 44px rgba(20, 40, 24, .12); } @media (max-width: 58rem) { .pagehead-grid { grid-template-columns: 1fr; } .pagehead-art { aspect-ratio: 16 / 10; margin-top: .5rem; } } /* ------------------------------------------------ podcast, DocFluence shape --- */ .showhero { display: flex; gap: 2.25rem; align-items: flex-start; margin-bottom: 2rem; } .showcover { width: 17rem; height: 17rem; flex: 0 0 17rem; border-radius: 22px; object-fit: cover; border: 1px solid var(--mint-line); box-shadow: 0 18px 44px rgba(20, 40, 24, .14); } .showhero-text { min-width: 0; } .showhero-text .h1 { margin-bottom: .75rem; } .showhero-text .lede { max-width: 38rem; } .showhero-text .eyebrow a { text-decoration: none; } @media (max-width: 46rem) { .showhero { flex-direction: column; } .showcover { width: 13rem; height: 13rem; flex-basis: auto; } } .platforms { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .5rem; } .platforms a { border: 1px solid var(--rule); border-radius: 999px; padding: .5rem .95rem; font-size: .84rem; font-weight: 600; text-decoration: none; color: var(--ink); background: var(--card); } .platforms a:hover { border-color: var(--green); color: var(--green); } .episodes { display: grid; gap: 1.1rem; margin: .5rem 0 2.5rem; } .episode { padding: 1.35rem 1.5rem; border: 1px solid var(--rule-soft); border-radius: 16px; background: var(--card); transition: border-color 160ms ease, box-shadow 160ms ease; } .episode h2 { font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; margin: 0 0 .4rem; } .episode h2 a { text-decoration: none; color: var(--ink); } .episode h2 a:hover { color: var(--green); } .epmeta { color: var(--ink-faint); font-size: .82rem; margin-bottom: .7rem; } .epmeta a { color: var(--green); font-weight: 600; text-decoration: none; } .playbtn { display: inline-flex; align-items: center; gap: .5rem; margin: .25rem 0 .9rem; padding: .65rem 1.1rem; border-radius: 999px; border: none; background: var(--green); color: #fff; font: 600 .9rem var(--sans); cursor: pointer; transition: background-color 140ms ease, transform 140ms ease; } .playbtn:hover { background: var(--green-deep, #244f12); transform: translateY(-1px); } .episode.loaded { border-color: var(--mint-line); } .episode.playing { border-color: var(--green); box-shadow: 0 0 0 3px var(--mint-soft); } .episode.playing .playbtn { background: var(--ink); } .episode .notes p { margin: 0 0 .7rem; color: var(--ink-soft); font-size: .96rem; line-height: 1.55; } .episode .notes a { color: var(--green); font-weight: 600; word-break: break-all; } .eptags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; } .eptags .cat { background: var(--ink); color: var(--paper); font-size: .74rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; text-decoration: none; } .eptags .tag { display: inline-block; font-size: .76rem; color: var(--green-deep); background: var(--mint-soft); border: 1px solid var(--mint-line); border-radius: 999px; padding: .3rem .7rem; text-decoration: none; } .eptags .tag:hover { background: var(--mint); } .episode-page .notes p { font-size: 1.05rem; line-height: 1.65; } .episode-page .h2 { margin: 2rem 0 .75rem; } .chapters { list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: 44rem; } .chapters li { padding: .45rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .96rem; } .chapters .stamp { display: inline-block; min-width: 3.4rem; color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; } .epnav { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 1.5rem; font-weight: 600; } .epnav a { color: var(--ink); text-decoration: none; max-width: 48%; } .epnav a:hover { color: var(--green); } .closing-inline { margin-top: 2.5rem; padding: 1.75rem; border-radius: 18px; background: var(--mint-soft); border: 1px solid var(--mint-line); } .closing-inline p { color: var(--ink-soft); margin: .5rem 0 1rem; } .pod-sb .bsearch input { flex: 1; min-width: 0; } .sp-controls { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0; } .sp-btn { border: 0; background: rgba(255,255,255,.14); color: inherit; border-radius: 999px; width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: .7rem; } .sp-btn:hover { background: rgba(255,255,255,.28); } .sp-title { display: block; color: inherit; text-decoration: none; } .sp-title:hover { color: var(--mint); } @media (max-width: 46rem) { .sp-controls { flex: 1 1 100%; } } .episode-page .showhero .episode, .episode-page .showhero .episode.playing { box-shadow: none; border: 0; } .episode-page .showhero .playbtn { margin-bottom: .25rem; } /* ------------------------------------------------------------ additions -- */ /* FAQ, stats, founder byline, footer extras and the link-in-bio page for the DocFluence cookie-cutter package (2026-09-29). */ .faq { display: grid; gap: .6rem; } .faq-item { border: 1px solid var(--rule); border-radius: 12px; background: var(--card); padding: .2rem 1.1rem; } .faq-item summary { list-style: none; cursor: pointer; padding: .8rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--cond); font-size: 1.6rem; color: var(--green); line-height: 1; } .faq-item[open] summary::after { content: "\2013"; } .faq-q { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; margin: 0; } .faq-a { padding: 0 0 1rem; color: var(--ink-soft); } .faq-a p { margin: 0; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.25rem; } .stat { background: var(--card); border-radius: 14px; padding: 1.25rem 1.25rem 1rem; box-shadow: var(--shadow); } .stat-value { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; color: var(--green); margin: 0 0 .4rem; } .stat-label { font-size: .9rem; color: var(--ink-soft); margin: 0; } .about-name { margin: 1rem 0 0; } .about-name span { display: block; font-size: .9rem; color: var(--ink-faint); } .footer-social a { margin-right: .9rem; font-size: .9rem; } .footer-place a { color: inherit; } .links-page { min-height: calc(100vh - 6rem); display: flex; align-items: flex-start; justify-content: center; padding: 2.5rem 1rem 4rem; } .links-card { width: 100%; max-width: 30rem; text-align: center; } .links-avatar { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; box-shadow: var(--shadow); background: var(--card); } .links-logo { max-width: 14rem; max-height: 5rem; margin: 0 auto 1rem; display: block; } .links-title { font-family: var(--serif); font-size: 1.7rem; margin: 0 0 .35rem; } .links-sub { color: var(--ink-soft); margin: 0 0 1.6rem; } .links-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .8rem; } .links-list a { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; text-align: left; transition: transform .12s, border-color .12s; } .links-list a:hover { transform: translateY(-1px); border-color: var(--green); } .links-list a.featured { background: var(--green); color: #fff; border-color: var(--green); } .links-list .lk-icon { width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--mint-soft); display: inline-flex; align-items: center; justify-content: center; flex: none; font-family: var(--cond); font-size: .9rem; letter-spacing: .04em; color: var(--green-deep); } .links-list a.featured .lk-icon { background: rgba(255,255,255,.18); color: #fff; } .links-list .lk-icon svg { width: 1.2rem; height: 1.2rem; fill: currentColor; } .links-list .lk-text { display: flex; flex-direction: column; gap: .1rem; } .links-list .lk-label { font-weight: 600; } .links-list .lk-desc { font-size: .85rem; color: var(--ink-faint); } .links-list a.featured .lk-desc { color: rgba(255,255,255,.8); } .links-social { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1.5rem; } .links-social a { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--card); border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); } .links-social a svg { width: 1.2rem; height: 1.2rem; fill: currentColor; } .links-foot { font-size: .8rem; color: var(--ink-faint); } .links-foot a { color: inherit; } .links-minimal .masthead, .links-minimal .footer { display: none; } /* Link-in-bio options (2026-09-30): themes, button shapes, headings, text blocks, badges */ .links-bio { color: var(--ink-soft); margin: -.8rem 0 1.6rem; font-size: .98rem; } .links-bio p { margin: 0 0 .5rem; } .links-list .lk-heading { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--ink-faint); padding: .6rem 0 0; text-align: left; } .links-list .lk-textblock { text-align: left; color: var(--ink-soft); font-size: .95rem; padding: .1rem .2rem; } .links-list .lk-textblock p { margin: 0 0 .4rem; } .links-list .lk-emoji { font-size: 1.15rem; line-height: 1; margin-right: .35rem; } .links-list .lk-icon .lk-emoji { margin: 0; } .links-list .lk-badge { display: inline-block; margin-left: .5rem; padding: .1rem .45rem; border-radius: 999px; background: var(--green); color: #fff; font-size: .68rem; font-family: var(--cond); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; } .links-list a.featured .lk-badge { background: #fff; color: var(--green-deep); } .links-note { font-size: .85rem; color: var(--ink-soft); margin: 0 0 .6rem; } .links-btn-pill .links-list a { border-radius: 999px; } .links-btn-square .links-list a { border-radius: 4px; } .links-btn-outline .links-list a { background: transparent; box-shadow: none; border: 2px solid var(--green); } .links-btn-outline .links-list a.featured { background: var(--green); } .links-theme-dark { background: #121417; color: #f3f4f6; } .links-theme-dark .links-title, .links-theme-dark .links-sub, .links-theme-dark .links-bio, .links-theme-dark .lk-textblock, .links-theme-dark .links-note, .links-theme-dark .links-foot { color: #e5e7eb; } .links-theme-dark .links-list a { background: #1c2026; border-color: #2a2f37; color: #f3f4f6; box-shadow: none; } .links-theme-dark .links-list .lk-icon { background: #2a2f37; color: #e5e7eb; } .links-theme-dark .links-social a { background: #1c2026; border-color: #2a2f37; color: #e5e7eb; } .links-theme-dark .lk-heading { color: #9ca3af; } .links-theme-light { background: #ffffff; } .links-theme-light .links-list a { background: #f7f7f8; border-color: #e5e7eb; box-shadow: none; } .links-theme-gradient { background: linear-gradient(160deg, var(--mint-soft) 0%, #ffffff 55%, var(--mint-soft) 100%); } .links-theme-gradient .links-list a { backdrop-filter: blur(4px); } body:has(.links-theme-dark) { background: #121417; } /* ---- Lead capture popup + inline offer (DocFluence lead_capture, 2026-10-01) ---- */ .df-cap-overlay{position:fixed;inset:0;z-index:9000;background:rgba(16,18,28,.55);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)} .df-cap-overlay[hidden]{display:none} .df-cap-card{position:relative;background:var(--paper,#fff);color:var(--ink,#1a1a2e);width:min(520px,100%);border-radius:18px;padding:28px 28px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:dfcap .25s ease-out} @keyframes dfcap{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}} .df-cap-close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:#777} .df-cap-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--primary,#2e6417);font-weight:700;margin:0 0 6px} .df-cap-h{font-size:1.45rem;line-height:1.2;margin:0 0 8px} .df-cap-p{margin:0 0 14px;color:#444} .df-cap-form{display:grid;gap:10px} .df-cap-form input[type=text],.df-cap-form input[type=email],.df-cap-form input[type=tel]{width:100%;padding:12px 14px;border:1px solid #d6d6de;border-radius:10px;font:inherit;font-size:15px} .df-cap-form .btn{width:100%;justify-content:center} .df-cap-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0} .df-cap-segs{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:14px} .df-cap-segs label{display:inline-flex;align-items:center;gap:6px;cursor:pointer} .df-cap-note{font-size:11.5px;color:#777;margin:2px 0 0} .df-cap-msg{font-size:14px;font-weight:600;margin:4px 0 0;color:var(--primary,#2e6417)} body.df-cap-open{overflow:hidden} .df-cap-inline{margin:28px 0 8px} .df-cta{margin:32px 0 8px} .df-cta-wrap{position:relative;background:var(--mint-soft,#f3f6f1);color:var(--ink,#111);border:1px solid var(--mint-line,#d9e2d3);border-radius:18px;padding:30px 28px 24px;max-width:960px;margin:0 auto;overflow:hidden} /* brand-tinted, readable (2026-10-13; was near-black) */ .df-cta-wrap::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--green)} .df-cta-wrap .df-cap-eyebrow{color:var(--green)} .df-cta-h{font-size:1.5rem;line-height:1.15;margin:4px 0 8px;color:var(--ink,#111)} .df-cta-p{color:var(--ink-soft,#4a4a46);margin:0 0 16px;max-width:640px} .df-cta-form{max-width:640px} .df-cta-fields{display:grid;gap:10px;grid-template-columns:1fr} @media (min-width:640px){.df-cta-fields{grid-template-columns:1fr 1fr}} .df-cta-form .btn{width:auto} .df-cta-form .btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .df-cta-wrap .df-cap-note,.df-cta-wrap .df-cap-msg{color:var(--ink-faint,#85847d)} .df-cta-wrap input{background:var(--card,#fff);color:var(--ink,#111);border-color:var(--mint-line,#d6d6de)} .df-cta-wrap input::placeholder{color:var(--ink-faint,#85847d)} .df-cap-inline-wrap{display:grid;gap:18px;grid-template-columns:1fr;background:var(--tint,#f3f6f1);border-radius:18px;padding:24px;max-width:960px;margin:0 auto} @media (min-width:760px){.df-cap-inline-wrap{grid-template-columns:1.1fr 1fr;align-items:center}} .df-cap-inline .df-cap-h{font-size:1.3rem} @media (max-width:480px){.df-cap-card{padding:22px 18px 18px;border-radius:14px}.df-cap-h{font-size:1.25rem}} /* ---- sidebar standard (owner 2026-10-01): thumb + title + date, compact tags ---- */ .bsb-recent li { padding: .5rem 0; } .bsb-recent a.bsb-ritem { display: flex; gap: .7rem; align-items: center; text-decoration: none; } .bsb-ritem .thumb { width: 64px; height: 44px; flex: 0 0 64px; border-radius: 8px; object-fit: cover; margin: 0; display: block; } .bsb-ritem .thumb .th-label { display: none; } .bsb-rtext { min-width: 0; } .bsb-rtitle { display: block; font-size: .88rem; font-weight: 600; line-height: 1.3; color: var(--ink); } .bsb-ritem:hover .bsb-rtitle { color: var(--green); } .bsb-ritem .bsb-date { margin-top: .15rem; } .bsb-cloud { gap: .3rem; } .bsb-cloud a { font-size: .72rem; padding: .22rem .55rem; line-height: 1.3; } /* Hero lead form (2026-10-13): the guide card beside the hero text. */ df-hero-form{display:block} df-hero-form:empty{display:none} @media (min-width:62rem){.hero-grid:has(> df-hero-form:not(:empty)){grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr);gap:3rem;align-items:center}} .df-cap-hero{background:var(--paper,#fff);border:1px solid color-mix(in srgb,var(--green,#1a1a2e) 14%,transparent);border-radius:20px;padding:26px 24px 20px;box-shadow:0 24px 60px rgba(16,24,40,.14);position:relative} .df-cap-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;border-radius:20px 20px 0 0;background:var(--mint,#c9a227)} .df-cap-hero .df-cap-h{font-size:1.35rem;line-height:1.25;margin:.2rem 0 .5rem} .df-cap-hero .df-cap-p{margin:0 0 14px;color:var(--ink-soft,#4a5160);font-size:.95rem} @media (max-width:61.99rem){.df-cap-hero{margin-top:2rem}} /* ---- Reviews and Testimonials (DocFluence review curation, 2026-10-14) ---- /reviews page + the featured strip on the home page. Built only on the shared tokens so every site style re-skins it; themes/