.page-hero { position: relative; overflow: hidden; padding-block: clamp(2.75rem, 2rem + 4vw, 4.5rem); background: var(--graphite-950); background-image: var(--grad-dark); color: var(--text-on-dark); text-align: center; } .page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(62% 62% at 50% 0%, rgba(4, 185, 98, 0.3), transparent 62%); pointer-events: none; } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { color: var(--white); font-size: var(--fs-h1); margin: var(--space-3) 0; } .page-hero__lead { color: var(--text-on-dark); font-size: var(--fs-lead); max-width: 60ch; margin-inline: auto; } .page-hero__meta { color: var(--text-on-dark-soft); font-size: 0.85rem; margin: 0.9rem 0 0; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; list-style: none; margin: 0; padding: 0; justify-content: center; } .breadcrumbs a { color: var(--accent-on-dark); text-decoration: none; transition: color var(--dur) var(--ease); } @media (hover: hover) { .breadcrumbs a:hover { color: var(--white); text-decoration: underline; } } .breadcrumbs li { color: var(--text-on-dark-soft); display: inline-flex; align-items: center; gap: 0.4rem; } .breadcrumbs li::after { content: "/"; margin-left: 0.4rem; opacity: 0.55; } .breadcrumbs li:last-child::after { content: ""; } .breadcrumbs--light a { color: var(--green-700); } @media (hover: hover) { .breadcrumbs--light a:hover { color: var(--ember); } } .breadcrumbs--light li { color: var(--text-muted); } .prose { max-width: 760px; margin-inline: auto; } .prose > * + * { margin-top: 1.15rem; } .prose h2 { font-size: var(--fs-h3); margin-top: 2.5rem; } .prose h3 { font-size: var(--fs-h4); margin-top: 1.75rem; } .prose p { color: var(--ink-soft); } .prose ul, .prose ol { color: var(--ink-soft); padding-left: 1.4rem; } .prose li { margin-top: 0.4rem; } .prose li::marker { color: var(--green-700); } .prose a { color: var(--link); font-weight: 500; } @media (hover: hover) { .prose a:hover { color: var(--link-hover); } } .prose strong { color: var(--graphite-950); } .prose blockquote { border-left: 4px solid var(--green-700); background: var(--green-050); padding: 1rem 1.25rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--ink-soft); font-style: italic; } .prose blockquote p { margin: 0; } .prose figure { margin: 1.75rem 0; } .prose figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; } .prose figcaption { text-align: center; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.6rem; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.75rem 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .prose table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.94rem; line-height: 1.55; } .prose caption { caption-side: top; text-align: left; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); padding: 0.9rem 1.1rem 0.5rem; } .prose thead th { background-color: var(--green-700); color: var(--white); font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; text-align: left; padding: 0.8rem 1.1rem; white-space: nowrap; } .prose tbody th { text-align: left; font-weight: 600; color: var(--graphite-950); background-color: var(--green-050); } .prose tbody td, .prose tbody th { padding: 0.78rem 1.1rem; vertical-align: top; } .prose tbody tr + tr th, .prose tbody tr + tr td { border-top: 1px solid var(--line); } .prose tbody tr:nth-child(even) td { background-color: var(--surface-2); } .prose tbody tr:nth-child(even) th { background-color: var(--green-100); } @media (hover: hover) { .prose tbody tr:hover td, .prose tbody tr:hover th { background-color: var(--ember-050); } } .prose table strong { color: var(--green-800); } @media (max-width: 620px) { .prose table { font-size: 0.88rem; } .prose thead th, .prose tbody td, .prose tbody th { padding: 0.65rem 0.85rem; } } .key-points { background: var(--grad-soft); border: 1px solid var(--green-200); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem 1.35rem; margin: 1.75rem 0; } .key-points h2, .key-points h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ember); margin: 0 0 0.6rem; } .key-points ul { margin: 0; padding-left: 1.25rem; } .key-points li { margin-top: 0.35rem; color: var(--ink-soft); } .key-points li::marker { color: var(--green-700); } .callout { display: flex; gap: 0.85rem; background: var(--green-050); border: 1px solid var(--green-200); border-radius: var(--radius-md); padding: 1.15rem 1.35rem; } .callout__icon { flex: none; color: var(--green-700); } .callout__icon svg { width: 24px; height: 24px; } .callout p { margin: 0; color: var(--ink-soft); } .callout strong { color: var(--graphite-950); } .callout--info { background: var(--ember-050); border-color: var(--ember-200); } .callout--info .callout__icon { color: var(--ember); } .callout--info strong { color: var(--ember); } .callout--warn { background: var(--ember-100); border-color: var(--ember-300); } .callout--warn .callout__icon { color: var(--ember-700); } .callout--warn strong { color: var(--ember-700); } .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .stat-item { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.1rem; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (hover: hover) { .stat-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-200); } } .stat-item__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); color: var(--green-700); line-height: 1.05; } .stat-item__label { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.4rem; } .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; } .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--pad-panel); box-shadow: var(--shadow-sm); } .contact-methods { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); } .contact-method { display: flex; gap: 0.85rem; align-items: flex-start; } .contact-method__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background-color: var(--green-100); color: var(--green-800); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } @media (hover: hover) { .contact-method:hover .contact-method__icon { background-color: var(--green-700); color: var(--white); } } .contact-method__icon svg { width: 22px; height: 22px; } .contact-method h3 { font-size: 1.02rem; margin-bottom: 0.15rem; } .contact-method p, .contact-method a { color: var(--text-muted); font-size: 0.92rem; margin: 0; text-decoration: none; } @media (hover: hover) { .contact-method a:hover { color: var(--green-700); } } .form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.15rem; } .form-field label { font-weight: 600; font-size: 0.9rem; color: var(--graphite-950); } .form-field input, .form-field textarea, .form-field select { width: 100%; padding: 0.8rem 0.95rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background-color: var(--surface-2); color: var(--ink); font-size: 0.98rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); opacity: 1; } @media (hover: hover) { .form-field input:hover, .form-field textarea:hover, .form-field select:hover { border-color: var(--green-400); } } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--green-700); background-color: var(--surface); box-shadow: 0 0 0 4px rgba(4, 185, 98, 0.16); } .form-field [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 4px rgba(147, 36, 6, 0.12); } .form-field textarea { resize: vertical; min-height: 130px; } .form-error { color: var(--error); font-size: 0.82rem; min-height: 1em; } .form-note { font-size: 0.85rem; color: var(--text-muted); margin-top: var(--space-2); } .form-status { margin-top: var(--space-4); padding: 0.85rem 1.1rem; border-radius: var(--radius-md); font-size: 0.92rem; font-weight: 500; } .form-status:empty { display: none; } .form-status.is-success { background: var(--success-bg); color: var(--green-800); border: 1px solid var(--success-line); } .form-status.is-error { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-line); } @media (max-width: 860px) { .stat-band { grid-template-columns: repeat(2, 1fr); } .contact-layout { grid-template-columns: 1fr; } } @media (max-width: 420px) { .stat-band { grid-template-columns: 1fr; } }