/* Shared stylesheet for SEO landing pages , service pages, location pages, problem pages */ :root { --ic-red: #C8102E; --ic-red-deep: #9F0B22; --ic-red-soft: #E94557; --paper: #F4EAD2; --paper-bright: #FAF3E0; --ink: #1F1B17; --ink-soft: #3A332C; --grey-700: #5A5148; --grey-500: #6F665B; --grey-line: rgba(31, 27, 23, 0.18); --serif: 'Montserrat', sans-serif; --sans: 'Manrope', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --ease: cubic-bezier(.2, .7, .1, 1); --gutter: clamp(28px, 7vw, 52px); } @media (min-width: 720px) { :root { --gutter: clamp(60px, 9vw, 120px); } } @media (min-width: 1280px) { :root { --gutter: clamp(140px, 16vw, 200px); } } *, *::before, *::after { box-sizing: border-box; } /* background on too: covers iOS Safari overscroll bounce so it doesn't show white above/below the page */ html { -webkit-font-smoothing: antialiased; overscroll-behavior: none; scroll-behavior: smooth; background: var(--paper); } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.65; overscroll-behavior: none; position: relative; } /* Site-wide topo contour background on every SEO page , uses the EXACT same topo-default SVG paths as the homepage so the visual identity is consistent landing-page → SEO-page. 10 contour lines organized as upper terrain (3 ridges) + mid valley (3 V-shapes) + lower terrain (4 ridges). Subtle opacity so it stays a backdrop, not a fight. */ body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; min-height: 100vh; z-index: 0; pointer-events: none; opacity: 0.18; background-repeat: repeat-y; background-position: center top; background-size: 100% 95vh; background-image: url("data:image/svg+xml;utf8,"); } body > * { position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } a.xref { color: inherit; text-decoration: underline; text-decoration-color: rgba(200, 16, 46, 0.7); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; } a.xref:hover, a.xref:focus-visible { color: var(--ic-red); text-decoration-color: var(--ic-red); } .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); } /* ===== Topbar (mirrors homepage .nav exactly , same transparency, same border behavior, same height. Barely-there frosted glass at the top of page; scrolled state adds visible cream + bottom border. ===== */ .topbar { padding: 0; border-bottom: 1px solid transparent; background: rgba(244, 234, 210, 0.04); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); transition: border-color .3s var(--ease), background .3s var(--ease); } .topbar.scrolled { background: rgba(244, 234, 210, 0.58); border-bottom-color: var(--grey-line); } .topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; } .topbar-left { display: flex; align-items: center; flex-shrink: 0; } /* Brand: logo image (matches homepage .logo) */ .brand { display: flex; align-items: center; font-family: var(--sans); font-size: 22px; letter-spacing: -0.01em; color: var(--ink); font-weight: 300; flex-shrink: 0; text-decoration: none; } .brand img { display: block; width: auto; height: 36px; flex-shrink: 0; max-width: none; } .brand b { font-weight: 700; color: var(--ic-red); } .brand sup { font-size: 9px; vertical-align: super; margin-left: 3px; color: var(--grey-500); font-weight: 400; } .brand em { color: var(--ic-red); font-style: normal; } /* Panthera badge (matches homepage .group-badge) */ .group-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0 5px 14px; margin-left: 14px; border-left: 1px solid var(--grey-line); flex-shrink: 0; } .group-badge .gb-label { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-500); } .group-badge img { max-width: none; height: 14px; width: auto; } /* Language toggle pill (mirrors homepage .lang-toggle exactly). Translucent frosted-ribbon look , content shows through; border + blur provide definition without a heavy fill. */ .lang-toggle { display: flex; gap: 1px; padding: 3px; background: rgba(244, 234, 210, 0.32); backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35); border: 1px solid rgba(31, 27, 23, 0.08); border-radius: 999px; flex-shrink: 0; } .lang-toggle button { padding: 5px 11px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(31, 27, 23, 0.65); background: transparent; border: 0; cursor: pointer; border-radius: 999px; transition: color .2s var(--ease), background .2s var(--ease); min-height: 28px; line-height: 1; } .lang-toggle button:hover, .lang-toggle button:focus-visible { color: var(--ink); background: rgba(31, 27, 23, 0.08); outline: none; } /* Active lang button: subtle deeper-cream pill with ink-soft text. Not red, not black. Just a touch deeper than the toggle background to stand out. */ .lang-toggle button.active { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px rgba(31,27,23,0.18); } /* Mobile: single-button cycling toggle (matches homepage). Show ONLY the active button; tapping it cycles to the next language via the JS handler. */ @media (max-width: 540px) { .lang-toggle { padding: 0; gap: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; } .lang-toggle button:not(.active) { display: none; } .lang-toggle button.active { padding: 6px 14px; font-size: 11px; min-height: 32px; letter-spacing: 0.1em; border-radius: 999px; } } @media (max-width: 1100px) { .group-badge { padding-left: 10px; margin-left: 10px; gap: 5px; } .group-badge .gb-label { font-size: 8px; } } @media (max-width: 720px) { /* Topbar height stays 76px on all viewports , matches homepage .nav-inner for visual coherence between landing and SEO pages. */ .lang-switch .ls-item { padding: 5px 10px; font-size: 10px; letter-spacing: 0.14em; } } @media (max-width: 540px) { .group-badge { padding-left: 8px; margin-left: 8px; } .group-badge .gb-label { font-size: 7.5px; letter-spacing: 0.1em; } .group-badge img { height: 11px; } .brand img { height: 26px; } .lang-switch { padding: 2px; } .lang-switch .ls-item { padding: 4px 8px; font-size: 9.5px; letter-spacing: 0.12em; } } @media (max-width: 380px) { .brand img { height: 22px; } .group-badge { padding-left: 6px; margin-left: 6px; gap: 4px; } .group-badge .gb-label { font-size: 7px; } .group-badge img { height: 9px; } } /* Legacy fallback (kept harmless if older HTML still references it) */ .topbar a.home-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-700); } .topbar a.home-link:hover { color: var(--ic-red); } /* Breadcrumbs , first link (Home) is the primary "back" affordance now that the standalone .seo-back-btn was removed. Render it as a filled red pill so it's unmistakably a button, not just colored text. */ .crumbs { padding: 18px 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-500); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .crumbs a { color: var(--grey-500); transition: color .2s var(--ease); } .crumbs a:hover { color: var(--ic-red); } .crumbs .sep { margin: 0 6px; opacity: 0.5; } .crumbs .here { color: var(--ic-red); } .crumbs a:first-of-type { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 12px; margin-right: 4px; background: var(--ic-red); color: #fff; border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; box-shadow: 0 2px 8px -3px rgba(200, 16, 46, 0.4); transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); } .crumbs a:first-of-type::before { content: '\2190'; font-weight: 700; font-size: 13px; line-height: 1; } .crumbs a:first-of-type:hover { background: var(--ic-red-deep); color: #fff; transform: translateX(-2px); box-shadow: 0 4px 12px -3px rgba(159, 11, 34, 0.5); } /* Intermediate breadcrumb links (e.g. "Resources" between Home pill and current page) , minimalist outline pill so the path back to the parent is also clearly pressable, without competing with the Home primary button. */ .crumbs a:not(:first-of-type) { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid rgba(31, 27, 23, 0.22); border-radius: 999px; background: transparent; color: var(--grey-700); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; transition: border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease); } .crumbs a:not(:first-of-type):hover { border-color: var(--ic-red); color: var(--ic-red); background: rgba(200, 16, 46, 0.04); } /* Tighten the dot separator on either side of an outline pill so it reads as "Home pill · Resources pill · current page" without too much air. */ .crumbs a + .sep, .crumbs .sep + a { margin: 0 4px; } /* Hero (topo background lives on body::before, single source of truth) */ .hero { padding: 36px 0 48px; } .hero .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-red); margin-bottom: 16px; } .hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 5.5vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 18px; max-width: 920px; } .hero h1 em { font-style: italic; color: var(--ic-red); font-weight: 300; } .hero .lede { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; max-width: 720px; color: var(--grey-700); } /* Stats strip */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 32px 0; border-top: 1px solid var(--grey-line); border-bottom: 1px solid var(--grey-line); margin: 32px 0 56px; } @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat { display: flex; flex-direction: column; gap: 6px; } .stat .v { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: var(--ic-red); letter-spacing: -0.015em; } .stat .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); } /* Content blocks */ section.block { padding: 56px 0; border-top: 1px solid var(--grey-line); } /* Only zero out top spacing for the FIRST block under main's primary container. Otherwise blocks placed after a .cta-block (dark section) lose their breathing room and the red eyebrow text crashes into the dark bar above. */ main > .container > section.block:first-of-type { border-top: 0; padding-top: 0; } .block-eye { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-red); margin-bottom: 14px; } .block h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; letter-spacing: -0.018em; margin: 0 0 22px; max-width: 820px; } .block h2 em { font-style: italic; color: var(--ic-red); font-weight: 300; } .block h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.3; margin: 28px 0 10px; color: var(--ink); } .block p { margin: 0 0 16px; max-width: 740px; color: var(--ink-soft); } .block p strong { color: var(--ink); font-weight: 600; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; gap: 24px; } } /* ===== "Continue exploring" / "More from Infraconcrete" block ========== Restyles the data-service-crosslinks footer block so its sub-headings read as mono micro-labels and its inline links look clickable. No markup change needed; pure CSS targeting the data attribute. */ /* Constrain block to container width — the block usually sits OUTSIDE
's .container, so without this it would span the full viewport while the rest of the page content stays centered at max 1100px. Apply container's exact constraints (max-width + auto-margins + gutter padding) so the block aligns with the surrounding sections. */ section.block[data-service-crosslinks] { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } [data-service-crosslinks] .two-col > div { display: flex; flex-direction: column; } [data-service-crosslinks] h3 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin: 28px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--grey-line); } [data-service-crosslinks] h3:first-child { margin-top: 4px; } [data-service-crosslinks] p { font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; color: var(--ink-soft); } [data-service-crosslinks] p a { color: inherit; text-decoration: underline; text-decoration-color: rgba(200, 16, 46, 0.6); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; } [data-service-crosslinks] p a:hover, [data-service-crosslinks] p a:focus-visible { color: var(--ic-red); text-decoration-color: var(--ic-red); } /* Regional coverage callout (the inline-styled sub-block) */ [data-service-crosslinks] > div[style*="border-left"] { margin-top: 36px !important; padding: 24px 28px !important; background: var(--paper-bright) !important; border: 1px solid var(--grey-line) !important; border-left: 3px solid var(--ic-red) !important; border-radius: 0 !important; } [data-service-crosslinks] > div[style*="border-left"] h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--ink); margin: 0 0 8px; padding: 0; border-bottom: 0; } [data-service-crosslinks] > div[style*="border-left"] p strong { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ic-red); display: inline-block; margin-right: 4px; } .case-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 8px; } @media (max-width: 720px) { .case-cards { grid-template-columns: 1fr; } } .case-card { padding: 22px; border: 1px solid var(--grey-line); background: var(--paper-bright); } .case-card h4 { font-family: var(--serif); font-weight: 600; font-size: 16px; margin: 0 0 8px; color: var(--ic-red); } .case-card p { font-size: 14.5px; line-height: 1.6; color: var(--grey-700); margin: 0; } .steps { display: grid; gap: 20px; margin: 8px 0 0; } .step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--grey-line); } .step:last-child { border-bottom: 1px solid var(--grey-line); } .step .n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; color: var(--ic-red); padding-top: 4px; } .step h4 { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.3; margin: 0 0 6px; } .step p { font-size: 14.5px; line-height: 1.6; color: var(--grey-700); margin: 0; max-width: 600px; } .specs { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14.5px; } .specs th, .specs td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--grey-line); } .specs th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-500); font-weight: 500; background: var(--paper-bright); } .specs tr:last-child td { border-bottom: 0; } .specs td:first-child { font-weight: 600; color: var(--ink); } .projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 720px) { .projects { grid-template-columns: 1fr; } } .proj { padding: 22px; border: 1px solid var(--grey-line); background: var(--paper-bright); } .proj .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 10px; } .proj h4 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0 0 12px; } .proj p { font-size: 14px; line-height: 1.55; color: var(--grey-700); margin: 0 0 14px; } .proj .stat-row { display: flex; gap: 24px; padding-top: 14px; border-top: 1px solid var(--grey-line); } .proj .stat-row .v { font-family: var(--serif); color: var(--ic-red); font-size: 18px; } .proj .stat-row .l { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-500); margin-top: 4px; } /* Service link grid (used on slope-stabilization umbrella + location pages) */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; } @media (max-width: 880px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .svc-grid { grid-template-columns: 1fr; } } .svc-link { display: block; padding: 24px; border: 1px solid var(--grey-line); background: var(--paper-bright); transition: all .25s var(--ease); } .svc-link:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 32px -18px rgba(31,27,23,0.18); } .svc-link .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ic-red); margin-bottom: 10px; } .svc-link h4 { font-family: var(--serif); font-weight: 500; font-size: 19px; margin: 0 0 8px; line-height: 1.2; } .svc-link p { font-size: 14px; line-height: 1.55; color: var(--grey-700); margin: 0 0 12px; } .svc-link .arr { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ic-red); } .svc-link:hover .arr { letter-spacing: 0.26em; } /* Areas-served pill list (location pages) */ .areas { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; } .areas span { display: inline-block; padding: 6px 14px; border: 1px solid var(--grey-line); background: var(--paper-bright); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-700); } /* === Use Cases by Industry — dedicated resource section === Industry-vertical cards that elaborate where each system applies, with tag-style links to the specific service pages used per industry. Used on the Resources hub and on per-service pages with data-usecases. */ .usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 12px; } @media (max-width: 720px) { .usecase-grid { grid-template-columns: 1fr; gap: 18px; } } .usecase-card { padding: 28px; border: 1px solid var(--grey-line); background: var(--paper-bright); border-left: 3px solid var(--ic-red); display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-left-color .25s var(--ease); } .usecase-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -18px rgba(31,27,23,0.18); border-left-color: var(--ic-red-deep); } .usecase-card .uc-readmore { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-red); margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(31,27,23,0.1); transition: letter-spacing .2s ease; } .usecase-card:hover .uc-readmore { letter-spacing: 0.24em; } .usecase-card .uc-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ic-red); } .usecase-card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 2vw, 22px); line-height: 1.25; letter-spacing: -0.01em; margin: 0; color: var(--ink); } .usecase-card h3 em { font-style: italic; color: var(--ic-red); font-weight: 500; } .usecase-card .uc-desc { font-size: 14.5px; line-height: 1.65; color: var(--grey-700); margin: 0; } .usecase-card .uc-references { font-size: 13px; line-height: 1.55; color: var(--grey-500); margin: 0; padding-top: 6px; border-top: 1px dashed rgba(31,27,23,0.12); } .usecase-card .uc-references strong { color: var(--ink); font-weight: 600; } .usecase-card .uc-systems { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 12px; border-top: 1px solid rgba(31,27,23,0.1); } .usecase-card .uc-systems-label { flex-basis: 100%; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin: 0 0 4px; } .usecase-card .uc-systems a { display: inline-block; padding: 5px 11px; background: var(--paper); border: 1px solid var(--grey-line); border-radius: 3px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink); text-decoration: none; transition: all .2s ease; white-space: nowrap; } .usecase-card .uc-systems a:hover { background: var(--ic-red); color: #fff; border-color: var(--ic-red); transform: translateY(-1px); } /* FAQ */ .faq-item { padding: 22px 0; border-top: 1px solid var(--grey-line); } .faq-item:last-child { border-bottom: 1px solid var(--grey-line); } .faq-item summary { cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 400; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.4; color: var(--ink); display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .ic { flex-shrink: 0; width: 28px; height: 28px; border: 1px solid var(--grey-line); border-radius: 50%; display: grid; place-items: center; transition: all .25s var(--ease); margin-top: 2px; font-size: 14px; color: var(--ink); } .faq-item[open] summary .ic { background: var(--ic-red); border-color: var(--ic-red); color: #fff; transform: rotate(45deg); } .faq-item .ans { padding-top: 14px; font-size: 15px; line-height: 1.7; color: var(--grey-700); max-width: 740px; } /* CTA */ .cta-block { background: var(--ink); color: var(--paper); padding: 56px 0; margin-top: 72px; } .cta-block h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; margin: 0 0 16px; max-width: 720px; color: var(--paper); } .cta-block h2 em { font-style: italic; color: var(--ic-red-soft); font-weight: 300; } .cta-block p { color: rgba(244, 234, 210, 0.78); margin: 0 0 24px; max-width: 600px; font-size: 15.5px; } .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 12px 26px; border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; transition: all .25s var(--ease); } .btn-primary { background: var(--ic-red); color: #fff; } .btn-primary:hover { background: var(--ic-red-deep); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--paper); border: 1px solid rgba(244, 234, 210, 0.32); } .btn-ghost:hover { border-color: var(--paper); } /* Footer (rich, mirrors homepage .footer). Tight bottom padding so scroll ends right after the credentials line , bottom-nav clearance is handled by body { padding-bottom } below, no need to double-pad here. */ footer { background: var(--paper); color: var(--ink-soft); padding: 70px 0 28px; font-size: 13px; border-top: 1px solid var(--grey-line); } footer .container { max-width: 1100px; } footer p { margin: 0 0 16px; } footer a { color: var(--ink-soft); } footer a:hover { color: var(--ic-red); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--grey-line); } .footer-grid .fg-brand .footer-logo img { display: block; width: auto; height: 40px; max-width: none; } .footer-tagline { margin-top: 14px; max-width: 340px; color: var(--grey-700); line-height: 1.65; } .footer-tagline em { font-family: var(--serif); font-style: italic; color: var(--ic-red); } footer h6 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ic-red); margin: 0 0 18px 0; font-weight: 600; } footer ul { list-style: none; padding: 0; margin: 0; } footer li { padding: 6px 0; } footer li a { font-size: 13.5px; color: var(--ink-soft); } .footer-group { margin-top: 56px; padding: 22px 0; border-top: 1px solid var(--grey-line); border-bottom: 1px solid var(--grey-line); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .footer-group-l { display: flex; align-items: center; gap: 12px; } .footer-group .fg-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-500); } .footer-group .footer-group-l img { display: block; width: auto; height: 22px; max-width: none; opacity: 0.65; } .footer-group-r { margin: 0; font-size: 12px; color: var(--grey-500); max-width: 480px; line-height: 1.5; } .footer-bottom { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-500); flex-wrap: wrap; gap: 16px; } @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid .fg-brand { grid-column: 1 / -1; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-group { gap: 14px; } .footer-group-r { font-size: 11px; } .footer-bottom { font-size: 9.5px; flex-direction: column; align-items: flex-start; gap: 10px; } } /* Bottom-nav swipe pill (matches homepage). Injected by /js/seo-nav.js. Just enough clearance for the floating pill (~72px tall + 12px from bottom) so scroll ends right after the credentials line , no big blank below. */ body { padding-bottom: 60px; } .bottom-nav { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%) translateY(28px); z-index: 200; display: flex; align-items: center; gap: 4px; padding: 6px; background: rgba(250, 243, 224, 0.58); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); border: 1px solid rgba(31, 27, 23, 0.12); border-radius: 999px; box-shadow: 0 12px 40px -10px rgba(0,0,0,0.18), 0 4px 12px -4px rgba(0,0,0,0.10); max-width: calc(100vw - 24px); /* Hidden until scrolled past ~60% of viewport (matches homepage) */ opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); } .bottom-nav.is-revealed { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .bottom-nav .bn-hint { flex-shrink: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 6px; transition: opacity .35s var(--ease), max-width .35s var(--ease); max-width: 90px; overflow: hidden; white-space: nowrap; } .bottom-nav.has-scrolled .bn-hint { opacity: 0; max-width: 0; padding: 0; } .bn-hint-arrow { color: var(--ic-red); } .bn-scroll { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: none; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%); } .bn-scroll::-webkit-scrollbar { display: none; } .bn-scroll .bn-item { scroll-snap-align: center; flex-shrink: 0; } /* .bn-item sizing matches homepage exactly so the floating pill looks identical on landing page and every SEO page. min-height:44px = WCAG tap target. */ .bn-item { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 12px; min-width: 52px; min-height: 44px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 70%, transparent); text-decoration: none; border-radius: 999px; transition: background .22s var(--ease), color .22s var(--ease); } .bn-item:hover { background: rgba(31, 27, 23, 0.06); color: var(--ic-red); } .bn-item svg { width: 20px; height: 20px; display: block; } .bn-cta { background: var(--ic-red); color: #fff !important; padding: 10px 18px; min-width: auto; margin-left: 4px; } .bn-cta:hover { background: var(--ic-red-deep); color: #fff !important; } .bn-cta svg { opacity: 1; } /* Mobile bottom-nav sizing now matches homepage: same gap (6px), same outer padding, same item size , no more "smaller pill on SEO pages" mismatch. */ @media (max-width: 540px) { .bottom-nav { padding: 6px 10px 6px 14px; gap: 6px; bottom: 12px; max-width: calc(100vw - 24px); } .bn-item { font-size: 9px; } .bn-item svg { width: 20px; height: 20px; } .bottom-nav .bn-hint { padding: 0 6px 0 4px; font-size: 8.5px; } /* Mobile scroll: just iOS momentum on (touch). Snap behavior is now proximity (universal) + default snap-stop, so feel is consistent across mobile, tablet, and desktop. */ .bn-scroll { -webkit-overflow-scrolling: touch; } } @media (max-height: 500px) and (orientation: landscape) { body { padding-bottom: 110px; } .bottom-nav { bottom: 16px; } } /* ===== Chinese (Simplified) typography fixes ===== English uses negative tracking on display headings and tight uppercase tracking on labels. On CJK characters those rules merge glyphs together or push them apart unevenly. Reset tracking + force Noto Sans SC for zh-Hans pages. */ [lang="zh-Hans"] body, [lang="zh-Hans"] .brand, [lang="zh-Hans"] .hero h1, [lang="zh-Hans"] .hero .lede, [lang="zh-Hans"] .block h2, [lang="zh-Hans"] .block h3, [lang="zh-Hans"] .block p, [lang="zh-Hans"] .case-card h4, [lang="zh-Hans"] .case-card p, [lang="zh-Hans"] .proj h4, [lang="zh-Hans"] .proj p, [lang="zh-Hans"] .step h4, [lang="zh-Hans"] .step p, [lang="zh-Hans"] .svc-link h4, [lang="zh-Hans"] .svc-link p, [lang="zh-Hans"] .faq-item summary, [lang="zh-Hans"] .faq-item .ans, [lang="zh-Hans"] .cta-block h2, [lang="zh-Hans"] .cta-block p, [lang="zh-Hans"] .specs td { font-family: 'Noto Sans SC', 'Manrope', system-ui, sans-serif; } [lang="zh-Hans"] .hero h1, [lang="zh-Hans"] .hero h1 em, [lang="zh-Hans"] .block h2, [lang="zh-Hans"] .block h2 em, [lang="zh-Hans"] .block h3, [lang="zh-Hans"] .case-card h4, [lang="zh-Hans"] .proj h4, [lang="zh-Hans"] .step h4, [lang="zh-Hans"] .svc-link h4, [lang="zh-Hans"] .faq-item summary, [lang="zh-Hans"] .cta-block h2, [lang="zh-Hans"] .cta-block h2 em { letter-spacing: 0; } [lang="zh-Hans"] .hero h1 em, [lang="zh-Hans"] .block h2 em, [lang="zh-Hans"] .cta-block h2 em { font-style: normal; } [lang="zh-Hans"] .crumbs, [lang="zh-Hans"] .eyebrow, [lang="zh-Hans"] .block-eye, [lang="zh-Hans"] .stat .l, [lang="zh-Hans"] .stat .v, [lang="zh-Hans"] .areas span, [lang="zh-Hans"] .proj .tag, [lang="zh-Hans"] .proj .stat-row .l, [lang="zh-Hans"] .step .n, [lang="zh-Hans"] .specs th, [lang="zh-Hans"] .svc-link .label, [lang="zh-Hans"] .svc-link .arr, [lang="zh-Hans"] .bn-item, [lang="zh-Hans"] .bn-hint, [lang="zh-Hans"] .gb-label, [lang="zh-Hans"] .ls-item, [lang="zh-Hans"] .topbar a.home-link, [lang="zh-Hans"] footer p { letter-spacing: 0.04em; }