/* * Pareto site CSS — layout, components, and utility classes. * Ported from the prototype's pdt.css, layout.css, and services-infographics.css. * * Rules are unscoped — all pages share these styles without a wrapper class. * Previously these were scoped under .pareto-tools, but that class appeared on * every page and added specificity noise without real containment. * * The two genuinely tool-specific rules (range slider, diagnostic result grid) * are scoped under .pareto-tool, applied only on /Tools/* pages. * * Depends on: wwwroot/css/pareto-tokens.css (must load first). * Load order in _Layout.cshtml: pareto-tokens.css → tools.css → site.css */ /* ============================================================ Global — rules that must target or are truly global ============================================================ */ body.no-scroll { overflow: hidden; } /* ── Site footer ── */ .footer-row { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; } .footer-brand { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 auto; } .footer-tagline { color: #9a948a; font-style: italic; font-family: var(--pdt-serif); border-left: 1px solid #44403a; padding-left: 16px; line-height: 1.4; max-width: 360px; font-size: 14px; } .footer-meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .footer-links { display: flex; gap: 24px; flex-wrap: wrap; } .footer-links a { font-size: 13px; color: #d4cfc4; text-decoration: none; } @media (max-width: 720px) { .footer-brand { flex-direction: column; align-items: flex-start; gap: 18px; } .footer-tagline { display: none; } .footer-meta { align-items: flex-start; gap: 12px; } } /* ============================================================ Typography utility classes ============================================================ */ .t-eyebrow { font-family: var(--pdt-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pdt-forest); font-weight: 500; } .t-display { font-family: var(--pdt-sans); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; } .t-h1 { font-size: clamp(40px, 8vw, 88px); } .t-h2 { font-size: clamp(32px, 6vw, 56px); } .t-h3 { font-size: clamp(24px, 4vw, 36px); } .t-h4 { font-size: clamp(18px, 3vw, 22px); } .t-lead { font-size: clamp(17px, 2.4vw, 22px); line-height: 1.5; color: var(--pdt-ink-soft); } .t-body { font-size: 16px; line-height: 1.6; color: var(--pdt-ink-soft); } .t-small { font-size: 13px; color: var(--pdt-mute); } .t-italic { font-family: var(--pdt-serif); font-style: italic; font-weight: 400; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-family: var(--pdt-sans); font-weight: 500; font-size: 15px; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; white-space: nowrap; -webkit-tap-highlight-color: transparent; min-height: 48px; } /* Base resting state */ .btn-primary { background: var(--pdt-ink); color: var(--pdt-paper); border-color: var(--pdt-ink); } .btn-ghost { background: transparent; color: var(--pdt-ink); border: 1.5px solid var(--pdt-ink); } .btn-green { background: var(--pdt-forest); color: var(--pdt-paper); border-color: var(--pdt-forest); } /* Bootstrap 4 hover/active rules use :not(:disabled):not(.disabled) (specificity 0,4,0), beating plain .btn-primary:hover (0,2,0). Match the same selector form to win. .btn-ghost and .btn-green are custom variants — Bootstrap has no rules for them, but we use the same form for consistency and to guard against future leaks. */ .btn-primary:not(:disabled):not(.disabled):hover { background-color: var(--pdt-forest); border-color: var(--pdt-forest); color: var(--pdt-paper); } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--pdt-ink); border-color: var(--pdt-ink); color: var(--pdt-paper); transform: scale(0.98); } .btn-primary:not(:disabled):not(.disabled):focus, .btn-primary:not(:disabled):not(.disabled).focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus { background-color: var(--pdt-ink); border-color: var(--pdt-ink); color: var(--pdt-paper); box-shadow: none; } .btn-ghost:not(:disabled):not(.disabled):hover { background-color: var(--pdt-ink); border-color: var(--pdt-ink); color: var(--pdt-paper); } .btn-ghost:not(:disabled):not(.disabled):active, .btn-ghost:not(:disabled):not(.disabled).active { background-color: var(--pdt-ink); border-color: var(--pdt-ink); color: var(--pdt-paper); } .btn-ghost:not(:disabled):not(.disabled):focus, .btn-ghost:not(:disabled):not(.disabled).focus, .btn-ghost:not(:disabled):not(.disabled):active:focus, .btn-ghost:not(:disabled):not(.disabled).active:focus { background-color: transparent; border-color: var(--pdt-ink); color: var(--pdt-ink); box-shadow: none; } .btn-green:not(:disabled):not(.disabled):hover { background-color: var(--pdt-forest-deep); border-color: var(--pdt-forest-deep); color: var(--pdt-paper); } .btn-green:not(:disabled):not(.disabled):active, .btn-green:not(:disabled):not(.disabled).active { background-color: var(--pdt-forest-deep); border-color: var(--pdt-forest-deep); color: var(--pdt-paper); } .btn-green:not(:disabled):not(.disabled):focus, .btn-green:not(:disabled):not(.disabled).focus, .btn-green:not(:disabled):not(.disabled):active:focus, .btn-green:not(:disabled):not(.disabled).active:focus { background-color: var(--pdt-forest); border-color: var(--pdt-forest); color: var(--pdt-paper); box-shadow: none; } /* Focus: Bootstrap 4 sets blue box-shadow on .btn:focus and .btn-primary:focus (0,2,0). We load after Bootstrap so same specificity wins — suppress box-shadow, restore keyboard ring via :focus-visible. */ .btn:focus, .btn.focus { box-shadow: none; outline: 2px solid var(--pdt-forest); outline-offset: 3px; color: inherit; } .btn:focus:not(:focus-visible), .btn.focus:not(:focus-visible) { outline: none; box-shadow: none; } .btn:focus-visible { outline: 2px solid var(--pdt-forest); outline-offset: 3px; } /* ============================================================ Dividers + paper texture ============================================================ */ .divider { height: 1px; background: var(--pdt-line); border: 0; margin: 0; } .divider-strong { height: 1px; background: var(--pdt-ink); border: 0; margin: 0; } .paper-tex { background-image: radial-gradient(circle at 25% 30%, rgba(0,0,0,0.012) 0, transparent 50%), radial-gradient(circle at 75% 70%, rgba(0,0,0,0.012) 0, transparent 50%); } /* ============================================================ Nav — logo collapse + mobile pager ============================================================ */ /* Desktop: show full lockup, hide mark-only triangle */ .nav-logo-mark { display: none !important; } /* Mobile ≤720px: hide full lockup, show triangle mark; show pager */ @media (max-width: 720px) { .nav-logo-wide { display: none !important; } .nav-logo-mark { display: block !important; } .nav-pager { display: flex !important; } } /* Pager: hidden on desktop, flex-center on mobile between logo and hamburger */ .nav-pager { display: none; align-items: center; gap: 4px; flex: 1; justify-content: center; min-width: 0; } /* ============================================================ .pareto-tool scope — genuine tools-only rules Applied only on /Tools/* pages (Capacity, LoanAPR, LoanCompare) ============================================================ */ .pareto-tool .pdt-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 999px; background: var(--pdt-paper); border: 2px solid var(--pdt-forest); box-shadow: 0 2px 8px rgba(26, 93, 46, 0.25); cursor: pointer; transition: transform .15s; } .pareto-tool .pdt-slider::-webkit-slider-thumb:hover { transform: scale(1.1); } .pareto-tool .pdt-slider::-webkit-slider-thumb:active { transform: scale(1.2); } .pareto-tool .pdt-slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 999px; background: var(--pdt-paper); border: 2px solid var(--pdt-forest); cursor: pointer; } @media (max-width: 640px) { .pareto-tool .result-meta-row { grid-template-columns: 1fr !important; } } /* ============================================================ Layout grids — home page sections ============================================================ */ /* Hero */ .hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } .hero-copy { order: 1; } .hero-diag { order: 2; } @media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } .hero-copy { order: 1; } .hero-diag { order: 2; position: sticky; top: 92px; } } /* Story strip */ .story-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } .story-photo { order: -1; } @media (min-width: 720px) { .story-grid { grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; } .story-photo { order: 0; } } /* Pillars / Approach */ .approach-head { max-width: 900px; } .pillars-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } .pillar { padding-top: 28px; border-top: 1px solid var(--pdt-line); } @media (min-width: 720px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 56px; } } @media (min-width: 1100px) { .pillars-grid { grid-template-columns: repeat(4, 1fr); gap: 40px; } } /* Engagement cards */ .eng-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .eng-card { background: var(--pdt-paper); padding: 32px 28px; border-radius: 18px; border: 1px solid var(--pdt-line); display: flex; flex-direction: column; } @media (min-width: 720px) { .eng-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } /* Testimonials */ .testi-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .testi-card { padding: 32px; border-radius: 18px; background: var(--pdt-paper-deep); border: 1px solid var(--pdt-line-soft); } .testi-large { background: var(--pdt-paper-deep); } .testi-stat { background: var(--pdt-ink); color: var(--pdt-paper); border: 1px solid var(--pdt-ink); } @media (min-width: 720px) { .testi-grid { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 20px; } .testi-large { grid-row: 1 / span 2; } } /* Contact grid */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 960px) { .contact-grid { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; } } /* Insights teaser (from the desk) */ .desk-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 960px) { .desk-grid { grid-template-columns: 220px 1fr 200px; gap: 56px; } } .desk-toc { display: none; } .desk-margin { display: none; } @media (min-width: 960px) { .desk-toc { display: block; position: sticky; top: 80px; align-self: start; } .desk-margin { display: block; position: sticky; top: 80px; align-self: start; } } /* ============================================================ Insights index + post detail ============================================================ */ /* Tag pill — shared across showcase, filter bar, and post header */ .insights-tag-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--pdt-line); background: transparent; font-family: var(--pdt-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--pdt-ink-soft); font-weight: 500; line-height: 1.4; transition: all .15s ease; text-decoration: none; cursor: pointer; outline: none; box-shadow: none; min-height: unset; } .insights-tag-pill:hover { border-color: var(--pdt-forest); color: var(--pdt-forest); } .insights-tag-pill.is-static { cursor: default; } .insights-tag-pill.is-static:hover { border-color: var(--pdt-line); color: var(--pdt-ink-soft); } /* Showcase grid */ .showcase-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } .showcase-rail { order: -1; } @media (min-width: 960px) { .showcase-grid { grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; } .showcase-rail { order: 0; position: sticky; top: 92px; } } /* Archive header */ .archive-header { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 36px; } @media (min-width: 1100px) { .archive-header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; } } /* Archive row hover */ .archive-row { position: relative; } .archive-row:hover { background: var(--pdt-paper-deep); margin: 0 -16px; padding-left: 16px !important; padding-right: 16px !important; } .archive-row:hover h3 { color: var(--pdt-forest); } @media (max-width: 720px) { .archive-row { grid-template-columns: 1fr !important; gap: 12px !important; } .archive-row > div:first-child { display: none; } .archive-row > div:last-child { flex-direction: row !important; align-items: center !important; gap: 12px !important; } } /* Mailchimp signup card */ .signup-card { align-items: center; } @media (max-width: 720px) { .signup-card { grid-template-columns: 1fr !important; text-align: left; } .signup-card-form { width: 100%; } .signup-card-pill { min-width: 0 !important; width: 100%; } } /* Post body prose */ .post-body { font-size: 17px; line-height: 1.75; color: var(--pdt-ink); } .post-body > p { max-width: 680px; margin: 0 auto 1.4rem; } /* Prev/next navigation */ .prev-next-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 920px; margin: 0 auto; } @media (min-width: 720px) { .prev-next-grid { grid-template-columns: 1fr 1fr; gap: 24px; } } .prev-next-card { display: block; padding: 24px 28px; border: 1px solid var(--pdt-line-soft); border-radius: 12px; background: var(--pdt-paper); text-decoration: none; color: inherit; transition: all .15s ease; } .prev-next-card:hover { border-color: var(--pdt-forest); background: var(--pdt-paper-deep); } .prev-next-card:hover h4 { color: var(--pdt-forest); } /* ============================================================ Contact page ============================================================ */ .contact-info-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 820px) { .contact-info-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } .growth-pillars { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 760px) { .growth-pillars { grid-template-columns: 1fr 1fr 1fr; gap: clamp(16px, 2vw, 28px); } } .form-row-2 { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 600px) { .form-row-2 { grid-template-columns: 1fr 1fr; } } .contact-input { width: 100%; box-sizing: border-box; padding: 14px 16px; font-size: 15px; line-height: 1.4; font-family: inherit; color: var(--pdt-ink); background: var(--pdt-paper); border: 1px solid var(--pdt-line-soft); border-radius: 4px; transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none; } .contact-input:hover { border-color: var(--pdt-line); } .contact-input:focus { outline: none; border-color: var(--pdt-forest); box-shadow: 0 0 0 3px rgba(23, 95, 49, 0.12); } .contact-input::placeholder { color: var(--pdt-mute); } select.contact-input:invalid, select.contact-input option[value=""] { color: var(--pdt-mute); } select.contact-input option { color: var(--pdt-ink); } select.contact-input { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none'%3e%3cpath d='M1 1L6 6L11 1' stroke='%237a8478' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 44px; cursor: pointer; } /* ============================================================ Services — Goal Management infographic ============================================================ */ @media (max-width: 760px) { .goalmgmt-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .goalmgmt-connector { transform: rotate(90deg); align-self: center !important; } } @media (max-width: 760px) { .goalmgmt-loop-desktop { display: none !important; } .goalmgmt-loop-mobile { display: block !important; } } /* Services section jump links */ .services-jump-link { position: relative; } .services-jump-link:hover { transform: translateY(-2px); } .services-jump-link:hover .services-jump-readmore { text-decoration: underline; text-underline-offset: 3px; } .services-jump-link:hover .services-jump-readmore-arrow { transform: translateY(2px); } .services-jump-readmore-arrow { display: inline-block; transition: transform 0.15s ease; } /* ============================================================ Services-page infographic components ============================================================ */ .pareto-ig-services *, .pareto-ig-services *::before, .pareto-ig-services *::after { box-sizing: border-box; } .pareto-ig-services { font-family: var(--pdt-sans); -webkit-font-smoothing: antialiased; } .ig-title-services { font-size: clamp(22px, 3vw, 28px); font-weight: 500; color: var(--pdt-forest); text-align: center; margin: 0 0 28px; line-height: 1.2; letter-spacing: -0.02em; } .ig-grid-services { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: stretch; } .col-label-services { font-family: var(--pdt-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pdt-mute); text-align: center; margin: 0 0 10px; } .sc-services { position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: var(--pdt-paper); border: 0.5px solid #D4E6C8; border-radius: 8px; margin-bottom: 6px; transition: border-color .15s, box-shadow .15s; } .sc-services:last-child { margin-bottom: 0; } .sc-services:hover { border-color: #A6CA71; box-shadow: 0 2px 10px rgba(23, 95, 48, .08); } .si-services { width: 26px; height: 26px; flex-shrink: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .sc-name-services { font-size: 12px; font-weight: 500; color: var(--pdt-forest); margin: 0; } .fork-col-services { display: flex; align-items: stretch; justify-content: center; } .arrow-col-services { display: flex; align-items: center; justify-content: center; } .engine-col-services { display: flex; flex-direction: column; } .engine-card-services { flex: 1; background: var(--pdt-paper); border: 1.5px solid var(--pdt-green); border-radius: 14px; padding: 22px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .engine-mark-services { line-height: 1; margin: 0 0 12px; } .em-big-services { font-size: 32px; font-weight: 600; color: var(--pdt-green); font-family: var(--pdt-sans); letter-spacing: -0.02em; } .em-sep-services { font-size: 20px; color: rgba(166, 202, 113, .4); margin: 0 3px; } .em-sml-services { font-size: 32px; font-weight: 500; color: #A6CA71; font-family: var(--pdt-sans); letter-spacing: -0.02em; } .engine-name-services { font-size: 12px; font-weight: 500; color: var(--pdt-forest); margin: 0 0 4px; } .engine-desc-services { font-size: 11px; color: var(--pdt-mute); margin: 0 0 14px; line-height: 1.5; } .pill-row-services { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } .pill-services { font-size: 9px; padding: 3px 8px; letter-spacing: 0.03em; background: rgba(47, 180, 75, .07); border: 0.5px solid rgba(47, 180, 75, .2); border-radius: 20px; color: var(--pdt-forest); } .oc-services { padding: 13px; border-radius: 9px; margin-bottom: 6px; } .oc-services:last-child { margin-bottom: 0; } .oc-report-services { background: rgba(47, 180, 75, .07); border: 0.5px solid rgba(47, 180, 75, .2); } .oc-stp-services { background: var(--pdt-paper); border: 0.5px solid #D4E6C8; } .oc-head-services { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .oc-title-report-services { font-size: 12px; font-weight: 500; color: var(--pdt-green); margin: 0; } .oc-title-stp-services { font-size: 12px; font-weight: 500; color: var(--pdt-forest); margin: 0; } .oc-desc-services { font-size: 11px; color: var(--pdt-mute); margin: 0; line-height: 1.55; } .coaching-card-services { width: 124px; height: 68px; border-radius: 50%; background: rgba(23, 95, 48, .04); border: 1px dashed rgba(47, 180, 75, .4); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; margin: 0 auto; } .coaching-head-services { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 2px; } .coaching-title-services { font-size: 11px; font-weight: 500; color: var(--pdt-green); margin: 0; } .coaching-desc-services { font-size: 9px; color: var(--pdt-mute); margin: 0; line-height: 1.3; } .halo-wrap-services { position: relative; padding: 50px 0; margin-top: 95px; overflow: visible; } #pareto-halo-svg, #pareto-halo-svg-3 { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; } [id^="pareto-loop-svg"] { display: block; overflow: visible; } @media (max-width: 720px) { .ig-grid-services { grid-template-columns: 1fr !important; gap: 12px; } .fork-col-services, .arrow-col-services { display: none !important; } .halo-wrap-services { margin-top: 16px !important; padding: 16px 0 !important; } #pareto-halo-svg, #pareto-halo-svg-3 { display: none !important; } .coaching-card-services { width: 100px; height: 56px; } }