/* ============================================================================ Electrician Scout - shared stylesheet One source of truth for theme tokens (light + dark), shared chrome (header, mobile drawer, footer), and all page components. Every page links this file so the look never drifts. Theme is switched via the data-theme attribute on ; see assets/app.js. ========================================================================== */ /* ─── Light theme tokens (default) ─────────────────────────────────────── */ :root { color-scheme: light; --background: #ffffff; --foreground: #171717; --surface: #f5f7fa; --surface-2: #eef3f9; --card: #ffffff; --card-head: #f5f7fa; --ink: #112233; --ink-soft: #344a5e; --muted: #54636f; --muted-soft: #5f6d7b; --border: #e2e8f0; --border-strong: #cdd8e3; --navy: #14457a; --navy-dark: #0d2f52; --accent: #14457a; --accent-2: #1d6fb8; --sky: #9cc4ea; --sky-soft: #c9ddf2; --on-navy: #ffffff; --on-navy-soft: #c3d3e4; --ok: #157a4f; --ok-bg: #e7f5ee; --ok-border: #bfe3d0; --warn: #b45309; --warn-bg: #fef3e2; --warn-border: #f6d9b0; /* restrained gold electrical accent */ --volt: #f2b705; --volt-soft: #fbe6a3; --volt-ink: #3a2c00; /* themeable shadows + translucent header */ --shadow-sm: 0 2px 8px rgba(17, 34, 51, 0.04); --shadow-md: 0 12px 28px rgba(17, 34, 51, 0.10); --shadow-lg: 0 22px 50px rgba(17, 34, 51, 0.10); --header-bg: rgba(255, 255, 255, 0.88); --maxw: 1120px; } /* ─── Dark theme tokens ───────────────────────────────────────────────── Deliberate dark palette: dark surfaces, legible text, calmer borders. Navy fills are slightly deepened so they sit on the dark page without glowing; brand-as-text lightens to a readable sky tone. */ html[data-theme="dark"] { color-scheme: dark; --background: #0d1520; --foreground: #e8eef5; --surface: #141d29; --surface-2: #18222f; --card: #182230; --card-head: #1e2937; --ink: #e8eef5; --ink-soft: #c2cedb; --muted: #9aabbb; --muted-soft: #8896a8; --border: #283643; --border-strong: #37485a; --navy: #1b4f86; --navy-dark: #11355c; --accent: #6fa8de; --accent-2: #6fb0ec; --sky: #9cc4ea; --sky-soft: #c9ddf2; --on-navy: #f3f8ff; --on-navy-soft: #b9cadf; --ok: #58d39a; --ok-bg: #122c20; --ok-border: #20543c; --warn: #f0b24a; --warn-bg: #322411; --warn-border: #5a4421; --volt: #f2b705; --volt-soft: #5a4a1a; --volt-ink: #1a1300; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.5); --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.55); --header-bg: rgba(13, 21, 32, 0.85); } /* ─── Base ──────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; } a { color: var(--accent-2); text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; } a, button { transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease, filter .15s ease, opacity .15s ease; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .serif { font-family: "IBM Plex Serif", Georgia, serif; } .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; } .skip-link { position: absolute; left: 8px; top: -48px; z-index: 200; background: var(--navy); color: var(--on-navy); padding: 9px 16px; border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 600; transition: top .15s ease; } .skip-link:focus { top: 0; } /* ─── Shared header / nav ───────────────────────────────────────────────── */ header.site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 66px; } .brand { display: flex; align-items: center; gap: 11px; font-weight: 700; color: var(--ink); font-size: 18px; letter-spacing: -0.01em; } .brand .mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(150deg, var(--navy), var(--navy-dark)); display: grid; place-items: center; flex: none; box-shadow: 0 2px 6px rgba(13, 47, 82, .28); } .brand .mark svg { width: 19px; height: 19px; } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-link-row { display: flex; align-items: center; gap: 26px; } .nav-link-row a { color: var(--ink-soft); font-weight: 500; font-size: 15px; } .nav-link-row a:hover { color: var(--navy); } .nav-link-row a[aria-current="page"] { color: var(--navy); font-weight: 600; } html[data-theme="dark"] .nav-link-row a:hover, html[data-theme="dark"] .nav-link-row a[aria-current="page"] { color: var(--accent-2); } /* theme toggle button (icon) */ .theme-toggle { width: 38px; height: 38px; border-radius: 9px; flex: none; display: grid; place-items: center; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink-soft); } .theme-toggle:hover { color: var(--navy); border-color: var(--accent-2); } .theme-toggle svg { width: 19px; height: 19px; } .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: none; } /* hamburger (mobile only) */ .hamburger { display: none; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--navy); font-family: inherit; font-weight: 600; font-size: 14px; padding: 8px 13px; border-radius: 9px; cursor: pointer; } html[data-theme="dark"] .hamburger { color: var(--accent-2); } .hamburger .bars { display: inline-grid; gap: 3.5px; width: 16px; } .hamburger .bars span { height: 2px; background: currentColor; border-radius: 2px; } /* ─── Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 15px; border-radius: 10px; padding: 11px 20px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--navy); color: var(--on-navy); box-shadow: 0 2px 5px rgba(20, 69, 122, .22); } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20, 69, 122, .28); } .btn-primary:active { transform: translateY(0); filter: brightness(.97); } .btn-ghost { background: transparent; color: var(--navy); border-color: var(--border-strong); } html[data-theme="dark"] .btn-ghost { color: var(--accent-2); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--accent-2); } .btn-lg { padding: 14px 26px; font-size: 16px; } .btn-volt { background: var(--volt); color: var(--volt-ink); box-shadow: 0 4px 14px rgba(242, 183, 5, .3); } .btn-volt:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(242, 183, 5, .4); } /* ─── Mobile slide-in drawer ────────────────────────────────────────────── */ .drawer-overlay { position: fixed; inset: 0; z-index: 120; pointer-events: none; } .drawer-overlay.open { pointer-events: auto; } .drawer-backdrop { position: absolute; inset: 0; background: rgba(8, 22, 38, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity 260ms ease; } .drawer-overlay.open .drawer-backdrop { opacity: 1; } .drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 88vw); background: linear-gradient(180deg, #14457a 0%, #0d2f52 100%); color: #eaf2fb; box-shadow: -24px 0 60px rgba(8, 22, 38, 0.45); transform: translateX(105%); transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; overflow-y: auto; } .drawer-overlay.open .drawer { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); position: sticky; top: 0; background: #14457a; } .drawer-head .brand-text { color: #fff; font-weight: 700; font-size: 18px; } .drawer-head .brand-text .sub { color: var(--volt); } .drawer-close { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; width: 34px; height: 34px; border-radius: 8px; font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .drawer nav { padding: 16px 14px 4px; flex: 1; } .drawer nav .grp-label { font-family: "IBM Plex Serif", Georgia, serif; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #7fa9d6; padding: 8px 10px 6px; } .drawer nav a { display: block; text-decoration: none; color: #d6e4f4; border-left: 3px solid transparent; border-radius: 8px; padding: 10px 11px; margin-bottom: 2px; } .drawer nav a:hover { background: rgba(255, 255, 255, 0.07); } .drawer nav a[aria-current="page"] { color: #fff; background: rgba(156, 196, 234, 0.16); border-left-color: var(--volt); } .drawer nav a .lk-label { display: block; font-size: 14.5px; font-weight: 600; } .drawer nav a .lk-desc { display: block; font-size: 12px; color: #8fb2d8; margin-top: 1px; } .drawer-foot { padding: 14px 22px 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .drawer-foot .btn-volt { display: flex; width: 100%; } .drawer-foot .toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 14px; color: #d6e4f4; } .drawer-foot .toggle-row button { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; padding: 7px 13px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; } .drawer-foot .toggle-row button svg { width: 16px; height: 16px; } /* ─── Hero ──────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 78% -8%, rgba(28, 111, 184, .10), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--background) 92%, var(--surface-2)) 0%, var(--background) 70%); border-bottom: 1px solid var(--border); } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 84px 0 78px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; margin-bottom: 22px; } .eyebrow .spark { width: 13px; height: 13px; color: var(--volt); } h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 22px; font-weight: 700; } h1 .hl { color: var(--accent-2); } .lede { font-size: 18.5px; color: var(--muted); max-width: 560px; margin: 0 0 18px; } .sub { font-size: 16px; color: var(--ink-soft); max-width: 540px; margin: 0 0 30px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .reassure { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; } .reassure span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 500; } .reassure svg { width: 16px; height: 16px; color: var(--ok); flex: none; } /* ─── Opportunity / sample card ─────────────────────────────────────────── */ .sample-shell { position: relative; } .sample-shell::before { content: ""; position: absolute; inset: -18px -18px auto auto; width: 150px; height: 150px; background: radial-gradient(circle, rgba(242, 183, 5, .18), transparent 70%); border-radius: 50%; z-index: 0; } .card { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; } .card-head { background: var(--card-head); border-bottom: 1px solid var(--border); padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; } .card-head .label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-soft); } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); } .badge.ex { background: var(--surface-2); color: var(--accent-2); border-color: var(--border); } .badge.ex .dot { background: var(--accent-2); } .card-body { padding: 20px 18px 18px; } .opp-type { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 6px; } .opp-title { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.01em; } .opp-addr { font-size: 14px; color: var(--muted); margin: 0 0 16px; display: flex; align-items: center; gap: 7px; } .opp-addr svg { width: 15px; height: 15px; color: var(--muted-soft); flex: none; } .opp-rows { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .opp-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 14px; font-size: 14px; } .opp-row + .opp-row { border-top: 1px solid var(--border); } .opp-row:nth-child(odd) { background: var(--surface); } .opp-row .k { color: var(--muted); font-weight: 500; } .opp-row .v { color: var(--ink-soft); font-weight: 600; text-align: right; } .opp-row .v.val { color: var(--ok); font-family: "IBM Plex Mono", monospace; } .opp-foot { margin-top: 16px; padding-top: 15px; border-top: 1px dashed var(--border-strong); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .src-link { font-size: 13.5px; font-weight: 600; color: var(--accent-2); display: inline-flex; align-items: center; gap: 7px; } .src-link svg { width: 15px; height: 15px; } .src-link:hover { text-decoration: underline; } .src-tag { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--muted-soft); background: var(--surface-2); border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px; } /* ─── Section scaffolding ───────────────────────────────────────────────── */ section { padding: 86px 0; } section[id], main[id] { scroll-margin-top: 84px; } .section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .sec-head { max-width: 660px; margin: 0 auto 52px; text-align: center; } .sec-head.left { margin-left: 0; text-align: left; } .kicker { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; } h2 { font-size: clamp(27px, 3.2vw, 37px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; font-weight: 700; } h3 { color: var(--ink); } .sec-head p { font-size: 17px; color: var(--muted); margin: 0; } .page-intro { background: var(--navy); color: #fff; padding: 56px 0 50px; border-bottom: 1px solid var(--border); } .page-intro .kicker { color: var(--sky); } .page-intro h1 { color: #fff; font-family: "IBM Plex Serif", Georgia, serif; max-width: 760px; } .page-intro p { font-size: 17px; color: var(--sky-soft); margin: 0; max-width: 640px; line-height: 1.6; } /* steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .steps.cols-3 { grid-template-columns: repeat(3, 1fr); } .step { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 26px 22px 24px; } .step .num { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: var(--navy); background: var(--surface-2); border: 1px solid var(--border-strong); font-family: "IBM Plex Mono", monospace; margin-bottom: 16px; } html[data-theme="dark"] .step .num { color: var(--accent-2); } .step h3 { font-size: 17px; margin: 0 0 8px; font-weight: 600; letter-spacing: -0.01em; } .step p { font-size: 14.5px; color: var(--muted); margin: 0; } .step::after { content: ""; position: absolute; top: 43px; right: -13px; width: 22px; height: 2px; background: var(--border-strong); } .steps:not(.cols-3) .step:nth-child(4n)::after, .steps .step:last-child::after { display: none; } /* benefits */ .benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .benefit { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px 26px; display: flex; gap: 18px; align-items: flex-start; } .benefit .ico { width: 44px; height: 44px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg, var(--navy), var(--navy-dark)); color: #fff; box-shadow: 0 4px 10px rgba(13, 47, 82, .22); } .benefit .ico svg { width: 22px; height: 22px; } .benefit h3 { font-size: 18px; margin: 0 0 7px; font-weight: 600; letter-spacing: -0.01em; } .benefit p { font-size: 15px; color: var(--muted); margin: 0; } /* prose blocks for articles / longform */ .prose { max-width: 720px; margin: 0 auto; } .prose h2 { font-size: clamp(22px, 3vw, 28px); margin: 38px 0 14px; } .prose h3 { font-size: 19px; margin: 28px 0 10px; font-weight: 600; } .prose p { font-size: 16.5px; color: var(--ink-soft); margin: 0 0 16px; } .prose ul { margin: 0 0 18px; padding-left: 22px; } .prose li { font-size: 16.5px; color: var(--ink-soft); margin-bottom: 9px; } .prose strong { color: var(--ink); } .prose .lead { font-size: 18.5px; color: var(--muted); margin-bottom: 24px; } /* article index cards */ .article-list { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; } .article-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; text-decoration: none; } .article-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } .article-card h2 { font-size: 21px; margin: 0 0 7px; } .article-card p { font-size: 15px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; } .article-card .meta { font-size: 12.5px; color: var(--muted); } .article-card .meta .read { color: var(--accent-2); font-weight: 600; } /* sample feed grid */ .feed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .feed-grid .card { box-shadow: var(--shadow-sm); } .feed-grid .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .feed-note { max-width: 760px; margin: 0 auto 34px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 22px; font-size: 14.5px; color: var(--ink-soft); } .feed-note b { color: var(--navy); } html[data-theme="dark"] .feed-note b { color: var(--accent-2); } /* pricing */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .plan { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 30px 28px 32px; display: flex; flex-direction: column; } .plan.featured { border-color: var(--navy); box-shadow: 0 20px 44px rgba(20, 69, 122, .16); transform: translateY(-6px); } .plan .tag-pop { position: absolute; top: -13px; left: 28px; background: var(--volt); color: var(--volt-ink); font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 5px 13px; border-radius: 999px; box-shadow: 0 3px 8px rgba(242, 183, 5, .35); } .plan .pname { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .plan .price { margin: 12px 0 4px; } .plan .price .amt { font-size: 42px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } .plan .price .per { font-size: 16px; color: var(--muted-soft); font-weight: 500; } .plan .who { font-size: 14px; color: var(--muted); min-height: 60px; margin: 6px 0 18px; } .plan .who b { color: var(--ink-soft); font-weight: 600; } .plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; flex: 1; } .plan li { font-size: 14.5px; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; } .plan li svg { width: 16px; height: 16px; color: var(--ok); flex: none; margin-top: 3px; } .plan .btn { width: 100%; } .price-note { text-align: center; margin-top: 30px; font-size: 14.5px; color: var(--muted); } .nonex-banner { max-width: 760px; margin: 0 auto 40px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 22px; font-size: 14.5px; color: var(--ink-soft); } .nonex-banner b { color: var(--navy); } html[data-theme="dark"] .nonex-banner b { color: var(--accent-2); } /* comparison table */ .compare-wrap { max-width: 760px; margin: 44px auto 0; overflow-x: auto; } table.compare { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } table.compare th, table.compare td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); } table.compare thead th { background: var(--card-head); color: var(--ink); font-weight: 700; } table.compare tbody th { color: var(--ink-soft); font-weight: 500; } table.compare td { color: var(--ink-soft); text-align: center; } table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: none; } table.compare td.yes { color: var(--ok); font-weight: 700; } table.compare td.no { color: var(--muted-soft); } table.compare .featured-col { background: var(--surface-2); } /* FAQ */ .faq { max-width: 760px; margin: 0 auto; } details { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 4px 22px; margin-bottom: 14px; } details[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } summary { list-style: none; cursor: pointer; padding: 18px 0; font-size: 16.5px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 18px; } summary::-webkit-details-marker { display: none; } summary .chev { width: 20px; height: 20px; flex: none; color: var(--accent-2); transition: transform .2s ease; } details[open] summary .chev { transform: rotate(180deg); } details p { margin: 0 0 20px; font-size: 15.5px; color: var(--muted); } /* closing CTA */ .closing { background: linear-gradient(160deg, var(--navy-dark), var(--navy)); color: var(--on-navy); position: relative; overflow: hidden; } .closing::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 380px at 85% 10%, rgba(242, 183, 5, .14), transparent 60%); } .closing .wrap { position: relative; z-index: 1; text-align: center; } .closing h2 { color: #fff; margin-bottom: 16px; } .closing p { color: var(--on-navy-soft); font-size: 18px; max-width: 620px; margin: 0 auto 30px; } /* ─── Footer ────────────────────────────────────────────────────────────── */ footer.site-footer { background: var(--navy-dark); color: var(--on-navy-soft); padding: 44px 0 38px; } .foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; } .foot-brand { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 700; font-size: 17px; } .foot-brand .mark { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; } .foot-brand .mark svg { width: 17px; height: 17px; } .foot-tag { font-size: 14px; color: var(--on-navy-soft); max-width: 320px; margin: 12px 0 0; } .foot-cols { display: flex; gap: 48px; flex-wrap: wrap; } .foot-col h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); margin: 0 0 12px; font-weight: 600; } .foot-col a { display: block; color: var(--on-navy-soft); font-size: 14px; font-weight: 500; margin-bottom: 9px; } .foot-col a:hover { color: #fff; } .foot-bottom { margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--on-navy-soft); } .foot-bottom a { color: var(--sky); } .foot-bottom .sister { color: var(--sky); } /* ─── Interactive browser-window demo (sample page) ───────────────────────── A macOS-style window framing the sample feed, with a segmented control that switches between List / Cards / Table / Map views entirely client-side. The Map view hosts a real Leaflet map. All chrome is themed via the tokens above so it reads correctly in light and dark; Leaflet's own tiles stay as-is. */ .demo-window { max-width: 880px; margin: 0 auto 38px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); } /* title bar with traffic lights + address pill */ .dw-bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: linear-gradient(var(--card-head), var(--surface-2)); border-bottom: 1px solid var(--border); } .dw-dots { display: inline-flex; gap: 8px; flex: none; } .dw-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .dw-dot.red { background: #ff5f57; } .dw-dot.amber { background: #febc2e; } .dw-dot.green { background: #28c840; } html[data-theme="dark"] .dw-dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); } .dw-address { flex: 1; max-width: 380px; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 5px 14px; font-size: 13px; color: var(--muted); font-weight: 500; } .dw-lock { width: 13px; height: 13px; color: var(--ok); flex: none; } /* app viewport */ .dw-app { background: var(--surface); padding: 16px; } .dw-app-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .dw-app-title strong { display: block; font-size: 17px; font-weight: 700; color: var(--ink); } .dw-app-title span { font-size: 12.5px; color: var(--muted); } /* segmented view control */ .dw-views { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 10px; padding: 4px; } .dw-view-btn { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: none; border-radius: 7px; padding: 7px 12px; cursor: pointer; } .dw-view-btn svg { width: 15px; height: 15px; flex: none; } .dw-view-btn:hover { color: var(--ink); background: var(--surface-2); } .dw-view-btn.is-active { color: var(--on-navy); background: var(--navy); box-shadow: 0 1px 3px rgba(20, 69, 122, .3); } .dw-view-btn.is-active:hover { color: var(--on-navy); background: var(--navy); } .dw-panel { outline: none; } .dw-panel:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 10px; } /* count strip under the header */ .dw-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .dw-chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 11px; border: 1px solid var(--border); color: var(--muted); background: var(--card); } .dw-chip.ex { color: var(--accent-2); background: var(--surface-2); } /* List view */ .dw-list { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .dw-list-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-left: 3px solid var(--volt); } .dw-list-row + .dw-list-row { border-top: 1px solid var(--surface-2); } .dw-list-type { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; white-space: nowrap; flex: none; } .dw-list-main { flex: 1; min-width: 0; } .dw-list-main .t { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dw-list-main .m { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dw-list-val { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; color: var(--ok); white-space: nowrap; flex: none; } /* Cards view */ .dw-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .dw-card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--volt); border-radius: 12px; padding: 14px 16px; } .dw-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; flex-wrap: wrap; } .dw-card .t { font-weight: 700; font-size: 15px; color: var(--ink); margin: 0; line-height: 1.3; } .dw-card .addr { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; } .dw-card .scope { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.45; } .dw-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--border-strong); } .dw-card-val { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; font-weight: 600; color: var(--ok); } .dw-card-src { font-size: 12.5px; font-weight: 600; color: var(--accent-2); } /* Table view */ .dw-table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; } table.dw-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; } table.dw-table th, table.dw-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } table.dw-table thead th { background: var(--card-head); color: var(--ink); font-weight: 700; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; } table.dw-table tbody tr:last-child td { border-bottom: none; } table.dw-table tbody tr:hover { background: var(--surface); } table.dw-table td.col-type { font-weight: 600; color: var(--accent-2); } table.dw-table td.col-title { color: var(--ink); white-space: normal; min-width: 180px; } table.dw-table td.col-val { font-family: "IBM Plex Mono", monospace; color: var(--ok); font-weight: 600; } /* type accent colors shared by list/card bars + map markers */ .t-buildout { --t-color: #1d6fb8; } .t-service { --t-color: #157a4f; } .t-newcon { --t-color: #8a4fbf; } .t-panel { --t-color: #c2410c; } .t-ev { --t-color: #0f766e; } .t-bid { --t-color: #b45309; } .t-transfer { --t-color: #be185d; } /* Dark mode: the light-mode accents above are too dark to read as text or map markers on the dark surface. Lighter shades that clear WCAG AA (>=4.5) on the dark card/popup, and read as bright, distinct map pins. */ html[data-theme="dark"] .t-buildout { --t-color: #6db3ef; } html[data-theme="dark"] .t-service { --t-color: #4cc28d; } html[data-theme="dark"] .t-newcon { --t-color: #b98ee6; } html[data-theme="dark"] .t-panel { --t-color: #f08a52; } html[data-theme="dark"] .t-ev { --t-color: #2dd4bf; } html[data-theme="dark"] .t-bid { --t-color: #f0ad4e; } html[data-theme="dark"] .t-transfer { --t-color: #f06fa0; } .dw-list-row[class*="t-"], .dw-card[class*="t-"] { border-left-color: var(--t-color); } .dw-list-row[class*="t-"] .dw-list-type, .dw-card[class*="t-"] .dw-card-src { color: var(--t-color); } /* Map view */ .dw-map { height: 460px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); } .dw-map .leaflet-container { height: 100%; width: 100%; font-family: inherit; background: var(--surface-2); } .dw-map-note { font-size: 12px; color: var(--muted); margin: 10px 2px 0; text-align: center; } /* themed Leaflet popup */ .leaflet-popup-content-wrapper { background: var(--card); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-md); } .leaflet-popup-tip { background: var(--card); border: 1px solid var(--border-strong); } .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.5; } .leaflet-popup-content .pop-type { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t-color, var(--accent-2)); } .leaflet-popup-content .pop-title { font-weight: 700; font-size: 14px; color: var(--ink); margin: 2px 0 6px; } .leaflet-popup-content .pop-row { color: var(--muted); } .leaflet-popup-content .pop-row b { color: var(--ink-soft); font-weight: 600; } .leaflet-popup-content .pop-val { font-family: "IBM Plex Mono", monospace; color: var(--ok); font-weight: 600; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: var(--shadow-md); } .leaflet-container a.leaflet-popup-close-button { color: var(--muted); } .dw-marker { display: grid; place-items: center; } /* SVG map pin (replaces the CSS-transform teardrop, which rendered unreliably). */ .dw-pin { background: none; border: 0; } .dw-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); } .dw-marker span { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--t-color, var(--navy)); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35); } html[data-theme="dark"] .dw-marker span { border-color: #0d1520; } /* dim OSM tiles slightly in dark mode so they don't glare */ html[data-theme="dark"] .dw-map .leaflet-tile-pane { filter: brightness(.82) contrast(1.05); } /* ─── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 56px 0 60px; } .sample-shell { max-width: 460px; } .steps, .steps.cols-3 { grid-template-columns: repeat(2, 1fr); } .step::after { display: none; } .price-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } .plan.featured { transform: none; } .feed-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .nav-link-row { display: none; } .hamburger { display: inline-flex; } .dw-cards { grid-template-columns: 1fr; } /* The inline CTA lives in the drawer footer on mobile, so drop it from the header bar to keep brand + theme + menu on one row without overflow. */ .nav-links > .btn { display: none; } .nav-links { gap: 14px; } } @media (max-width: 600px) { section { padding: 60px 0; } .benefits { grid-template-columns: 1fr; } .steps, .steps.cols-3 { grid-template-columns: 1fr; } .reassure { gap: 14px; } .reassure span { font-size: 13.5px; } .wrap { padding: 0 18px; } .hero-cta .btn-lg, .closing .btn-lg { white-space: normal; text-align: center; } .hero-cta .btn { width: 100%; } .opp-foot { flex-wrap: wrap; } .page-intro { padding: 44px 0 40px; } .dw-app { padding: 12px; } .dw-app-head { gap: 10px; } .dw-views { width: 100%; justify-content: space-between; } .dw-view-btn { flex: 1; justify-content: center; padding: 8px 6px; } .dw-map { height: 360px; } .dw-address { font-size: 12px; } } @media (max-width: 360px) { .wrap { padding: 0 14px; } h1 { font-size: 30px; } .plan { padding: 28px 22px 30px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }