/* ============================================================================= Regio Systems — Public marketing site styles Pairs with variables.css. Brand source: regio-business/strategy/brand-guidelines ========================================================================== */ /* ---- Reset / base ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { overflow-x: clip; max-width: 100%; } /* let flex/grid text children shrink instead of forcing horizontal overflow */ .hero__grid > *, .grid > *, .featlist > *, .steps > *, .feat, .mock__row > div, .feature-card > *, .step-flow > *, .step-line > *, .step-row > *, .trio > * { min-width: 0; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-deep-navy); background: var(--color-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; } .icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; } a { color: var(--color-horizon-blue); text-decoration: none; } a:hover { color: var(--cta-bg-hover); } h1, h2, h3, p, ul, figure { margin: 0; } ul { padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--color-horizon-blue); outline-offset: 2px; border-radius: 2px; } /* ---- Typography (03) ------------------------------------------------- */ .type-display { font-family: var(--font-display); font-size: clamp(34px, 5vw, 42px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; } .type-h1 { font-family: var(--font-body); font-size: clamp(28px, 3.5vw, 34px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; } .type-h2 { font-family: var(--font-body); font-size: clamp(22px, 2.5vw, 28px); font-weight: 600; line-height: 1.3; } /* Sitewide no-orphan rule (redesign handoff §0, 2026-07-06): no heading or paragraph ends with a single word alone on its last line. Progressive enhancement — unsupported browsers wrap as before; use   between the last two words where guaranteed control matters (e.g. rotating headlines). */ h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } .type-h3 { font-family: var(--font-body); font-size: clamp(18px, 2vw, 20px); font-weight: 600; line-height: 1.4; } .type-body { font-size: 16px; line-height: 1.7; } .type-lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; } .eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; display: inline-block; margin-bottom: var(--space-3); } /* ---- Layout ---------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--outer-margin); } .section { padding-block: var(--space-12); } .section--tight { padding-block: var(--space-10); } .section-head { max-width: 760px; margin-bottom: var(--space-8); } .section-head p { margin-top: var(--space-4); color: var(--color-steel-gray); } /* Full-bleed section intro (About "Our Expertise" — redesign handoff 2026-07-06) */ .section-head--wide { max-width: none; } .measure { max-width: 68ch; } .center { text-align: center; margin-inline: auto; } /* Section background themes + scroll-strategy text colors (05) */ .bg-navy { background: var(--color-deep-navy); color: #fff; } .bg-surface { background: var(--color-surface-dark); color: #E6ECF5; } .bg-white { background: var(--color-white); color: var(--color-deep-navy); } .bg-offwhite{ background: var(--color-off-white); color: var(--color-deep-navy); } .bg-tint { background: var(--color-blue-tint); color: var(--color-deep-navy); } .bg-navy .eyebrow, .bg-surface .eyebrow { color: var(--color-horizon-blue); } /* eyebrow on dark */ .bg-white .eyebrow, .bg-offwhite .eyebrow, .bg-tint .eyebrow { color: var(--color-regio-blue); } /* eyebrow on light */ .bg-navy p, .bg-surface p { color: #C7D2E0; } .bg-navy .type-display, .bg-navy .type-h1, .bg-navy .type-h2, .bg-surface .type-h2 { color: #fff; } /* ---- Buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 11px 26px; border-radius: var(--radius-btn); border: 2px solid transparent; cursor: pointer; transition: background-color var(--dur-hover) var(--ease-in-out), border-color var(--dur-hover) var(--ease-in-out), transform var(--dur-hover) var(--ease-in-out); white-space: nowrap; text-align: center; } .btn--primary { background: var(--cta-bg); border-color: var(--cta-border); color: var(--cta-text); } .btn--primary:hover { background: var(--cta-bg-hover); border-color: var(--cta-border-hover); color: #fff; } .btn--ghost-dark { background: transparent; border-color: var(--color-horizon-blue); color: #fff; } .btn--ghost-dark:hover { background: rgba(58,128,210,0.14); color: #fff; } .btn--lg { padding: 14px 30px; font-size: 15px; } /* Header/drawer "Get Started" — links to the page; styled distinct from the in-body modal buttons (light blue, dark text) per the 2026-06-24 review. */ .btn--soft { background: var(--color-blue-tint); border-color: var(--color-horizon-blue); color: var(--color-deep-navy); } .btn--soft:hover { background: #E2ECFB; border-color: var(--color-horizon-blue); color: var(--color-deep-navy); } .btn:active { transform: scale(0.98); } .btn .icon { width: 18px; height: 18px; } .textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--color-horizon-blue); } .textlink .icon { width: 16px; height: 16px; transition: transform var(--dur-hover) var(--ease-in-out); } .textlink:hover .icon { transform: translateX(3px); } /* ---- Nav (05) -------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-white); border-bottom: 1px solid var(--color-cool-gray); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: inline-flex; align-items: flex-end; } /* Logo lockup (06): cropped symbol + Nunito wordmark, two-tone */ .lockup { display: inline-flex; align-items: flex-end; gap: 8px; } .lockup svg { display: block; height: 34px; width: auto; } .lockup .wm { display: block; font-family: var(--font-logo); font-weight: 500; font-size: 28px; line-height: 1; white-space: nowrap; letter-spacing: -0.005em; } .lockup--navy .wm { font-weight: 400; } /* irradiation compensation on dark */ .site-footer .lockup svg { height: 32px; } .site-footer .lockup .wm { font-size: 26px; } @media (max-width: 480px) { .lockup svg { height: 30px; } .lockup .wm { font-size: 24px; } } .nav-links { display: flex; align-items: center; gap: var(--space-6); } .nav-links a.navlink { color: var(--color-steel-gray); font-weight: 500; font-size: 15px; transition: color var(--dur-hover) var(--ease-in-out); } .nav-links a.navlink:hover, .nav-links a.navlink.is-active { color: var(--color-deep-navy); } .nav-toggle { display: none; background: none; border: 0; padding: var(--space-2); cursor: pointer; color: var(--color-deep-navy); } .nav-toggle .icon { width: 24px; height: 24px; } .mobile-drawer { display: none; } /* ---- Hero ------------------------------------------------------------ */ .hero { position: relative; overflow: hidden; } /* Hero copy is locked left-aligned (redesign handoff 2026-07-06) — keep even if a future build re-centers a draft. */ .hero--home { padding-block: var(--space-16) var(--space-12); text-align: left; } .hero--inner { padding-block: var(--space-12); } .hero__grid { display: grid; gap: var(--space-10); align-items: center; } /* Two columns on desktop everywhere (mockup 03); the home hero keeps its slightly asymmetric split via the more specific rule below. */ @media (min-width: 1024px) { .hero__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .hero--home .hero__grid { grid-template-columns: 1.05fr 0.95fr; } } .hero__tagline { font-family: var(--font-display); color: var(--color-horizon-blue); font-size: clamp(20px, 2.4vw, 26px); margin: var(--space-3) 0 var(--space-5); } .hero__sub { color: #C7D2E0; max-width: 52ch; font-size: 17px; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-8); } /* Decorative arc motif for dark sections (07 graphic language) */ .arc-motif { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; } /* Photo hero with brand overlay (mockup 01). The image + headline are picked at random per page load by the inline script after the hero section. */ .hero-photo { position: relative; width: 100%; min-height: 560px; display: flex; align-items: center; background-size: cover; background-position: center; background-color: var(--color-deep-navy); } .hero-photo::after { content: ""; position: absolute; inset: 0; background: var(--photo-overlay); z-index: 2; } .hero-copy { position: relative; z-index: 3; max-width: 620px; padding-block: var(--space-12); text-align: left; margin-right: auto; margin-left: 0; } .hero-copy h1 { color: #fff; } .hero-copy .eyebrow { color: var(--color-horizon-blue); } .hero-copy .hero__sub { color: #E6ECF5; } /* Portal Showcase — "See it in Action" carousel (2026-07-10 locked spec). Row: arrow | stage (~68%) | divider | caption (~30%) | arrow, arrows at the OUTER edges of the whole section. Side slides render at 55% scale / 50% opacity with only a slice visible before the stage clips them; the caption panel is a single block synced to the centered slide (wireShowcase). */ .shc { display: grid; grid-template-columns: auto minmax(0, 68fr) auto minmax(0, 27fr) auto; gap: var(--space-5); align-items: center; margin-top: var(--space-8); } .shc-arrow--prev { grid-area: 1 / 1; } .shc-stage { grid-area: 1 / 2; min-width: 0; } .shc-divider { grid-area: 1 / 3; } .shc-caption { grid-area: 1 / 4; } .shc-arrow--next { grid-area: 1 / 5; } .shc-swiper { overflow: hidden; } .shc-swiper .swiper-wrapper { align-items: center; } .shc-slide { width: 74%; } /* center card; the 13% strips each side show the clipped neighbors */ .shc-slide img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 18px 48px rgba(4, 16, 31, .45); user-select: none; -webkit-user-drag: none; } /* Coverflow: neighbors scale toward the center card's edge so a partial slice stays visible at the stage boundary; everything else rides at 55%/50% too so mid-drag states never pop. */ .shc-swiper .swiper-slide { opacity: .5; transform: scale(.55); transition: transform .6s var(--ease-in-out), opacity .6s var(--ease-in-out); } .shc-swiper .swiper-slide-prev { transform-origin: right center; } .shc-swiper .swiper-slide-next { transform-origin: left center; } .shc-swiper .swiper-slide-active { opacity: 1; transform: scale(1); } /* Divider — 2px, eyebrow blue at 80%, ~45% of the row's height, centered. translateY nudges divider + arrows up half the dots row so they center on the carousel's visual center rather than stage + dots. */ .shc-divider { width: 2px; height: 45%; min-height: 120px; background: var(--color-horizon-blue); opacity: .8; border-radius: 1px; justify-self: center; transform: translateY(-17px); } .shc-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #E6ECF5; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; transform: translateY(-17px); transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out); } .shc-arrow:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); } /* Caption panel — single synced block, no marker dot */ .shc-caption h4 { color: #fff; font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; } .shc-caption p { color: #B8C5D3; font-size: 15px; line-height: 1.5; margin: 0; } .shc-caption { transition: opacity .16s var(--ease-in); } .shc-caption.is-swapping { opacity: 0; } /* Dots — centered under the image column only */ .shc-dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--space-5); } .shc-dots .shc-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: #2E4A68; /* muted navy */ cursor: pointer; transition: background var(--dur-ui) var(--ease-in-out), transform var(--dur-ui) var(--ease-in-out); } .shc-dots .shc-dot.is-active { background: var(--color-horizon-blue); transform: scale(1.2); } /* Mobile: single centered card, no peek; caption drops below the stage */ @media (max-width: 899px) { .shc { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); } .shc-arrow--prev { grid-area: 1 / 1; } .shc-stage { grid-area: 1 / 2; } .shc-arrow--next { grid-area: 1 / 3; } .shc-caption { grid-area: 2 / 1 / 3 / -1; text-align: center; margin-top: var(--space-4); } .shc-divider { display: none; } .shc-slide { width: 100%; } .shc-arrow { width: 36px; height: 36px; font-size: 22px; } } /* Coverage US map (mockup 01) — outline accuracy fix tracked separately (handoff §3: Michigan/Great Lakes + AK/HI insets) */ .us-map-wrap { position: relative; width: 100%; max-width: 520px; margin-left: auto; } .us-map-svg { width: 100%; height: auto; display: block; overflow: visible; } /* Accurate US outline (Census TIGER via us-atlas, geoAlbersUsa — Great Lakes render as holes, AK/HI as insets). Land = tinted fill + brand stroke; borders = faint interior state lines for detail. */ .us-map-land { fill: rgba(58,128,210,0.06); stroke: rgba(58,128,210,0.55); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .us-map-borders { fill: none; stroke: rgba(58,128,210,0.28); stroke-width: 0.7; stroke-linejoin: round; } /* City pins: 10 largest solid, next 15 smaller/lighter. */ .pin-lg { fill: var(--color-horizon-blue); } .pin-sm { fill: rgba(58,128,210,0.62); } /* "Deal shipment" animation (JS-driven, main.js wireCoverageMap): a streak travels pin→pin and is consumed at the destination, which emits a ripple. Lines sit under .pin-layer so they vanish "into" the pin on arrival. */ .ship-line { fill: none; stroke: var(--color-horizon-blue); stroke-width: 2.4; stroke-linecap: round; } .ship-ripple { fill: none; stroke: var(--color-horizon-blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; } @media (max-width: 1023px) { .us-map-wrap { margin-inline: auto; } } /* ---- Cards / feature grid -------------------------------------------- */ .grid { display: grid; gap: var(--space-6); } .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } @media (min-width: 768px) { .grid--2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } .card { background: var(--color-off-white); border: 1px solid var(--color-cool-gray); border-top: 3px solid var(--color-horizon-blue); /* feature card accent */ border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-card); } .card__icon { width: 44px; height: 44px; border-radius: var(--radius-card); display: inline-flex; align-items: center; justify-content: center; background: var(--color-blue-tint); color: var(--color-regio-blue); margin-bottom: var(--space-4); } .card__icon .icon { width: 24px; height: 24px; } /* "What sets us apart" cards: larger glyph, no tinted box — sits on the card's gray surface (2026-06-24 walkthrough) */ .card .card__icon { width: auto; height: auto; background: transparent; border-radius: 0; } .card .card__icon .icon { width: 40px; height: 40px; } .card h3 { margin-bottom: var(--space-3); } .card p { color: var(--color-steel-gray); font-size: 15px; } /* ---- Process steps (left-bordered, Horizon Blue accent) -------------- */ .steps { display: grid; gap: var(--space-5); } @media (min-width: 768px) { .steps--2col { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } .step { position: relative; padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6); border-left: 3px solid var(--color-horizon-blue); background: var(--color-white); border-radius: 0 var(--radius-card) var(--radius-card) 0; } .bg-white .step { background: var(--color-off-white); } .step__n { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-regio-blue); margin-bottom: var(--space-2); } .step h3 { margin-bottom: var(--space-2); } .step p { color: var(--color-steel-gray); font-size: 15px; } /* ---- Icon feature list (How It Works portal section) ----------------- */ .featlist { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .featlist { grid-template-columns: 1fr 1fr; } } .feat { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: start; } .feat__icon { width: 44px; height: 44px; border-radius: var(--radius-card); display: inline-flex; align-items: center; justify-content: center; background: var(--color-blue-tint); color: var(--color-regio-blue); } .feat__icon .icon { width: 22px; height: 22px; } .feat h3 { margin-bottom: 6px; } .feat p { color: var(--color-steel-gray); font-size: 15px; } /* ---- Coverage band --------------------------------------------------- */ .coverage-line { font-family: var(--font-display); color: var(--color-regio-blue); font-size: clamp(20px, 2.4vw, 28px); margin-top: var(--space-5); } /* ---- Service tier table --------------------------------------------- */ .tiers { width: 100%; } .tier-table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-cool-gray); border-radius: var(--radius-card); overflow: hidden; } .tier-table thead th { font-size: 14px; padding: var(--space-4) var(--space-4); text-align: center; background: var(--color-off-white); border-bottom: 1px solid var(--color-cool-gray); } .tier-table thead th:first-child { text-align: left; } .tier-table th.col-premium { background: var(--color-blue-tint); color: var(--color-regio-blue); border-bottom: 2px solid var(--color-horizon-blue); } .tier-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-cool-gray); font-size: 15px; } .tier-table td.mark { text-align: center; font-size: 16px; width: 18%; } .tier-table td.col-premium { background: rgba(58,128,210,0.05); } .tier-table tbody tr:last-child td { border-bottom: 0; } .mark .yes { color: var(--color-regio-blue); } .mark .opt { color: var(--color-steel-gray); } .tier-key { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); color: var(--color-steel-gray); font-size: 14px; } .tier-foot { margin-top: var(--space-3); color: var(--color-steel-gray); font-size: 13px; } /* ---- Video placeholder ----------------------------------------------- */ .video-ph { border: 1px dashed var(--color-cool-gray); border-radius: var(--radius-card); background: var(--color-off-white); aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-6); color: var(--color-steel-gray); } .video-ph__play { width: 64px; height: 64px; border-radius: 50%; background: var(--color-white); border: 1px solid var(--color-cool-gray); display: flex; align-items: center; justify-content: center; color: var(--color-regio-blue); box-shadow: var(--shadow-card); } .video-ph__play .icon { width: 28px; height: 28px; } /* ---- Photo blocks ---------------------------------------------------- */ .photo { border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface-dark); } .photo img { width: 100%; height: 100%; object-fit: cover; } .photo--ratio { aspect-ratio: 4 / 3; } .photo-overlay { position: relative; } .photo-overlay::after { content: ""; position: absolute; inset: 0; background: var(--photo-overlay); } /* ---- Feature card: text + photo split (mockups 01/02/03, 2026-07-06) -- DOM order sets the arrangement: .fc-text first = text left / photo right (the treatment used on HIW Getting Started, About Trust, Home Built-for-your-team); put .fc-photo first for the mirrored layout. */ .feature-card { display: grid; overflow: hidden; background: var(--color-white); border-radius: var(--radius-modal); box-shadow: var(--shadow-card); } .bg-white .feature-card { background: var(--color-off-white); } @media (min-width: 1024px) { .feature-card { grid-template-columns: 1fr 1fr; align-items: stretch; } } .fc-text { padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; } .fc-text p { margin-top: var(--space-5); color: var(--color-steel-gray); } .fc-text .hero__actions { margin-top: var(--space-5); } .fc-photo { position: relative; min-height: 340px; } .fc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---- Step-by-step flow: photo-anchored steps (mockup 02) -------------- Photo column left, step list right; each step is an open .step-line row (divider rules, no card chrome) with a .step-badge chip ("Step N" + icon together, icon above label) beside the copy. */ .step-flow { display: grid; gap: var(--space-10); align-items: center; } @media (min-width: 1024px) { .step-flow { grid-template-columns: 1fr 1fr; } } .step-flow__photo { position: relative; min-height: 480px; border-radius: var(--radius-modal); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-surface-dark); } .step-flow__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .step-line { display: flex; gap: var(--space-5); align-items: flex-start; padding-block: var(--space-5); border-bottom: 1px solid var(--color-cool-gray); } .step-line:last-child { border-bottom: none; } .step-line h3 { margin-bottom: 6px; } .step-line p { color: var(--color-steel-gray); font-size: 15px; } .step-badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 84px; flex: none; padding: 14px 16px; background: var(--color-blue-tint); border-radius: var(--radius-card); } .step-badge .icon { width: 22px; height: 22px; color: var(--color-regio-blue); } .step-badge span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-regio-blue); white-space: nowrap; } /* ---- Our Approach trio cards (mockup 03) ------------------------------ White cards (they sit on off-white) with the tinted 44px icon box — scoped here because the base `.card .card__icon` rule strips the box for the "What sets us apart" treatment. */ .trio { display: grid; gap: var(--space-6); } @media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); } } .trio .card { background: var(--color-white); } .trio .card .card__icon { width: 44px; height: 44px; background: var(--color-blue-tint); border-radius: var(--radius-card); } .trio .card .card__icon .icon { width: 22px; height: 22px; } .trio .card h3 { margin: var(--space-4) 0 var(--space-3); } /* ---- Signup step tiles + chevron connectors (mockup 04) --------------- */ .step-row { display: grid; gap: var(--space-5); align-items: stretch; } @media (min-width: 900px) { .step-row { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; } } .step-tile { padding: var(--space-5); background: var(--color-off-white); border: 1px solid var(--color-cool-gray); border-top: 3px solid var(--color-horizon-blue); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .step-tile h3 { margin-bottom: var(--space-2); } .step-tile p { color: var(--color-steel-gray); font-size: 15px; } .chevron { display: none; align-items: center; justify-content: center; color: var(--color-cool-gray); padding-inline: var(--space-3); } @media (min-width: 900px) { .chevron { display: flex; } } .chevron .icon { width: 28px; height: 28px; } /* "Once you're active" callout: full-width, single left-aligned text stack — must NOT split into columns at any breakpoint (redesign handoff 2026-07-06) */ .active-tile { display: block; margin-top: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--color-blue-tint); border-left: 4px solid var(--color-horizon-blue); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-align: left; } .active-tile h3 { margin-bottom: var(--space-2); } .active-tile p { color: var(--color-steel-gray); font-size: 15px; max-width: 60ch; } /* ---- Hero portal-UI mock (product-UI-first per 08) ------------------- */ .mock { background: var(--color-surface-dark); border: 1px solid var(--color-slate); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-modal); color: #C7D2E0; } .mock__bar { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-slate); margin-bottom: var(--space-5); } .mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-slate); } .mock__title { font-size: 13px; color: #8FA1BC; margin-left: auto; } .mock__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: #243040; border-radius: 6px; margin-bottom: var(--space-3); } .mock__row b { color: #E6ECF5; font-weight: 600; font-size: 14px; } .mock__row span { font-size: 12px; color: #8FA1BC; } .mock__badge { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border-radius: var(--radius-badge); } .mock__badge--blue { background: rgba(58,128,210,0.18); color: #93C5FD; } .mock__badge--ok { background: rgba(58,128,210,0.10); color: #9FC2EA; } .mock__gauge { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); } .mock__gauge svg { width: 88px; height: 88px; flex: none; } .mock__gauge .label { font-size: 13px; color: #8FA1BC; } .mock__gauge .pct { font-family: var(--font-display); font-size: 26px; color: #fff; } /* ---- Footer (05) ----------------------------------------------------- */ .site-footer { background: var(--color-deep-navy); color: #C7D2E0; padding-block: var(--space-10); } .footer-top { display: grid; gap: var(--space-8); } /* align-items:end drops the menu down to sit on the tagline's line (2026-06-24 review) */ /* side-by-side only from 1024px (was 768px): with "Dealer Login" added, the link row no longer fits beside the lockup on tablet, and it stacks cleanly there instead (2026-08-11) */ @media (min-width: 1024px) { /* nav column sized to its content so the link row stays on one line (was 1.4fr 1fr; column 1 is only the lockup + a 40ch-capped tagline, so it loses nothing) */ .footer-top { grid-template-columns: 1fr auto; align-items: end; } .footer-nav { justify-content: flex-end; } } .footer-tag { color: #8FA1BC; margin-top: var(--space-4); max-width: 40ch; font-size: 15px; } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); } .footer-nav a { color: #8FA1BC; font-size: 15px; transition: color var(--dur-hover) var(--ease-in-out); } .footer-nav a:hover { color: #fff; } /* pipe stays glued to "Dealer Login" so it never wraps onto a line by itself (2026-08-11) */ .footer-nav__login { display: inline-flex; align-items: center; gap: var(--space-5); } .footer-nav__sep { color: #8FA1BC; font-size: 15px; } /* asymmetric: air above the rule, copyright pulled up closer below it (2026-06-24 review) */ .footer-rule { border: 0; border-top: 1px solid var(--color-slate); margin-block: var(--space-5) var(--space-3); } .footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; justify-content: space-between; color: #64748B; font-size: 13px; } .footer-bottom .fine a { color: #8FA1BC; } .footer-bottom .fine a:hover { color: #fff; } /* ---- Signup modal ---------------------------------------------------- */ .modal-root { position: fixed; inset: 0; z-index: 1000; display: none; } .modal-root.is-open { display: block; } .modal-backdrop { position: absolute; inset: 0; background: rgba(10, 37, 64, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--dur-ui) var(--ease-in-out); } .modal-root.is-open .modal-backdrop { opacity: 1; } .modal-shell { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-5); overflow-y: auto; } .modal { position: relative; width: 100%; max-width: 560px; margin: auto; background: var(--color-white); color: var(--color-deep-navy); border-radius: var(--radius-modal); padding: var(--space-6); box-shadow: var(--shadow-modal); transform: scale(0.96); opacity: 0; transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out); } .modal-root.is-open .modal { transform: scale(1); opacity: 1; } .modal__close { position: absolute; top: var(--space-4); right: var(--space-4); background: none; border: 0; padding: 6px; cursor: pointer; color: var(--color-steel-gray); border-radius: var(--radius-badge); } .modal__close:hover { color: var(--color-deep-navy); } .modal__close .icon { width: 22px; height: 22px; } .modal__eyebrow { color: var(--color-regio-blue); } .modal h2 { margin-bottom: var(--space-2); } .modal__lead { color: var(--color-steel-gray); font-size: 15px; margin-bottom: var(--space-5); } /* progress dots */ .modal__dots { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); } .modal__dots i { width: 26px; height: 5px; border-radius: 99px; background: var(--color-cool-gray); transition: background var(--dur-ui) var(--ease-in-out); } .modal__dots i.is-active { background: var(--color-horizon-blue); } .modal__dots i.is-done { background: var(--color-regio-blue); } /* form */ .screen { display: none; } .screen.is-active { display: block; } .field { margin-bottom: var(--space-4); } .field > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .field .opt { color: var(--color-steel-gray); font-weight: 400; } .req { color: var(--color-regio-red); } .field input, .field select { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--color-deep-navy); padding: 12px 16px; border: 1px solid var(--color-cool-gray); border-radius: var(--radius-input); background: var(--color-white); transition: border-color var(--dur-ui) var(--ease-in-out); } .field input:hover, .field select:hover { border-color: #cbd5e1; } .field input:focus, .field select:focus { border-color: var(--color-horizon-blue); outline: none; } .field input.is-bad, .field select.is-bad { border-color: var(--color-regio-red); } .field .hint { font-size: 12px; color: var(--color-steel-gray); margin-top: 5px; } .field textarea { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--color-deep-navy); padding: 12px 16px; border: 1px solid var(--color-cool-gray); border-radius: var(--radius-input); background: var(--color-white); transition: border-color var(--dur-ui) var(--ease-in-out); resize: vertical; min-height: 96px; } .field textarea:hover { border-color: #cbd5e1; } .field textarea:focus { border-color: var(--color-horizon-blue); outline: none; } .field textarea.is-bad { border-color: var(--color-regio-red); } .field-row { display: grid; gap: var(--space-4); } @media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } } /* Radio/checkbox rows inside a .field — the group's own