845 lines
14 KiB
CSS
845 lines
14 KiB
CSS
/* Agency lead-gen MVP slice */
|
|
:root {
|
|
--color-bg: #f7f7f5;
|
|
--color-surface: #ffffff;
|
|
--color-surface-muted: #efefec;
|
|
--color-ink: #171717;
|
|
--color-muted: #666666;
|
|
--color-border: #deded8;
|
|
--color-accent: #2f3437;
|
|
--shadow-soft: 0 18px 50px rgba(23, 23, 23, 0.08);
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body.agency-page {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body.agency-page {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: var(--color-bg);
|
|
color: var(--color-ink);
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.55;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
.agency-page a,
|
|
.agency-page button,
|
|
.agency-page input,
|
|
.agency-page textarea,
|
|
.agency-page select {
|
|
transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
|
|
}
|
|
|
|
.agency-page :focus-visible {
|
|
outline: 3px solid rgba(23, 23, 23, .18);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
/* Local layout safety net: keeps the page aligned even if Bootstrap CDN is slow or unavailable. */
|
|
.agency-page .container {
|
|
width: min(100% - 2rem, 1160px);
|
|
margin-inline: auto;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
.agency-page .row {
|
|
--fl-gutter-x: 1.5rem;
|
|
--fl-gutter-y: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-inline: calc(var(--fl-gutter-x) * -.5);
|
|
margin-top: calc(var(--fl-gutter-y) * -1);
|
|
}
|
|
|
|
.agency-page .row > * {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding-inline: calc(var(--fl-gutter-x) * .5);
|
|
margin-top: var(--fl-gutter-y);
|
|
}
|
|
|
|
.agency-page .g-3 {
|
|
--fl-gutter-x: 1rem;
|
|
--fl-gutter-y: 1rem;
|
|
}
|
|
|
|
.agency-page .g-4 {
|
|
--fl-gutter-x: 1.5rem;
|
|
--fl-gutter-y: 1.5rem;
|
|
}
|
|
|
|
.agency-page .g-5 {
|
|
--fl-gutter-x: 3rem;
|
|
--fl-gutter-y: 3rem;
|
|
}
|
|
|
|
.agency-page .col-12 {
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.agency-page .col-md-4 {
|
|
flex: 0 0 auto;
|
|
width: 33.333333%;
|
|
}
|
|
|
|
.agency-page .col-md-6 {
|
|
flex: 0 0 auto;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.agency-page .col-lg-4 {
|
|
flex: 0 0 auto;
|
|
width: 33.333333%;
|
|
}
|
|
|
|
.agency-page .col-lg-5 {
|
|
flex: 0 0 auto;
|
|
width: 41.666667%;
|
|
}
|
|
|
|
.agency-page .col-lg-7 {
|
|
flex: 0 0 auto;
|
|
width: 58.333333%;
|
|
}
|
|
|
|
.agency-page .g-lg-5 {
|
|
--fl-gutter-x: 3rem;
|
|
--fl-gutter-y: 3rem;
|
|
}
|
|
}
|
|
|
|
.agency-page .d-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.agency-page .d-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.agency-page .d-none {
|
|
display: none;
|
|
}
|
|
|
|
.agency-page .flex-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.agency-page .align-items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.agency-page .align-items-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.agency-page .align-items-stretch {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.agency-page .justify-content-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.agency-page .gap-2 {
|
|
gap: .5rem;
|
|
}
|
|
|
|
.agency-page .gap-3 {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.agency-page .mt-4 {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.agency-page .ms-auto {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.agency-page .h-100 {
|
|
height: 100%;
|
|
}
|
|
|
|
.agency-page .text-secondary {
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.agency-page .fw-semibold {
|
|
font-weight: 650;
|
|
}
|
|
|
|
.agency-page .link-dark {
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.agency-page .position-fixed {
|
|
position: fixed;
|
|
}
|
|
|
|
.agency-page .bottom-0 {
|
|
bottom: 0;
|
|
}
|
|
|
|
.agency-page .end-0 {
|
|
right: 0;
|
|
}
|
|
|
|
.agency-page .p-3 {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.agency-page .sticky-top {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1020;
|
|
}
|
|
|
|
.agency-page .visually-hidden-focusable:not(:focus):not(:focus-within) {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.agency-page .flex-sm-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.agency-page .d-sm-flex {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.agency-page .flex-md-row {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.agency-page .align-items-lg-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.agency-page .gap-lg-2 {
|
|
gap: .5rem;
|
|
}
|
|
|
|
.agency-page .ms-lg-2 {
|
|
margin-left: .5rem;
|
|
}
|
|
}
|
|
|
|
.skip-link {
|
|
position: fixed;
|
|
left: 1rem;
|
|
top: 1rem;
|
|
z-index: 1100;
|
|
background: var(--color-ink);
|
|
color: #fff;
|
|
padding: .65rem .85rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.site-header {
|
|
background: rgba(247, 247, 245, .94);
|
|
border-bottom: 1px solid var(--color-border);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.navbar {
|
|
padding-block: .8rem;
|
|
}
|
|
|
|
.agency-page .navbar > .container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.agency-page .navbar-collapse {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.agency-page .navbar-nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: .5rem;
|
|
padding-left: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.agency-page .navbar-toggler {
|
|
display: none;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
padding: .55rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.agency-page .navbar-toggler-icon {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
linear-gradient(var(--color-ink), var(--color-ink)) center 35% / 100% 2px no-repeat,
|
|
linear-gradient(var(--color-ink), var(--color-ink)) center 65% / 100% 2px no-repeat;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.agency-page .navbar > .container {
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.agency-page .navbar-toggler {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.agency-page .navbar-collapse {
|
|
flex: 0 0 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.agency-page .navbar-collapse:not(.show) {
|
|
display: none;
|
|
}
|
|
|
|
.agency-page .navbar-nav {
|
|
align-items: stretch;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
gap: .35rem;
|
|
padding: .7rem 0 0;
|
|
}
|
|
|
|
.agency-page .navbar-nav .btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.agency-page .ms-auto,
|
|
.agency-page .ms-lg-2 {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.navbar-brand {
|
|
color: var(--color-ink);
|
|
font-weight: 720;
|
|
letter-spacing: -.02em;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: .6rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
background: var(--color-ink);
|
|
color: #fff;
|
|
border-radius: var(--radius-sm);
|
|
font-size: .8rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.nav-link {
|
|
color: #3f3f3f;
|
|
font-size: .92rem;
|
|
font-weight: 560;
|
|
display: block;
|
|
padding: .55rem .2rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 2.5rem;
|
|
padding: .66rem .95rem;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 650;
|
|
letter-spacing: -.01em;
|
|
line-height: 1.1;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.btn-sm {
|
|
min-height: 2.15rem;
|
|
padding: .45rem .75rem;
|
|
font-size: .88rem;
|
|
}
|
|
|
|
.btn-lg {
|
|
--bs-btn-padding-y: .82rem;
|
|
--bs-btn-padding-x: 1.1rem;
|
|
--bs-btn-font-size: .98rem;
|
|
min-height: 3.1rem;
|
|
padding: .82rem 1.1rem;
|
|
font-size: .98rem;
|
|
}
|
|
|
|
.btn-dark {
|
|
--bs-btn-bg: var(--color-ink);
|
|
--bs-btn-border-color: var(--color-ink);
|
|
--bs-btn-hover-bg: #000;
|
|
--bs-btn-hover-border-color: #000;
|
|
color: #fff;
|
|
background: var(--color-ink);
|
|
border-color: var(--color-ink);
|
|
}
|
|
|
|
.btn-dark:hover {
|
|
color: #fff;
|
|
background: #000;
|
|
border-color: #000;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-outline-dark {
|
|
--bs-btn-border-color: #bcbcb4;
|
|
--bs-btn-color: var(--color-ink);
|
|
--bs-btn-hover-bg: var(--color-ink);
|
|
--bs-btn-hover-border-color: var(--color-ink);
|
|
color: var(--color-ink);
|
|
background: transparent;
|
|
border-color: #bcbcb4;
|
|
}
|
|
|
|
.btn-outline-dark:hover {
|
|
color: #fff;
|
|
background: var(--color-ink);
|
|
border-color: var(--color-ink);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.hero-section {
|
|
padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 7vw, 5.5rem);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.eyebrow,
|
|
.section-kicker,
|
|
.case-meta,
|
|
.card-label {
|
|
margin: 0 0 .7rem;
|
|
color: var(--color-muted);
|
|
font-size: .76rem;
|
|
font-weight: 750;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
color: var(--color-ink);
|
|
letter-spacing: -.04em;
|
|
line-height: 1.02;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 780px;
|
|
font-size: clamp(2.55rem, 6vw, 5.15rem);
|
|
font-weight: 780;
|
|
}
|
|
|
|
h2 {
|
|
font-size: clamp(1.8rem, 3vw, 3rem);
|
|
font-weight: 750;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.12rem;
|
|
font-weight: 720;
|
|
}
|
|
|
|
.hero-copy,
|
|
.section-head p,
|
|
.lead-small {
|
|
color: var(--color-muted);
|
|
max-width: 650px;
|
|
font-size: 1.02rem;
|
|
}
|
|
|
|
.metric-strip {
|
|
margin: 2rem 0 0;
|
|
padding: 1rem 0 0;
|
|
border-top: 1px solid var(--color-border);
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: .8rem;
|
|
max-width: 560px;
|
|
}
|
|
|
|
.metric-strip div {
|
|
padding-right: 1rem;
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
.metric-strip div:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.metric-strip dt {
|
|
font-size: clamp(1.35rem, 2vw, 1.75rem);
|
|
font-weight: 780;
|
|
letter-spacing: -.04em;
|
|
}
|
|
|
|
.metric-strip dd {
|
|
margin: 0;
|
|
color: var(--color-muted);
|
|
font-size: .86rem;
|
|
}
|
|
|
|
.offer-card,
|
|
.service-card,
|
|
.case-card,
|
|
.testimonial-card,
|
|
.form-panel,
|
|
.notice-box {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.offer-card {
|
|
padding: clamp(1.25rem, 3vw, 2rem);
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.offer-card h2 {
|
|
font-size: clamp(1.45rem, 2vw, 2rem);
|
|
}
|
|
|
|
.offer-card p,
|
|
.service-card p,
|
|
.case-card p,
|
|
.testimonial-card figcaption {
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.check-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 1.2rem 0;
|
|
display: grid;
|
|
gap: .55rem;
|
|
}
|
|
|
|
.check-list li {
|
|
position: relative;
|
|
padding-left: 1.4rem;
|
|
}
|
|
|
|
.check-list li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: .55rem;
|
|
width: .48rem;
|
|
height: .48rem;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.logo-section {
|
|
padding: 1.3rem 0;
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.logo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: .7rem;
|
|
}
|
|
|
|
.logo-grid span {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: 54px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: #4d4d4d;
|
|
font-weight: 720;
|
|
letter-spacing: .04em;
|
|
}
|
|
|
|
.section-pad {
|
|
padding: clamp(3rem, 7vw, 5.5rem) 0;
|
|
}
|
|
|
|
.section-muted {
|
|
background: var(--color-surface-muted);
|
|
border-block: 1px solid var(--color-border);
|
|
}
|
|
|
|
.section-head {
|
|
max-width: 760px;
|
|
margin-bottom: 1.6rem;
|
|
}
|
|
|
|
.service-card,
|
|
.case-card,
|
|
.testimonial-card {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.service-card:hover,
|
|
.case-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 32px rgba(23, 23, 23, .06);
|
|
}
|
|
|
|
.icon-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
margin-bottom: 1rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-muted);
|
|
font-size: .75rem;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.case-card strong {
|
|
display: inline-block;
|
|
margin-top: .7rem;
|
|
color: var(--color-ink);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.sticky-copy {
|
|
position: sticky;
|
|
top: 6rem;
|
|
}
|
|
|
|
.testimonial-stack {
|
|
display: grid;
|
|
gap: .9rem;
|
|
}
|
|
|
|
.testimonial-card {
|
|
margin: 0;
|
|
}
|
|
|
|
.testimonial-card blockquote {
|
|
margin: 0 0 .9rem;
|
|
color: var(--color-ink);
|
|
font-size: clamp(1.05rem, 2vw, 1.35rem);
|
|
line-height: 1.32;
|
|
letter-spacing: -.025em;
|
|
}
|
|
|
|
.notice-box {
|
|
margin-top: 1.2rem;
|
|
padding: 1rem;
|
|
color: #4f4f4f;
|
|
font-size: .9rem;
|
|
}
|
|
|
|
.notice-box code {
|
|
color: var(--color-ink);
|
|
background: #e5e5df;
|
|
border-radius: 4px;
|
|
padding: .08rem .28rem;
|
|
}
|
|
|
|
.form-panel {
|
|
padding: clamp(1rem, 3vw, 1.6rem);
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.form-label {
|
|
color: var(--color-ink);
|
|
font-size: .88rem;
|
|
font-weight: 680;
|
|
}
|
|
|
|
.form-control,
|
|
.form-select {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 44px;
|
|
padding: .72rem .85rem;
|
|
border: 1px solid #d3d3cc;
|
|
border-radius: var(--radius-sm);
|
|
background: #fff;
|
|
color: var(--color-ink);
|
|
font-size: .95rem;
|
|
}
|
|
|
|
textarea.form-control {
|
|
min-height: 140px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus,
|
|
.form-check-input:focus {
|
|
border-color: #777;
|
|
box-shadow: 0 0 0 .2rem rgba(23, 23, 23, .08);
|
|
}
|
|
|
|
.form-check {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: .6rem;
|
|
}
|
|
|
|
.form-check-input {
|
|
flex: 0 0 auto;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-top: .25rem;
|
|
border: 1px solid #bcbcb4;
|
|
}
|
|
|
|
.invalid-feedback {
|
|
display: none;
|
|
width: 100%;
|
|
margin-top: .35rem;
|
|
color: #9f1d1d;
|
|
font-size: .84rem;
|
|
}
|
|
|
|
.is-invalid ~ .invalid-feedback,
|
|
.was-validated :invalid ~ .invalid-feedback {
|
|
display: block;
|
|
}
|
|
|
|
.is-invalid,
|
|
.was-validated :invalid {
|
|
border-color: #b42318;
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: var(--color-ink);
|
|
border-color: var(--color-ink);
|
|
}
|
|
|
|
.form-assurance {
|
|
color: var(--color-muted);
|
|
font-size: .9rem;
|
|
}
|
|
|
|
.alert {
|
|
padding: .9rem 1rem;
|
|
margin-bottom: 1rem;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
font-size: .95rem;
|
|
}
|
|
|
|
.alert-success {
|
|
color: #164b2f;
|
|
background: #eaf7ef;
|
|
border-color: #bddfcb;
|
|
}
|
|
|
|
.alert-danger {
|
|
color: #7a271a;
|
|
background: #fff1ef;
|
|
border-color: #f3c3bd;
|
|
}
|
|
|
|
.site-footer {
|
|
padding: 1.3rem 0;
|
|
color: var(--color-muted);
|
|
background: var(--color-ink);
|
|
font-size: .88rem;
|
|
}
|
|
|
|
.site-footer span {
|
|
color: #d4d4d4;
|
|
}
|
|
|
|
.toast {
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.navbar-collapse {
|
|
padding-top: .8rem;
|
|
}
|
|
|
|
.hero-section {
|
|
padding-top: 4rem;
|
|
}
|
|
|
|
.sticky-copy {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
body.agency-page {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.metric-strip,
|
|
.logo-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.metric-strip div {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 0 0 .8rem;
|
|
}
|
|
|
|
.metric-strip div:last-child {
|
|
border-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|