/* ========================================================================== Landing pages - shared sections for industry, city and topic pages ========================================================================== Load order: tokens.css first, then main.css, footer.css, navmenu.css, blog.css (ticker + .crumbs), skyline.css, tv-frame.css, THIS FILE, and accent.css last. The header, footer, .btn-filled / .btn-outline, .tv and the dark-mode switch (body.dark-mode) all come from the existing site. Everything here is namespaced .lp- so it cannot leak into live pages. Accent rules (accent.css): lemon is the primary action, with ink text; sun is one "notice this" callout per section; lemon as text only on dark or blue. Brand blue carries headings accents and icons on light. ========================================================================== */ :root { /* The header is fixed; js/blog.js adds body.has-ticker (+38px) once the ticker loads. Heroes pad by this instead of a hard-coded number. */ --hdr-h: 104px; --lp-ink: var(--ink); --lp-ink-2: #465168; --lp-ink-3: #5c6880; --lp-rule: #e2e8f4; --lp-surface: #ffffff; --lp-surface-2: #f5f8fd; --lp-blue: var(--vypa-blue); --lp-blue-soft: #e8efff; } body.has-ticker { --hdr-h: 142px; } @media (max-width: 768px) { :root { --hdr-h: 100px; } body.has-ticker { --hdr-h: 138px; } } body.dark-mode { --lp-ink: #f1f5fa; --lp-ink-2: #b9c2d3; --lp-ink-3: #9aa4b8; --lp-rule: #343846; --lp-surface: #262830; --lp-surface-2: #212329; --lp-blue: var(--vypa-blue-soft); --lp-blue-soft: #1c2742; } /* -- Layout -------------------------------------------------------------- */ .lp-main { overflow-x: clip; } .lp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .lp-section { padding: 80px 0; } .lp-section--alt { background: var(--lp-surface-2); border-block: 1px solid var(--lp-rule); } .lp-head { max-width: 720px; margin-bottom: 40px; } .lp-head--center { margin-inline: auto; text-align: center; } /* -- Type ---------------------------------------------------------------- */ .lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--lp-blue-soft); color: var(--lp-blue); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } body.dark-mode .lp-eyebrow { color: var(--sun); } .lp-h1 { margin: 0 0 18px; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06; font-weight: 700; letter-spacing: -.025em; color: var(--lp-ink); text-wrap: balance; } .lp-h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: var(--lp-ink); text-wrap: balance; } .lp-h3 { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.3; font-weight: 600; color: var(--lp-ink); } .lp-lede { margin: 0 0 28px; font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.65; color: var(--lp-ink-2); max-width: 56ch; } .lp-sub { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--lp-ink-2); } .lp-head--center .lp-sub { margin-inline: auto; max-width: 60ch; } .lp-main p { text-wrap: pretty; } .lp-link { color: var(--lp-blue); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; } .lp-link:hover { text-decoration: underline; } body.dark-mode .lp-link { color: var(--lemon); } /* -- Hero ---------------------------------------------------------------- */ /* Transparent on light so the skyline behind shows, as on /signage. Dark reuses the abstract line art main.css gives .hero. */ .lp-hero { padding: calc(var(--hdr-h) + 16px) 0 72px; } body.dark-mode .lp-hero { background: url('../img/abstract_lines_transparent busy (white).png') center / cover no-repeat; } .lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; } .lp-hero .crumbs { margin: 0 0 18px; font-size: 13px; } .lp-hero .crumbs li { color: var(--lp-ink-3); } .lp-hero .crumbs li[aria-current="page"] { color: var(--lp-ink); } .lp-hero .crumbs a { color: var(--lp-ink-3); } body.dark-mode .lp-hero .crumbs a { color: var(--lemon); } .lp-hero .highlight { -webkit-box-decoration-break: clone; box-decoration-break: clone; } .lp-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .lp-actions .btn-filled, .lp-actions .btn-outline { font-size: .95rem; } .lp-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--lp-ink-2); } .lp-checks li { display: inline-flex; align-items: center; gap: 8px; } .lp-checks i { color: var(--lp-blue); } body.dark-mode .lp-checks i { color: var(--lemon); } .lp-hero-visual { display: flex; justify-content: center; } .lp-hero-visual .tv { width: 100%; } .lp-hero-visual .tv > img { aspect-ratio: 16 / 10; object-fit: cover; } /* -- Trust strip --------------------------------------------------------- */ .lp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--lp-rule); border-radius: var(--radius-card); background: var(--lp-surface); overflow: hidden; } .lp-stat { padding: 22px 24px; border-left: 1px solid var(--lp-rule); } .lp-stat:first-child { border-left: 0; } .lp-stat b { display: block; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--lp-blue); font-variant-numeric: tabular-nums; } body.dark-mode .lp-stat b { color: var(--lemon); } .lp-stat span { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.45; color: var(--lp-ink-2); } .lp-trust { padding: 0 0 8px; } /* -- Cards: problem / why ------------------------------------------------ */ .lp-grid { display: grid; gap: 20px; } .lp-g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .lp-g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .lp-card { background: var(--lp-surface); border: 1px solid var(--lp-rule); border-radius: var(--radius-card); padding: 26px; } .lp-card p { margin: 0; font-size: .96rem; line-height: 1.65; color: var(--lp-ink-2); } .lp-ico { width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; display: grid; place-items: center; background: var(--lp-blue-soft); color: var(--lp-blue); font-size: 17px; } /* A sun callout: "notice this". One per section at most. */ .lp-notice { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 18px 22px; border-radius: var(--radius-callout); background: var(--sun); color: var(--ink); } .lp-notice i { margin-top: 3px; } .lp-notice p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--ink); } .lp-notice a { color: var(--ink); font-weight: 700; } /* -- How it works: numbered, because it is a sequence -------------------- */ .lp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: lp-step; } .lp-step { position: relative; counter-increment: lp-step; } .lp-step::before { content: counter(lp-step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--vypa-blue); color: #fff; font-weight: 700; font-size: 1.05rem; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--lp-surface-2); } body.dark-mode .lp-step::before { background: var(--vypa-blue-soft); color: var(--ink); } .lp-step:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 44px; right: -28px; height: 2px; background: var(--lp-rule); } .lp-step p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--lp-ink-2); } /* -- Feature grid -------------------------------------------------------- */ .lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 36px; } .lp-feature { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 16px; } .lp-feature .lp-ico { margin: 0; grid-row: span 2; } .lp-feature p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--lp-ink-2); } /* -- Use cases ----------------------------------------------------------- */ .lp-use { display: flex; flex-direction: column; overflow: hidden; background: var(--lp-surface); border: 1px solid var(--lp-rule); border-radius: var(--radius-card); } .lp-use img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--lp-surface-2); } .lp-use-body { padding: 22px 24px 24px; } .lp-use-body p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--lp-ink-2); } .lp-tag { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-ink-3); } /* -- Pricing strip (prices in static HTML, CA$) -------------------------- */ .lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .lp-plan { position: relative; display: flex; flex-direction: column; padding: 28px 26px; background: var(--lp-surface); border: 1px solid var(--lp-rule); border-radius: var(--radius-card); } .lp-plan.is-featured { border: 2px solid var(--lemon); box-shadow: 0 18px 40px -24px rgb(var(--vypa-blue-rgb) / .45); } .lp-plan-badge { position: absolute; top: -13px; left: 24px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--lemon); color: var(--ink); font-size: 12px; font-weight: 700; } .lp-plan-name { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--lp-ink); } .lp-plan-price { margin: 0; font-size: 2.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--lp-ink); font-variant-numeric: tabular-nums; } .lp-plan-price small { font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--lp-ink-3); } .lp-plan-desc { margin: 8px 0 20px; font-size: .92rem; line-height: 1.55; color: var(--lp-ink-2); flex: 1; } .lp-plan .btn-filled, .lp-plan .btn-outline { width: 100%; font-size: .95rem; } /* -- Comparison table ---------------------------------------------------- */ /* Scrolls inside its own box, never the page. */ .lp-tablewrap { overflow-x: auto; border: 1px solid var(--lp-rule); border-radius: var(--radius-card); background: var(--lp-surface); } .lp-table { width: 100%; border-collapse: collapse; font-size: .95rem; } .lp-table th, .lp-table td { padding: 15px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lp-rule); } .lp-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-ink-3); background: var(--lp-surface-2); } .lp-table tbody th { font-weight: 600; color: var(--lp-ink); } .lp-table td { color: var(--lp-ink-2); } .lp-table tr:last-child > * { border-bottom: 0; } .lp-table .is-vypa { background: rgb(var(--vypa-blue-rgb) / .05); color: var(--lp-ink); font-weight: 600; } .lp-table thead .is-vypa { color: var(--lp-blue); } body.dark-mode .lp-table .is-vypa { background: rgb(182 242 58 / .06); } body.dark-mode .lp-table thead .is-vypa { color: var(--lemon); } .lp-yes { color: #0a7a2a; margin-right: 6px; } .lp-no { color: var(--lp-ink-3); margin-right: 6px; } body.dark-mode .lp-yes { color: var(--lemon); } /* -- FAQ:

, no JS ----------------------------------------------- */ .lp-faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--lp-rule); } .lp-faq details { border-bottom: 1px solid var(--lp-rule); } .lp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; padding: 20px 4px; cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: 600; color: var(--lp-ink); } .lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary::after { content: "+"; flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lp-blue-soft); color: var(--lp-blue); font-size: 1.2rem; font-weight: 500; transition: transform .2s ease; } .lp-faq details[open] summary::after { transform: rotate(45deg); } .lp-faq summary:hover { color: var(--lp-blue); } body.dark-mode .lp-faq summary:hover { color: var(--lemon); } .lp-faq summary:focus-visible { outline: none; box-shadow: var(--focus-ring-light); border-radius: 8px; } .lp-faq details > div { padding: 0 4px 22px; } .lp-faq details p { margin: 0 0 10px; font-size: .98rem; line-height: 1.7; color: var(--lp-ink-2); max-width: 70ch; } .lp-faq details p:last-child { margin-bottom: 0; } .lp-faq details a { color: var(--lp-blue); font-weight: 600; } body.dark-mode .lp-faq details a { color: var(--lemon); } /* -- Related links ------------------------------------------------------- */ .lp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; } .lp-related a { display: flex; flex-direction: column; padding: 24px; min-height: 44px; text-decoration: none; background: var(--lp-surface); border: 1px solid var(--lp-rule); border-radius: var(--radius-card); transition: border-color .18s ease, transform .18s ease; } .lp-related a:hover { border-color: var(--lp-blue); transform: translateY(-3px); } body.dark-mode .lp-related a:hover { border-color: var(--lemon); } .lp-related a:focus-visible { outline: none; box-shadow: var(--focus-ring-light); } .lp-related .lp-tag { margin-bottom: 6px; } .lp-related strong { font-size: 1.05rem; font-weight: 600; color: var(--lp-ink); margin-bottom: 6px; } .lp-related span:not(.lp-tag) { font-size: .92rem; line-height: 1.55; color: var(--lp-ink-2); } .lp-related i { margin-top: auto; padding-top: 14px; color: var(--lp-blue); } body.dark-mode .lp-related i { color: var(--lemon); } /* -- Final CTA band: brand blue, lemon button ---------------------------- */ .lp-cta { position: relative; overflow: hidden; padding: 60px 48px; border-radius: 24px; text-align: center; background: var(--vypa-blue); color: #fff; } body.dark-mode .lp-cta { background: var(--vypa-blue-700); } .lp-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(60% 90% at 100% 0%, rgb(255 255 255 / .16), transparent 60%), radial-gradient(50% 80% at 0% 100%, rgb(11 15 26 / .25), transparent 60%); } .lp-cta > * { position: relative; } .lp-cta .lp-h2 { color: #fff; margin-inline: auto; max-width: 22ch; } .lp-cta p { margin: 0 auto 28px; max-width: 54ch; font-size: 1.05rem; line-height: 1.65; color: rgb(255 255 255 / .88); } .lp-cta .lp-actions { justify-content: center; } .lp-cta .btn-filled { border-color: var(--lemon); } .lp-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 26px; border-radius: var(--radius-pill); border: 2px solid rgb(255 255 255 / .6); color: #fff; font-size: .95rem; font-weight: 600; text-decoration: none; transition: background-color .2s ease; } .lp-btn-ghost:hover { background: rgb(255 255 255 / .12); } .lp-cta a:focus-visible { outline: none; box-shadow: var(--focus-ring); } .lp-cta p.lp-cta-note { margin: 18px auto 0; font-size: .88rem; color: rgb(255 255 255 / .75); } @media (prefers-reduced-motion: reduce) { .lp-related a, .lp-faq summary::after { transition: none; } } /* -- Tablet -------------------------------------------------------------- */ @media (max-width: 960px) { .lp-hero-grid { grid-template-columns: 1fr; gap: 40px; } .lp-hero-visual .tv { max-width: 560px; } .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-stat:nth-child(3) { border-left: 0; } .lp-stat:nth-child(n+3) { border-top: 1px solid var(--lp-rule); } .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-step:nth-child(2)::after { display: none; } .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } } /* -- Phone --------------------------------------------------------------- */ @media (max-width: 600px) { .lp-wrap { padding: 0 16px; } .lp-section { padding: 56px 0; } .lp-hero { padding-bottom: 48px; } .lp-head { margin-bottom: 28px; } .lp-actions > a { flex: 1 1 100%; } .lp-stat { padding: 18px 16px; } .lp-stat b { font-size: 1.5rem; } .lp-steps { grid-template-columns: 1fr; gap: 0; } .lp-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-bottom: 26px; } .lp-step::before { grid-row: span 2; margin: 0; } .lp-step:not(:last-child)::after { display: block; top: 44px; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; } .lp-features { grid-template-columns: 1fr; gap: 24px; } .lp-card { padding: 22px; } .lp-table { font-size: .88rem; } .lp-table th, .lp-table td { padding: 12px 12px; } .lp-cta { padding: 40px 20px; border-radius: 18px; } .lp-cta .lp-actions > a { flex: 1 1 100%; } }