/* ==========================================================================
BigBox Technologies — technology consulting & delivery partner
Design system: ink/navy + logo-matched coral & gold accents
========================================================================== */
/* Self-hosted fonts (Inter + Plus Jakarta Sans, latin + latin-ext subsets only --
this is an English-language site; the fuller Google Fonts CSS also serves
cyrillic/greek/vietnamese subsets no page here ever uses). Removes Google
Fonts as a separate render-blocking origin entirely -- a PageSpeed audit
flagged the Google Fonts stylesheet request itself (not the font files,
which already load async thanks to font-display:swap) as a render-blocking
cost, since it was fetched via a plain (not ) to keep the page's heading hierarchy
sequential -- there's no between the last and these headings
elsewhere on the page, which a real accessibility audit flagged as a
skipped level. Explicit font-size/margin here reproduce exactly what the
browser's default rendering was, so this is a semantic-only change
with zero visual difference. */
.footer-col h3 { font-size: 14px; margin-bottom: 22px; }
.footer-col ul { display: flex; flex-direction: column; gap: 13px; }
.footer-col a { font-size: 14.5px; transition: color 0.2s; }
.footer-col a:hover { color: var(--white); }
.footer-contact li { font-size: 14.5px; }
.footer-contact a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid var(--border-dark); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; padding: 24px 28px; flex-wrap: wrap; gap: 14px; font-size: 13.5px; }
.footer-bottom-inner .footer-cta { color: var(--gold); font-weight: 600; font-family: var(--font-display); }
.footer-bottom-inner .footer-cta:hover { color: var(--white); }
/* ---------- Back to top ---------- */
.back-to-top {
position: fixed;
right: 26px; bottom: 26px;
width: 46px; height: 46px;
border-radius: 50%;
background: var(--ink);
color: var(--white);
border: none;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 90;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--coral); }
/* ---------- Side contact widget (homepage only) ---------- */
.side-contact {
position: fixed;
left: 0;
top: calc(var(--header-h, 81px) + 16px);
width: 340px;
max-width: calc(100vw - 20px);
max-height: calc(100vh - var(--header-h, 81px) - 32px);
z-index: 95;
transform: translateX(-115%);
transition: transform 0.5s var(--ease);
pointer-events: none;
}
.side-contact.open { transform: translateX(0); pointer-events: auto; }
.side-contact-inner {
position: relative;
background: var(--white);
border: 1px solid var(--border);
border-left: none;
border-radius: 0 var(--radius) var(--radius) 0;
box-shadow: var(--shadow);
padding: 34px 30px;
max-height: calc(100vh - var(--header-h, 81px) - 32px);
overflow-y: auto;
}
.side-contact-close {
position: absolute;
top: 14px; right: 14px;
width: 30px; height: 30px;
border-radius: 50%;
border: none;
background: var(--bg-soft);
color: var(--text-dim);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s;
}
.side-contact-close:hover { background: var(--ink); color: var(--white); }
.side-contact-close svg { width: 14px; height: 14px; }
.side-contact-eyebrow {
font-family: var(--font-display);
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--coral-text);
margin-bottom: 10px;
padding-right: 30px;
}
.side-contact-inner h3 { font-size: 20px; margin-bottom: 8px; padding-right: 20px; }
.side-contact-lead { font-size: 14px; color: var(--text); margin-bottom: 22px; }
.side-contact-form .form-group { margin-bottom: 14px; }
.side-contact-form label {
display: block;
font-size: 12.5px;
font-weight: 600;
margin-bottom: 6px;
color: var(--text-dark);
font-family: var(--font-display);
}
.side-contact-form input,
.side-contact-form textarea {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: inherit;
font-size: 14px;
color: var(--text-dark);
background: var(--white);
resize: vertical;
transition: border-color 0.2s;
}
.side-contact-form input:focus,
.side-contact-form textarea:focus {
outline: none;
border-color: var(--coral);
box-shadow: 0 0 0 3px rgba(255, 68, 76, 0.15);
}
.side-contact-submit { width: 100%; justify-content: center; margin-top: 4px; }
.side-contact-tab {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 95;
background: var(--ink);
color: var(--white);
border: none;
border-radius: 0 10px 10px 0;
padding: 20px 11px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-sm);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease), background 0.2s, transform 0.2s;
animation: side-tab-idle-glow 3.2s ease-in-out infinite;
}
.side-contact-tab.show { opacity: 1; visibility: visible; }
.side-contact-tab:hover { background: var(--coral); transform: translateY(-50%) translateX(2px); }
.side-contact-tab-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@keyframes side-tab-idle-glow {
0%, 100% { box-shadow: var(--shadow-sm); }
50% { box-shadow: 0 0 18px 3px var(--glow-coral), var(--shadow-sm); }
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 991px) {
section { padding: 88px 0; }
.hero-inner { grid-template-columns: 1fr; }
.hero-visual { max-width: 420px; margin: 0 auto; order: -1; }
.value-grid { grid-template-columns: 1fr 1fr; }
.value-item { border-right: none; border-bottom: 1px solid var(--border); padding: 32px 0; }
.pillars-grid { grid-template-columns: 1fr 1fr; }
.problems-grid { grid-template-columns: 1fr; }
.principles-grid { grid-template-columns: 1fr; }
.ai-teaser-inner { grid-template-columns: 1fr; }
.ai-teaser-visual { order: -1; }
.opportunity-row { grid-template-columns: 1fr; gap: 10px; text-align: left; }
.opportunity-row .capability { justify-self: start; }
.workflow-columns { grid-template-columns: 1fr; gap: 40px; }
.arch-box { min-width: 110px; font-size: 12.5px; padding: 12px 16px; }
.process-track { grid-template-columns: 1fr; gap: 40px; }
.process-track::before { display: none; }
.philosophy-inner { grid-template-columns: 1fr; }
.work-grid { grid-template-columns: 1fr; }
.about-block { grid-template-columns: 1fr; gap: 24px; }
.service-detail-inner { grid-template-columns: 1fr; }
.related-services { grid-template-columns: 1fr; }
.contact-inner { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.nav-cta { display: none; }
}
@media (max-width: 767px) {
section { padding: 64px 0; }
.page-hero { padding: 48px 0 56px; }
.breadcrumbs { padding: 14px 0; }
.hero { padding: 56px 0 64px; }
.main-nav {
position: fixed;
top: 0; right: 0;
width: 300px; max-width: 85vw; height: 100vh;
background: var(--white);
box-shadow: -10px 0 30px rgba(0,0,0,0.1);
padding: 100px 28px 30px;
transform: translateX(100%);
transition: transform 0.3s ease;
overflow-y: auto;
}
.main-nav.open { transform: translateX(0); }
.main-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
.main-nav > ul > li > a { padding: 14px 4px; }
.dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 0 14px; display: none; }
.has-dropdown.open .dropdown { display: block; }
.has-dropdown { display: flex; flex-direction: column; }
.has-dropdown > a { padding-right: 40px; }
.dropdown-toggle {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0; top: 2px;
width: 40px; height: 40px;
background: none;
border: none;
color: var(--text-dark);
}
.dropdown-toggle svg { transition: transform 0.2s; }
.has-dropdown.open .dropdown-toggle svg { transform: rotate(180deg); }
.nav-toggle { display: flex; }
.value-grid { grid-template-columns: 1fr; }
.pillars-grid { grid-template-columns: 1fr; }
.process-step { padding-right: 0; }
.arch-diagram { padding: 32px 16px; }
.arch-layer { gap: 10px; }
.philosophy-list { grid-template-columns: 1fr; }
.integration-diagram { padding: 32px 20px; }
.diagram-node { width: 100px; }
.diagram-node span { font-size: 11.5px; }
.approach-step { grid-template-columns: 1fr; gap: 16px; }
.form-row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; padding: 64px 28px 30px; }
.footer-bottom-inner { flex-direction: column; text-align: center; }
.contact-form { padding: 28px; }
.service-row { grid-template-columns: 1fr; gap: 10px; text-align: left; }
.side-contact { width: 300px; }
.side-contact-inner { padding: 28px 22px; }
.side-contact-tab { padding: 16px 9px; }
.side-contact-tab-text { font-size: 12px; }
}
/* ==========================================================================
Estimate Engine -- homepage teaser + full wizard (pages/estimate.html).
All numeric pricing lives in js/estimate-config.js, not here. Built from
existing tokens/shapes: radio-card and checkbox-chip are new (no prior
equivalent existed), everything else adapts an existing pattern --
progress bar from .audit-bar-track/.audit-bar-fill's rounded-track/
gradient-fill shape, sticky sidebar from .breadcrumbs's
position:sticky/var(--header-h) pattern, cards from .case-card.
========================================================================== */
/* ---------- Homepage teaser ---------- */
.estimate-teaser { background: var(--bg-soft); }
.estimate-teaser-widget {
max-width: 760px;
margin: 0 auto;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px;
box-shadow: var(--shadow-sm);
}
.estimate-teaser-services { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
.qe-service-pill {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
padding: 12px 20px;
border: 1.5px solid var(--border);
border-radius: 40px;
background: var(--white);
color: var(--text-dark);
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.qe-service-pill:hover { border-color: var(--coral); color: var(--coral-text); }
.qe-service-pill.active { background: var(--ink); border-color: var(--ink); color: var(--gold); }
.estimate-teaser-complexity { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; }
.qe-complexity-btn {
font-family: var(--font-display);
font-size: 13.5px;
font-weight: 600;
padding: 10px 18px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-soft);
color: var(--text-dim);
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.qe-complexity-btn:hover { border-color: var(--coral); color: var(--text-dark); }
.qe-complexity-btn.active { background: var(--white); border-color: var(--coral); color: var(--coral-text); }
.estimate-teaser-result { text-align: center; padding-top: 24px; border-top: 1px solid var(--border); }
.qe-result-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 8px; }
.qe-result-amount { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--text-dark); margin-bottom: 20px; }
.estimate-teaser-hint { text-align: center; color: var(--text-dim); font-size: 14px; margin-top: 4px; }
/* ---------- Full wizard layout ---------- */
.estimate-wizard-section { padding: 64px 0 96px; }
/* pages/project-discovery.html's hero has an in-page "Start Project Discovery"
link (href="#discoveryWizard"), and every "Get an Estimate" link sitewide now
points at estimate.html#estimateWizard so it lands straight on the interactive
wizard instead of the page's own hero text. Without this, the browser's native
anchor jump aligns the target's top edge with the viewport top, which lands
directly behind the sticky header + sticky breadcrumb bar stacked on top of it,
visually cutting off the wizard's own heading/progress bar (confirmed via a
real user report -- the first, tighter buffer measured a clean numeric fix but
still read as "touching"/cut off in practice, so this is deliberately generous
rather than the minimum needed). scroll-margin-top reuses the same live-measured
--header-h variable the breadcrumb bar itself uses, plus its own height, so this
stays correct across breakpoints without hardcoding two numbers that could drift
out of sync. */
#discoveryWizard,
#estimateWizard { scroll-margin-top: calc(var(--header-h, 81px) + 110px); }
.estimate-wizard-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 48px;
align-items: start;
}
.estimate-config-col {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 44px;
min-height: 420px;
}
/* Project Discovery dropped its sticky sidebar/mobile bar (it only ever
repeated the category/sub-option already shown in the step content, unlike
the Estimate Engine's sidebar which carries a unique live $ figure) -- the
wizard card is centered on its own instead of sitting in the two-column
.estimate-wizard-grid. */
.discovery-wizard-centered { max-width: 840px; margin: 0 auto; }
.estimate-summary-col {
position: sticky;
top: calc(var(--header-h, 81px) + 24px);
background: var(--ink);
border-radius: var(--radius);
padding: 32px;
color: rgba(255, 255, 255, 0.85);
}
.estimate-summary-col .eyebrow { color: var(--gold); }
.estimate-summary-col .eyebrow::before { background: var(--gold); }
.estimate-summary-amount { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--white); margin: 10px 0 4px; line-height: 1.2; }
.estimate-summary-currency-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); margin-bottom: 20px; }
.estimate-summary-services { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.estimate-summary-services li { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.85); display: flex; align-items: center; gap: 8px; }
.estimate-summary-services li::before { content: "✓"; color: var(--gold); font-weight: 700; flex-shrink: 0; }
.estimate-summary-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); line-height: 1.5; }
/* Light-background variant of .estimate-summary-services, for use in .estimate-config-col
(e.g. Project Discovery's summary step) rather than the dark .estimate-summary-col sidebar. */
.discovery-summary-services { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.discovery-summary-services li { font-size: 14.5px; font-weight: 600; color: var(--text-dark); display: flex; align-items: center; gap: 8px; }
.discovery-summary-services li::before { content: "✓"; color: var(--coral-text); font-weight: 700; flex-shrink: 0; }
/* ---------- Step progress bar ---------- */
.estimate-progress { margin-bottom: 40px; }
.estimate-progress-labels { display: flex; justify-content: space-between; margin-bottom: 10px; }
.estimate-progress-labels span {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
}
.estimate-progress-labels span.active { color: var(--coral-text); }
.estimate-progress-track { height: 6px; background: var(--bg-soft-2); border-radius: 3px; overflow: hidden; }
.estimate-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--coral), var(--gold)); transition: width 0.4s var(--ease); }
/* ---------- Step transitions ---------- */
.estimate-step { animation: estimate-step-in 0.35s var(--ease); }
@keyframes estimate-step-in {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
.estimate-step h3 { font-size: 22px; margin-bottom: 6px; }
.estimate-step .estimate-step-help { color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }
/* gap guarantees a minimum space between buttons even when justify-content:
space-between runs out of free space to distribute -- happens on Project
Discovery's summary step, which has 4 buttons (Back/Continue/Discuss/Start
Over) in this same row, narrower still since the wizard card centered at
max-width:760px instead of spanning the old two-column grid's wider column. */
.estimate-step-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
/* ---------- Radio-card / checkbox-chip selectors ---------- */
.estimate-option-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; }
.estimate-option-group.list { grid-template-columns: 1fr; }
.radio-card, .checkbox-chip {
display: block;
cursor: pointer;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 18px 20px;
transition: border-color 0.2s, background 0.2s, transform 0.15s;
background: var(--white);
}
.radio-card:hover, .checkbox-chip:hover { border-color: var(--coral); transform: translateY(-1px); }
.radio-card input, .checkbox-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-card .rc-label, .checkbox-chip .cc-label {
font-family: var(--font-display);
font-weight: 700;
font-size: 14.5px;
color: var(--text-dark);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.radio-card .rc-desc, .checkbox-chip .cc-desc { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
.radio-card .rc-check, .checkbox-chip .cc-check {
width: 20px; height: 20px;
border: 1.5px solid var(--border);
border-radius: 50%;
flex-shrink: 0;
position: relative;
transition: border-color 0.2s, background 0.2s;
}
.checkbox-chip .cc-check { border-radius: 5px; }
.radio-card input:checked ~ .rc-label .rc-check,
.checkbox-chip input:checked ~ .cc-label .cc-check { background: var(--coral); border-color: var(--coral); }
.radio-card input:checked ~ .rc-label .rc-check::after {
content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--white);
}
.checkbox-chip input:checked ~ .cc-label .cc-check::after {
content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.radio-card:has(input:checked), .checkbox-chip:has(input:checked) { border-color: var(--coral); background: rgba(255, 68, 76, 0.04); }
.radio-card input:focus-visible ~ .rc-label, .checkbox-chip input:focus-visible ~ .cc-label { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
/* ---------- Info tooltip ---------- */
.estimate-info {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
background: var(--bg-soft-2); color: var(--text-dim);
font-size: 11px; font-weight: 700; font-family: var(--font-display);
cursor: help; position: relative; margin-left: 6px; flex-shrink: 0;
}
.estimate-info:hover::after, .estimate-info:focus-visible::after {
content: attr(data-tip);
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
width: 220px; padding: 10px 12px; border-radius: 6px;
background: var(--ink); color: var(--white); font-size: 12.5px; font-weight: 400;
line-height: 1.4; text-align: left; z-index: 5;
}
/* ---------- Mode toggle (single vs multiple services) ---------- */
.estimate-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
/* ---------- Custom-scope info card (e.g. E-commerce) ---------- */
.estimate-custom-scope {
border: 1.5px dashed var(--border);
border-radius: var(--radius-sm);
padding: 16px 20px;
color: var(--text-dim);
font-size: 13px;
grid-column: 1 / -1;
}
.estimate-custom-scope strong { color: var(--text-dark); }
/* ---------- Breakdown & summary blocks (full-page summary step) ---------- */
.estimate-breakdown { list-style: none; padding: 0; margin: 0; }
.estimate-breakdown li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14px; }
.estimate-breakdown li:first-child { border-top: none; }
.estimate-breakdown .bd-label { color: var(--text); }
.estimate-breakdown .bd-value { font-family: var(--font-display); font-weight: 600; color: var(--text-dark); white-space: nowrap; }
.estimate-breakdown-total { display: flex; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 2px solid var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.estimate-service-block { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.estimate-service-block summary {
cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-display); font-weight: 700; font-size: 15px; list-style: none;
}
.estimate-service-block summary::-webkit-details-marker { display: none; }
.estimate-service-block summary .sb-range { color: var(--coral-text); font-weight: 700; }
.estimate-service-block[open] summary { border-bottom: 1px solid var(--border); }
.estimate-service-block .sb-body { padding: 20px 24px; }
.estimate-combined-total {
background: var(--ink);
border-radius: var(--radius);
padding: 32px;
text-align: center;
margin-top: 8px;
}
.estimate-combined-total .eyebrow { color: var(--gold); justify-content: center; }
.estimate-combined-total .eyebrow::before { display: none; }
.estimate-combined-total .amount { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--white); margin: 8px 0; }
.estimate-combined-total .note { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
/* ---------- Currency select + FX status ---------- */
.estimate-currency-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.estimate-currency-row select { width: auto; min-width: 140px; }
.estimate-fx-note { font-size: 12.5px; color: var(--text-dim); }
.estimate-fx-note.unavailable { color: var(--coral-text); }
/* ---------- Reference number + disclaimer ---------- */
.estimate-reference { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.03em; margin-bottom: 16px; }
.estimate-disclaimer { font-size: 13px; color: var(--text-dim); line-height: 1.6; padding: 16px 20px; background: var(--bg-soft); border-radius: var(--radius-sm); }
/* ---------- FAQ (native details/summary) ---------- */
.estimate-faq-item { border-top: 1px solid var(--border); }
.estimate-faq-item:last-child { border-bottom: 1px solid var(--border); }
.estimate-faq-item summary {
cursor: pointer; padding: 22px 4px; font-family: var(--font-display); font-weight: 700; font-size: 16px;
color: var(--text-dark); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.estimate-faq-item summary::-webkit-details-marker { display: none; }
.estimate-faq-item summary::after { content: "+"; font-size: 22px; color: var(--coral-text); flex-shrink: 0; transition: transform 0.2s; }
.estimate-faq-item[open] summary::after { transform: rotate(45deg); }
.estimate-faq-item p { padding: 0 4px 22px; margin: 0; color: var(--text); font-size: 14.5px; }
/* ---------- Mobile ---------- */
@media (max-width: 991px) {
.estimate-wizard-grid { grid-template-columns: 1fr; }
.estimate-summary-col { position: static; margin-top: 0; }
}
@media (max-width: 767px) {
.estimate-config-col { padding: 28px 22px; }
.estimate-teaser-widget { padding: 28px 20px; }
.estimate-mode-toggle { grid-template-columns: 1fr; }
.estimate-wizard-section { padding: 40px 0 120px; } /* extra bottom room for the sticky bar */
.estimate-summary-col { display: none; } /* replaced by .estimate-summary-bar below */
.estimate-summary-bar {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
background: var(--ink); color: var(--white); padding: 14px 20px;
box-shadow: 0 -8px 24px rgba(10, 15, 31, 0.2);
}
.estimate-summary-bar .bar-amount { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.estimate-summary-bar .bar-label { font-size: 11px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.04em; }
}
@media (min-width: 768px) {
.estimate-summary-bar { display: none; }
}
/* ---------- Nav "Get an Estimate" highlight ---------- */
.main-nav .nav-estimate-link {
display: inline-flex;
align-items: center;
position: relative;
color: var(--coral-text);
font-weight: 700;
border: 1.5px solid var(--coral);
border-radius: var(--radius-sm);
padding: 6px 14px;
margin: -6px 0;
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.main-nav .nav-estimate-link:hover {
background: var(--coral);
color: var(--white);
box-shadow: 0 4px 14px rgba(255, 68, 76, 0.35);
transform: translateY(-1px);
}
.main-nav .nav-estimate-link:hover::before { animation: none; opacity: 0; }
/* Pulsing "pop" ring as a pseudo-element animating only opacity/transform
(GPU-composited) instead of animating box-shadow directly on the link
itself (paint-triggering, non-composited -- flagged by a Lighthouse
"avoid non-composited animations" audit). Same visual read as an
outward ring pulse. */
.main-nav .nav-estimate-link::before {
content: "";
position: absolute;
inset: -1.5px;
border: 1.5px solid var(--coral);
border-radius: inherit;
opacity: 0.5;
transform: scale(1);
animation: nav-estimate-glow 2.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes nav-estimate-glow {
0%, 100% { opacity: 0.45; transform: scale(1); }
50% { opacity: 0; transform: scale(1.22); }
}
/* ---------- Homepage teaser: eye-catching treatment ---------- */
.estimate-teaser-eyebrow-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.estimate-teaser-eyebrow-row .eyebrow { margin-bottom: 0; }
.estimate-teaser-badge {
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
background: var(--gold);
padding: 3px 9px;
border-radius: 20px;
}
.estimate-teaser-widget {
position: relative;
border-color: rgba(255, 68, 76, 0.25);
box-shadow: 0 0 0 1px rgba(255, 68, 76, 0.06), var(--shadow);
}
/* ---------- Fix: remove the stray default focus outline that appeared as a
visible box around the step heading. tabindex="-1" + .focus() is applied
programmatically on every step render purely so screen readers announce
the new heading -- sighted/mouse users never need a visible ring here,
and interactive controls (buttons, inputs) still get their own normal
focus styles untouched. ---------- */
.estimate-step h3:focus { outline: none; }
/* ---------- Currency select: match the site's form-control theme instead
of default browser chrome. The dropdown chevron is a real inline
in a positioning wrapper, not a CSS data: background-image -- this
site's CSP img-src is deliberately 'self' only, no data:, so a data-URI
background image gets silently blocked (console-only, no layout error). */
.estimate-select-wrap { position: relative; display: inline-block; }
.estimate-select-wrap svg.select-chevron {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--text-dim);
pointer-events: none;
}
.estimate-currency-row select {
appearance: none;
-webkit-appearance: none;
padding: 9px 34px 9px 14px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--text-dark);
background: var(--white);
cursor: pointer;
transition: border-color 0.2s;
}
.estimate-currency-row select:hover { border-color: var(--coral); }
.estimate-currency-row select:focus {
outline: none;
border-color: var(--coral);
box-shadow: 0 0 0 3px rgba(255, 68, 76, 0.18);
}
/* ---------- Converted-currency line, shown wherever the estimate amount
appears (main summary card and the sticky sidebar/mobile bar). ---------- */
.estimate-converted-amount {
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
color: var(--coral-text);
margin-top: 4px;
}
.estimate-summary-col .estimate-converted-amount { color: var(--gold); }
.estimate-summary-bar .estimate-converted-amount { color: var(--gold); font-size: 12.5px; margin-top: 2px; }
/* ==========================================================================
Project Discovery -- homepage teaser + service/case-study entry links +
full wizard page (pages/project-discovery.html). The wizard itself reuses
the Estimate Engine's .radio-card/.checkbox-chip/.estimate-option-group/
.estimate-step*/.estimate-progress*/.estimate-wizard-grid* classes
verbatim (see js/project-discovery.js) -- only the handful of genuinely
new shapes below get new rules.
========================================================================== */
/* ---------- Homepage teaser ---------- */
.discovery-teaser { background: var(--white); }
.discovery-teaser-grid.estimate-option-group { max-width: 900px; margin: 0 auto 28px; }
.discovery-teaser-grid .radio-card { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--text-dark); }
.discovery-teaser-grid .radio-card:hover { color: var(--coral-text); }
/* ---------- Secondary link inside a dark .cta-band (e.g. service pages'
"Not sure exactly what you need? Try Project Discovery" line). .cta-band
is --ink background, so this needs the dark-background legibility
treatment (gold on hover), same rule used throughout the design system. */
.cta-band-secondary { margin-top: 18px; }
.cta-band-secondary a { color: rgba(255, 255, 255, 0.65); font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.cta-band-secondary a:hover { color: var(--gold); }
/* ---------- Contextual "Have a similar need?" link on case-study cards ---------- */
.case-discovery-link { margin-top: 14px; }
.case-discovery-link a { font-size: 13.5px; font-weight: 600; color: var(--coral-text); }
.case-discovery-link a:hover { color: var(--coral-dark); }
/* ---------- Read-only Q&A recap shown above the lead-capture form ---------- */
.discovery-summary-recap { list-style: none; padding: 0; margin: 0 0 28px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.discovery-summary-recap li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 14px; }
.discovery-summary-recap li:first-child { border-top: none; }
.discovery-summary-recap .recap-label { color: var(--text-dim); }
.discovery-summary-recap .recap-value { font-family: var(--font-display); font-weight: 600; color: var(--text-dark); text-align: right; }
/* ---------- Complexity badge on the summary step ---------- */
.discovery-complexity-badge {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-weight: 700; font-size: 13px;
padding: 8px 16px; border-radius: 40px;
background: var(--ink); color: var(--gold);
margin-bottom: 8px;
}