/* ========================================================================== Panda Heating and Cooling — design system Palette is pulled straight from the logo: black bear, red + blue compass. ========================================================================== */ :root { --ink: #0a0e14; --ink-2: #141a23; --ink-3: #1e2732; --slate: #4c5866; --slate-2: #6b7787; --line: #e2e8f0; --mist: #f4f7fa; --mist-2: #eaeff5; --paper: #ffffff; --red: #d21f3c; --red-600: #b3162f; --red-700: #8d1024; --red-soft: #fdeef1; --blue: #1d3fa6; --blue-600: #17338a; --blue-700: #102568; --blue-soft: #eef2fc; --amber: #f5a623; --shadow-s: 0 1px 2px rgba(10,14,20,.06), 0 2px 6px rgba(10,14,20,.05); --shadow-m: 0 2px 4px rgba(10,14,20,.05), 0 12px 28px -8px rgba(10,14,20,.14); --shadow-l: 0 4px 8px rgba(10,14,20,.06), 0 30px 60px -20px rgba(10,14,20,.28); --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-full: 999px; --wrap: 1200px; --wrap-narrow: 760px; --gut: clamp(1.1rem, 4vw, 2.5rem); --font-display: "Outfit", "Century Gothic", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --header-h: 72px; } /* --------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); background: var(--paper); -webkit-font-smoothing: antialiased; } /* Stops the off-screen skip link and the parked mobile nav drawer from making a horizontal scrollbar. This MUST sit on , not : with it on body and html left visible, body can become its own scroll container and the page then intermittently refuses to scroll vertically. Reported twice. */ html { overflow-x: hidden; } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--red); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; letter-spacing: -0.022em; margin: 0 0 .6em; font-weight: 600; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 5.4vw, 3.65rem); font-weight: 700; } h2 { font-size: clamp(1.7rem, 3.6vw, 2.55rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.42rem); } h4 { font-size: 1.06rem; } p { margin: 0 0 1.15em; text-wrap: pretty; } ul, ol { margin: 0 0 1.2em; padding-left: 1.15em; } li { margin-bottom: .45em; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-s) 0; } .skip:focus { left: 0; color: #fff; } /* ------------------------------------------------------------- layout --- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .wrap-narrow { max-width: var(--wrap-narrow); } .sec { padding-block: clamp(3.2rem, 7vw, 6rem); } .sec-tight { padding-block: clamp(2.4rem, 5vw, 4rem); } .sec-mist { background: var(--mist); } .sec-ink { background: var(--ink); color: #c9d2de; } .sec-ink h2, .sec-ink h3 { color: #fff; } .center { text-align: center; } .grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); } .g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .g4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .stack > * + * { margin-top: 1rem; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: .9rem; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); border-radius: 2px; } .sec-ink .eyebrow { color: #ff7d8f; } .sec-ink .eyebrow::before { background: #ff7d8f; } .lede { font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--slate); } .sec-ink .lede { color: #a9b4c2; } .sec-head { max-width: 62ch; margin-bottom: clamp(1.8rem, 4vw, 3rem); } .sec-head.center { margin-inline: auto; } /* ------------------------------------------------------------ buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; padding: .92rem 1.6rem; border-radius: var(--r-full); border: 2px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; } .btn svg { width: 17px; height: 17px; flex: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-red { background: var(--red); color: #fff; box-shadow: 0 8px 20px -8px rgba(210,31,60,.65); } .btn-red:hover { background: var(--red-600); color: #fff; box-shadow: 0 14px 28px -10px rgba(210,31,60,.7); } .btn-blue { background: var(--blue); color: #fff; box-shadow: 0 8px 20px -8px rgba(29,63,166,.6); } .btn-blue:hover { background: var(--blue-600); color: #fff; } .btn-ink { background: var(--ink); color: #fff; } .btn-ink:hover { background: var(--ink-3); color: #fff; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .btn-glass { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(10px); } .btn-glass:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn-lg { padding: 1.05rem 2rem; font-size: 1.06rem; } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; } /* ------------------------------------------------------------- header --- */ .topbar { background: var(--ink); color: #98a5b5; font-size: .82rem; letter-spacing: .01em; } .topbar svg { width: 14px; height: 14px; flex: none; opacity: .8; } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; } .topbar a { color: #cfd8e3; text-decoration: none; } .topbar a:hover { color: #fff; } .topbar-facts { display: flex; gap: 1.4rem; flex-wrap: wrap; } .topbar-facts span { display: inline-flex; align-items: center; gap: .4rem; } @media (max-width: 800px) { .topbar-facts span:nth-child(n+3) { display: none; } } @media (max-width: 560px) { .topbar-facts span:nth-child(n+2) { display: none; } } .site-header { position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,.92); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; } .brand img { width: 42px; height: 42px; object-fit: contain; } .brand-txt { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: var(--ink); letter-spacing: -.01em; } .brand-sub { font-family: var(--font-display); font-size: .58rem; font-weight: 500; letter-spacing: .19em; margin-top: .28rem; white-space: nowrap; } .brand-sub .h { color: var(--red); } .brand-sub .a { color: var(--ink); } .brand-sub .c { color: var(--blue); } @media (max-width: 400px) { .brand-name { font-size: 1.35rem; } .brand-sub { font-size: .5rem; letter-spacing: .15em; } } .nav { display: flex; align-items: center; gap: .15rem; } .nav > li { list-style: none; position: relative; margin: 0; } .nav ul { list-style: none; margin: 0; padding: 0; } .nav-link { white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-display); font-weight: 500; font-size: .95rem; color: var(--ink-2); text-decoration: none; padding: .6rem .72rem; border-radius: var(--r-s); transition: background-color .16s ease, color .16s ease; /* The dropdown parents are