/* ---------------------------------------------------------
Law Office of Cameron P. Kockler, LLC — site stylesheet.
Brand tokens, layout overrides, form styling, and small
content-page utilities live here.
--------------------------------------------------------- */
:root {
--c-forest: #0E3B26;
--c-forest-2: #143F2B;
--c-gold: #C9A24A;
--c-champagne: #E2C77E;
--c-ivory: #F5EFE0;
--c-ivory-2: #FBF7EE;
--c-ink: #1B1B1B;
--c-muted: #6B6B68;
--c-line: #E5E1D7;
}
/* Bare pre-header band — thin Forest top border, no content */
.pre-header.pre-header--bare {
height: 14px;
min-height: 14px;
padding: 0;
background: var(--c-forest);
}
/* Skip-to-content link (a11y) */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.sr-only:focus {
position: static; width: auto; height: auto;
padding: 8px 14px; margin: 6px;
background: var(--c-forest); color: var(--c-ivory);
clip: auto; overflow: visible;
}
/* Call-out band — compact, centered (text + button stacked centered
instead of the default left-text/right-button split). Half the
default padding for a tighter row. */
.call-out {
padding: 22px 0;
}
.call-out .flex-row {
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
}
/* Forest-fill button variant — `.btn.btn-forest` paints the button
in Forest with ivory text. Used where default gold button would
clash (Ivory sections, Gold sections, or for secondary CTAs). */
.btn.btn-forest {
background: var(--c-forest);
border-color: var(--c-forest);
color: var(--c-ivory);
}
.btn.btn-forest:hover {
background: var(--c-forest-2);
border-color: var(--c-forest-2);
color: #fff;
}
/* Icon-box cards on forest sections — gold border so the three cards
on "Beyond the Office" (and other forest icon-box sections) read as
a distinct triptych against the forest background. All cards in a
row stretch to the tallest card's height. */
.page-section-bg2 .icons-box .icons-item .item-box,
.page-section-bg2.green .icons-box .icons-item .item-box {
height: 100%;
padding: 32px 28px;
border: 1px solid var(--c-gold);
background: rgba(255, 255, 255, 0.02);
transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.page-section-bg2 .icons-box .icons-item:hover .item-box,
.page-section-bg2.green .icons-box .icons-item:hover .item-box {
background: rgba(201, 162, 74, 0.08);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20);
}
.page-section-bg2 .icons-box .icons-wrap,
.page-section-bg2 .icons-box .icons-item,
.page-section-bg2.green .icons-box .icons-wrap,
.page-section-bg2.green .icons-box .icons-item {
height: 100%;
}
/* Style-2 variant (used inside "Built for Real People" Home section) —
keep its inline-with-text layout, no boxed treatment. */
.page-section-bg2 .icons-box.style-2 .icons-item .item-box,
.page-section-bg2.green .icons-box.style-2 .icons-item .item-box {
padding: 0;
border: none;
background: none;
box-shadow: none;
transform: none;
}
.page-section-bg2 .icons-box.style-2 .icons-item:hover .item-box,
.page-section-bg2.green .icons-box.style-2 .icons-item:hover .item-box {
background: none;
transform: none;
box-shadow: none;
}
/* ---------------------------------------------------------
Form integration — neutral input baseline.
ASP.NET validation summary + per-field messages.
All inputs and selects share the same height for visual
rhythm; rows get consistent vertical breathing room.
--------------------------------------------------------- */
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form select,
.contact-form textarea {
width: 100%;
height: 52px;
padding: 0 18px;
box-sizing: border-box;
line-height: 1.4;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1rem;
}
.contact-form textarea {
height: auto;
min-height: 160px;
padding: 16px 18px;
line-height: 1.6;
}
.contact-form select {
/* Right padding for the chevron; remove native arrow on all browsers
and paint a Gold chevron via background-image. */
padding-right: 44px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 12px 8px;
}
/* Vertical rhythm between form rows */
.contact-form .flex-row.row {
margin-bottom: 24px;
}
.contact-form .flex-row.row:last-of-type {
margin-bottom: 0;
}
@media (max-width: 768px) {
.contact-form .flex-row.row > [class*="col-"]:not(:last-child) {
margin-bottom: 24px;
}
}
/* Focus state — Forest green, not the browser-default blue */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--c-forest);
box-shadow: 0 0 0 3px rgba(14, 59, 38, 0.20);
}
/* Placeholder text — match between inputs and the "empty" select option
so the form reads uniformly. Without this, the select's first option
renders in the OS default ink color while input placeholders are muted. */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: rgba(27, 27, 27, 0.55);
opacity: 1;
}
.contact-form select {
color: rgba(27, 27, 27, 0.55);
}
.contact-form select:valid,
.contact-form select.has-value {
color: var(--c-ink);
}
.contact-form select option {
color: var(--c-ink);
background-color: #fff;
}
.contact-form select option[value=""] {
color: rgba(27, 27, 27, 0.55);
}
.contact-form,
.contact-form select,
.contact-form input[type="checkbox"],
.contact-form input[type="radio"] {
accent-color: var(--c-forest);
}
/* ---------------------------------------------------------
Custom