/* Sefirot section - numerology.cz Loaded only on pages whose carries .sefirot. It restyles the shared header, footer and content area so the section reads as one premium whole, while every other page on the site keeps its existing look. */ @import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Karla:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"); body.sefirot { /* Ground is the site's established green; neutrals are biased toward it rather than being flat greys, so the palette reads as one family. */ --ground: #d1e4de; --surface: #e0ece8; --surface-2: #cadcd6; --rule: #aec6be; --ink: #12181c; --ink-2: #2c3a3a; --ink-3: #56696a; /* Brass, deepened so it holds its own against the green rather than washing out the way the lighter tone did on vellum. */ --brass: #9c6b26; --brass-deep: #7a521a; /* Pillar encoding - used only in the Tree diagram, where it carries meaning */ --p-mercy: #9c6b26; --p-severity: #415a7d; --p-balance: #1f6b60; --on-dark: #eef5f2; --sf-read: 65ch; background: var(--ground); color: var(--ink); font-family: Karla, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.65; } body.sefirot h1, body.sefirot h2, body.sefirot h3 { font-family: Spectral, Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; } /* ---------- shared shell, restyled ---------- */ body.sefirot .site-header { max-width: 1180px; padding-block: 26px 0; border-bottom: 1px solid var(--rule); padding-bottom: 18px; align-items: center; } /* The mark carries numbered sefirot, so it needs a little more room than the previous flat logo did before the numerals stop reading. */ body.sefirot .site-logo img { max-width: 235px; } body.sefirot .primary-navigation { font-size: 15px; margin-top: 0; } body.sefirot .menu-wrapper > li > a, body.sefirot .menu-wrapper > li > .menu-label { color: var(--ink-2); font-weight: 500; padding: 9px 13px; } body.sefirot .menu-wrapper > li > a:hover { color: var(--ink); } body.sefirot .menu-wrapper .current-menu-item > a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--brass); font-weight: 600; } body.sefirot .sub-menu { background: var(--surface); border-color: var(--rule); box-shadow: 0 8px 24px rgba(18, 21, 28, .10); } body.sefirot .site-content { padding-inline: 0; } body.sefirot .site-main { max-width: 1180px; padding-block: 0 0; } body.sefirot .entry-content > * { margin-bottom: 0; } body.sefirot .entry-title { display: none; } body.sefirot .site-footer { max-width: 1180px; } body.sefirot .site-info { border-top-color: var(--rule); } body.sefirot .site-footer .site-logo img { max-width: 190px; } body.sefirot .powered-by, body.sefirot .privacy-policy a { color: var(--ink-3); } body.sefirot a:focus-visible, body.sefirot button:focus-visible, body.sefirot summary:focus-visible, body.sefirot .sf-node:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } /* ---------- section rhythm ---------- */ .sf-section { padding-block: 64px; } .sf-section + .sf-section { border-top: 1px solid var(--rule); } .sf-eyebrow { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; } .sf-display { font-size: clamp(32px, 5vw, 54px); margin: 0 0 22px; } .sf-title { font-size: clamp(25px, 3.3vw, 36px); margin: 0 0 16px; } .sf-lede { font-size: 19.5px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; margin: 0; } .sf-head { margin-bottom: 36px; max-width: 62ch; } .sf-head .sf-lede { margin-top: 14px; } .sf-prose { max-width: var(--sf-read); display: flex; flex-direction: column; gap: 17px; } .sf-prose p { color: var(--ink-2); margin: 0; } /* The site's existing home copy, injected verbatim. The shared stylesheet gives .entry-content p a bottom margin; the flex gap handles spacing here, so clear it rather than let the two stack up. */ .sf-legacy p { margin: 0 !important; } .sf-legacy { gap: 18px; } .sf-intro { padding-block: 66px 56px; } /* ---------- hero ---------- */ .sf-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; padding-block: 62px 70px; } /* Let the column's gap set the rhythm rather than per-element margins, which the shared stylesheet also sets and would otherwise fight over. */ .sf-hero-copy { display: flex; flex-direction: column; gap: 20px; } .sf-hero-copy > * { margin: 0; } .sf-hero-copy .sf-ctas { margin-top: 10px; } .sf-creed { font-family: Spectral, Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.4; color: var(--ink); border-left: 2px solid var(--brass); padding-left: 19px; max-width: 40ch; } /* ---------- buttons ---------- */ .sf-ctas { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; margin-top: 28px; } .sf-btn { display: inline-block; font-family: Karla, sans-serif; font-size: 14.5px; font-weight: 600; text-decoration: none; padding: 12px 21px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-dark); border-radius: 2px; transition: opacity .18s; } .sf-btn:hover { opacity: .85; text-decoration: none; } .sf-btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); } .sf-btn-ghost:hover { border-color: var(--ink); } /* ---------- Tree of Life ---------- */ .sf-tree-wrap { display: flex; flex-direction: column; gap: 13px; align-items: center; } .sf-tree { width: 100%; max-width: 320px; aspect-ratio: 300 / 445; margin: 0; } .sf-tree svg { width: 100%; height: 100%; display: block; overflow: visible; } .sf-path { stroke: var(--rule); stroke-width: 1.2; fill: none; transition: stroke .25s, stroke-width .25s; } .sf-path.lit { stroke: var(--brass); stroke-width: 1.8; } .sf-node circle { fill: var(--surface); stroke-width: 1.6; cursor: pointer; transition: fill .22s, stroke-width .22s; } .sf-node[data-pillar="mercy"] circle { stroke: var(--p-mercy); } .sf-node[data-pillar="severity"] circle { stroke: var(--p-severity); } .sf-node[data-pillar="balance"] circle { stroke: var(--p-balance); } .sf-node text { font-family: "IBM Plex Mono", monospace; font-size: 10px; font-variant-numeric: tabular-nums; fill: var(--ink-3); text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: fill .22s; } .sf-node:hover circle, .sf-node.active circle { stroke-width: 3; } .sf-node[data-pillar="mercy"].active circle { fill: #ecdcbc; } .sf-node[data-pillar="severity"].active circle { fill: #ccd8e6; } .sf-node[data-pillar="balance"].active circle { fill: #b9d8d0; } .sf-node.active text { fill: var(--ink); } .sf-readout { min-height: 92px; width: 100%; max-width: 320px; border-top: 1px solid var(--rule); padding-top: 12px; } .sf-rd-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .sf-rd-num { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--brass); font-variant-numeric: tabular-nums; } .sf-rd-name { font-family: Spectral, Georgia, serif; font-size: 19px; font-weight: 600; } .sf-rd-gloss { font-size: 12px; color: var(--ink-3); font-style: italic; } .sf-rd-body { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 5px 0 0; } .sf-key { display: flex; gap: 15px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); width: 100%; max-width: 320px; } .sf-key span { display: flex; align-items: center; gap: 6px; } .sf-key i { width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid; } .sf-dot-severity { border-color: var(--p-severity); } .sf-dot-balance { border-color: var(--p-balance); } .sf-dot-mercy { border-color: var(--p-mercy); } /* ---------- layout pieces ---------- */ .sf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } .sf-stack { display: flex; flex-direction: column; gap: 26px; } .sf-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 28px 30px; } .sf-panel p:not(.sf-eyebrow) { color: var(--ink-2); font-size: 15.5px; margin: 0; } .sf-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .sf-list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 15.5px; color: var(--ink-2); align-items: start; line-height: 1.5; } .sf-list li::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--brass); border-radius: 50%; margin-top: 8px; } .sf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 32px 40px; } .sf-item h3 { font-size: 19px; margin: 0 0 8px; } .sf-item p { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 0; } .sf-marker { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .1em; margin: 0 0 9px; color: var(--brass); } .sf-marker-severity { color: var(--p-severity); } .sf-marker-balance { color: var(--p-balance); } .sf-marker-mercy { color: var(--p-mercy); } .sf-quote { background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 28px 30px; margin-top: 38px; max-width: 58ch; } .sf-quote p:last-child { font-family: Spectral, Georgia, serif; font-size: 21px; line-height: 1.35; margin: 0; } /* six dimensions of the consultation */ .sf-dims { display: flex; flex-direction: column; } .sf-dim { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding-block: 25px; border-top: 1px solid var(--rule); align-items: start; } .sf-dim:last-child { border-bottom: 1px solid var(--rule); } .sf-dim-n { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--brass); padding-top: 4px; font-variant-numeric: tabular-nums; } .sf-dim h3 { font-size: 20px; margin: 0 0 6px; } .sf-dim p { color: var(--ink-2); font-size: 15.5px; max-width: 60ch; margin: 0; } /* the five-step process - a genuine sequence, so the numbering means something */ .sf-steps { display: flex; flex-direction: column; } .sf-step { display: grid; grid-template-columns: 92px 1fr; gap: 22px; padding-block: 23px; border-top: 1px solid var(--rule); } .sf-step:last-child { border-bottom: 1px solid var(--rule); } .sf-step-n { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-3); padding-top: 5px; letter-spacing: .06em; } .sf-step h3 { font-size: 19px; margin: 0 0 6px; } .sf-step p { color: var(--ink-2); font-size: 15px; max-width: 58ch; margin: 0; } /* ---------- faq ---------- */ .sf-faq { display: flex; flex-direction: column; } .sf-faq details { border-top: 1px solid var(--rule); } .sf-faq details:last-of-type { border-bottom: 1px solid var(--rule); } .sf-faq summary { cursor: pointer; list-style: none; padding-block: 19px; font-family: Spectral, Georgia, serif; font-size: 18.5px; display: flex; gap: 16px; align-items: baseline; } .sf-faq summary::-webkit-details-marker { display: none; } .sf-faq summary::after { content: "+"; margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 17px; color: var(--brass); } .sf-faq details[open] summary::after { content: "\2013"; } .sf-answer { padding-bottom: 22px; max-width: 64ch; color: var(--ink-2); font-size: 15.5px; } /* ---------- booking ---------- */ .sf-direct { display: flex; flex-direction: column; gap: 6px; } .sf-direct a { font-size: 17px; color: var(--brass-deep); } .sf-note { font-size: 13px; color: var(--ink-3); margin: 0; } .sf-cta-row { align-items: center; } .sf-cta-section .sf-ctas { margin-top: 0; } @media (prefers-reduced-motion: reduce) { body.sefirot * { transition: none !important; animation: none !important; } } @media only screen and (max-width: 900px) { .sf-hero { grid-template-columns: 1fr; gap: 40px; } .sf-two { grid-template-columns: 1fr; gap: 30px; } } @media only screen and (max-width: 720px) { body.sefirot { font-size: 16px; } .sf-section { padding-block: 46px; } .sf-dim { grid-template-columns: 1fr; gap: 7px; } .sf-step { grid-template-columns: 1fr; gap: 5px; } .sf-panel { padding: 22px 20px; } .sf-lede { font-size: 18px; } }