/* Metre2 marketing site - shares its palette and type with the rest of Keystone (KeystoneEmailSender's HTML template, KeystoneContainerWindow's title bar): teal accent #155e75, Inter, the same "M2" mark, so the site, the emails, and the native app chrome read as one product family rather than three unrelated things. Inter itself is loaded from Google Fonts in each page's - without it this falls back to Segoe UI, which looks fine but isn't quite what the emails/native chrome use. */ :root { --accent: #155e75; --accent-light: #1c7a9a; --accent-dark: #0e4457; --ink: #17212f; --body-text: #42526a; --muted: #6b778c; --border: #d7e4ec; --panel: #f4f9fb; --bg: #eaf3f7; --white: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--white); color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* ---- Header ---- */ header.site-header { background: var(--accent); position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 16px rgba(14, 68, 87, 0.18); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand-mark { width: 34px; height: 34px; background: rgba(255, 255, 255, 0.16); color: #ffffff; border-radius: 8px; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; } .brand-name { color: #ffffff; font-weight: 760; font-size: 16px; letter-spacing: -0.01em; } nav.site-nav { display: flex; align-items: center; gap: 28px; } nav.site-nav a { color: #ffffff; text-decoration: none; font-size: 13px; font-weight: 600; opacity: 0.85; transition: opacity 0.15s ease; } nav.site-nav a:hover { opacity: 1; } /* ---- Hero ---- */ .hero { position: relative; padding: 96px 0 8px; text-align: center; overflow: hidden; background: radial-gradient(680px 380px at 18% -10%, rgba(21, 94, 117, 0.14), transparent 60%), radial-gradient(640px 420px at 100% 10%, rgba(28, 122, 154, 0.12), transparent 60%), linear-gradient(180deg, #f4fafc 0%, #ffffff 65%); } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.5; pointer-events: none; } .hero::before { width: 340px; height: 340px; top: -140px; left: -120px; background: radial-gradient(circle, rgba(21, 94, 117, 0.10), transparent 70%); } .hero::after { width: 420px; height: 420px; bottom: -220px; right: -140px; background: radial-gradient(circle, rgba(28, 122, 154, 0.10), transparent 70%); } .hero .wrap { position: relative; } .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; text-align: left; } .hero-grid .hero-copy { text-align: left; } .hero-grid .hero-badge { margin-left: 0; } .hero-grid .hero-actions { justify-content: flex-start; } .hero-grid .lede { margin-left: 0; } /* Small "account -> apps" diagram, pure CSS/flexbox (no image asset) - visualises the headline instead of just illustrating it with gradients. */ .hero-diagram-card { position: relative; overflow: hidden; background: radial-gradient(460px 280px at 50% -8%, rgba(21, 94, 117, 0.10), transparent 65%), #ffffff; border: 1px solid var(--border); border-radius: 18px; padding: 32px 24px 26px; box-shadow: 0 30px 70px rgba(15, 23, 42, 0.10); transition: transform 0.25s ease, box-shadow 0.25s ease; } .hero-diagram-card:hover { transform: translateY(-3px); box-shadow: 0 36px 80px rgba(15, 23, 42, 0.14); } /* Faint dot-grid texture behind the diagram - purely decorative, gives the card some depth instead of a flat white panel. */ .hero-diagram-card::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5; pointer-events: none; } .hub { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .hub-node { position: relative; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%); color: #ffffff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(21, 94, 117, 0.30); } /* A soft pulsing ring radiating from the account node - reads as "one account, signal going out to every app" rather than a static icon. Two rings offset in time so there's always one mid-pulse. */ .hub-node::before, .hub-node::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid var(--accent-light); opacity: 0; animation: hub-pulse 2.8s ease-out infinite; } .hub-node::after { animation-delay: 1.4s; } @keyframes hub-pulse { 0% { opacity: 0.55; transform: scale(0.92); } 70% { opacity: 0; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1.4); } } @media (prefers-reduced-motion: reduce) { .hub-node::before, .hub-node::after { animation: none; display: none; } } .hub-label { position: relative; z-index: 1; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--muted); } .hub-connector { position: relative; z-index: 1; width: 2px; height: 26px; background: linear-gradient(180deg, var(--accent-light), var(--border)); margin: 8px 0; } /* Small dot where the connector meets the horizontal branch line, echoed at each branch below via .hub-branch::after - ties the whole thing together as one connected flow rather than plain crossing lines. */ .hub-connector::after { content: ""; position: absolute; bottom: -1px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 0 3px #ffffff; transform: translate(-50%, -50%); } /* Fixed at exactly 3 branches by design (the connector line below is positioned with percentages calibrated for 3 items) - this is a small illustrative diagram, not a literal list of every app in the portfolio. As more apps go live, keep showing 2 flagship apps plus one "+N more" ghost branch (update its label/count) rather than adding a 4th/5th real branch - past 3 items the line alignment breaks and the icons get cramped. If you want an exhaustive list of apps, that's what the .apps-grid section below is for. */ .hub-branches { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: 22px; } .hub-branches::before { content: ""; position: absolute; top: 0; /* Exactly 1/6 and 5/6 of the row width - the horizontal midpoint of the first and last of 3 equal flex:1 branches with no gap between them. Deliberately not a fixed-px gap plus a hand-tuned percentage: those drift apart at different container widths and the line stops meeting the vertical stubs below. Spacing between branches comes from percentage padding on .hub-branch instead, which scales with the container the same way this line does. */ left: 16.667%; right: 16.667%; height: 2px; background: linear-gradient(90deg, var(--accent-light), var(--border) 15%, var(--border) 85%, var(--accent-light)); } .hub-branch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; box-sizing: border-box; padding: 0 4%; } .hub-branch::before { content: ""; position: absolute; top: -22px; left: 50%; width: 2px; height: 22px; background: var(--border); transform: translateX(-50%); } /* Small dot marking where each branch's vertical stub meets the horizontal line - matches .hub-connector::after above the diagram, so every junction in the diagram reads the same way. */ .hub-branch::after { content: ""; position: absolute; top: -22px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 0 3px #ffffff; transform: translate(-50%, -50%); } .hub-branch.hub-branch-ghost::after { background: var(--border); } .hub-branch-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); color: var(--accent); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hub-branch-icon svg { width: 18px; height: 18px; } .hub-branch:hover .hub-branch-icon { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(21, 94, 117, 0.18); } /* Vector and Forma get their own tint so the diagram reads as two distinct apps hanging off one account, not two identical icon boxes - Vector keeps the site's teal, Forma gets a complementary violet used only here, never elsewhere in the palette. */ .hub-branch:nth-child(1) .hub-branch-icon { background: linear-gradient(135deg, rgba(21, 94, 117, 0.14) 0%, rgba(28, 122, 154, 0.14) 100%); border-color: rgba(21, 94, 117, 0.28); color: var(--accent); } .hub-branch:nth-child(2) .hub-branch-icon { background: linear-gradient(135deg, rgba(109, 79, 176, 0.14) 0%, rgba(139, 105, 210, 0.14) 100%); border-color: rgba(109, 79, 176, 0.28); color: #6d4fb0; } .hub-branch.hub-branch-ghost .hub-branch-icon { background: #ffffff; border-style: dashed; color: var(--muted); } .hub-branch span { font-size: 12px; font-weight: 700; color: var(--ink); text-align: center; } .hub-branch.hub-branch-ghost span { color: var(--muted); font-weight: 600; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: #ffffff; border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 24px; } .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-light); } .hero h1 { margin: 0; font-size: 48px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); } .hero h1 .accent-text { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lede { max-width: 620px; margin: 22px auto 0; font-size: 18px; line-height: 1.65; color: var(--body-text); } .hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; padding: 14px 26px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; line-height: 1; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn-primary { background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%); color: #ffffff; box-shadow: 0 10px 24px rgba(21, 94, 117, 0.28); } .btn-primary:hover { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(21, 94, 117, 0.34); } .btn-secondary { background: #ffffff; color: var(--accent); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04); } .btn-secondary:hover { border-color: var(--accent-light); transform: translateY(-1px); } .hero-note { margin-top: 20px; font-size: 13px; color: var(--muted); } /* ---- Sections ---- */ section { padding: 32px 0; } .section-eyebrow { display: block; text-align: center; margin: 0 0 10px; color: var(--accent); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } section h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); text-align: center; margin: 0 0 12px; } section .section-lede { text-align: center; max-width: 560px; margin: 0 auto 36px; color: var(--body-text); font-size: 16px; line-height: 1.65; } /* Wave divider between the hero and the next section - purely decorative, no image asset. */ .section-divider { display: block; width: 100%; height: 48px; margin-top: -1px; } /* ---- App cards ---- */ .apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .app-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; background: #ffffff; border: 1px solid var(--border); border-radius: 18px; padding: 32px; box-shadow: 0 20px 44px rgba(15, 23, 42, 0.06); transition: transform 0.18s ease, box-shadow 0.18s ease; overflow: hidden; } .app-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%); opacity: 0; transition: opacity 0.18s ease; } .app-card:hover { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(15, 23, 42, 0.10); } .app-card:hover::before { opacity: 1; } .app-card .app-icon { width: 46px; height: 46px; border-radius: 11px; background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%); color: #ffffff; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 8px 20px rgba(21, 94, 117, 0.28); } .app-card .app-icon svg { width: 22px; height: 22px; } .app-card h3 { margin: 0 0 10px; font-size: 21px; font-weight: 760; color: var(--ink); } .app-card h3 a { color: inherit; text-decoration: none; } .app-card p { margin: 0 0 22px; color: var(--body-text); font-size: 15px; line-height: 1.6; flex: 1 0 auto; } /* ---- Price pill ---- Shared component for apps with locked pricing (currently Vector, Forma). One accent-filled pill carries the headline GBP price - the same pill shape used elsewhere on the site (filter-tab, category-badge, footer-cert) - with the USD/EUR equivalents as smaller outlined "alt" pills alongside it, so every currency reads as a distinct chip rather than the primary price plus a wall of plain text. Used on site.css-loaded pages (home, catalogue) as well as app-page.css pages (Vector/Forma) via the .price-pill-lg / .price-pill-alt-lg modifiers there. */ .price-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .price-pill { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%); color: #ffffff; font-size: 13px; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 4px 12px rgba(21, 94, 117, 0.22); } /* Secondary currency pills (USD, EUR) - same shape as .price-pill, lighter treatment so the primary GBP price still reads first. */ .price-pill-alt { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--accent-dark); font-size: 12px; font-weight: 700; white-space: nowrap; } .price-detail { font-size: 12px; font-weight: 600; color: var(--muted); } /* Used as the direct container instead of a

, on purpose - it sidesteps the `.app-card p { flex: 1 0 auto }` / `.catalogue-card p { flex: 1 0 auto }` baseline-alignment rule entirely rather than needing an !important override to opt back out of it. */ .app-card-price { margin: -14px 0 20px; } .app-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; /* Keeps "Learn more" at the same baseline across cards regardless of whether a card also has a download icon button next to it - e.g. the ghost card, which only has the link. */ min-height: 30px; } .app-card .btn { padding: 11px 20px; font-size: 14px; } .app-card-download { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); color: var(--accent); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .app-card-download svg { width: 15px; height: 15px; } .app-card-download:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; transform: translateY(-1px); } .app-card .learn-more { display: inline-block; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 700; } .app-card .learn-more:hover { color: var(--accent-dark); } .app-card-ghost { background: transparent; border: 1.5px dashed var(--border); box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 220px; } .app-card-ghost:hover { transform: none; box-shadow: none; } .app-card-ghost::before { display: none; } .app-card-ghost .app-icon { background: #ffffff; border: 1.5px dashed var(--border); color: var(--muted); box-shadow: none; } /* A small mosaic standing in for "lots of different apps" - not literal icons for each one, just a loose, colourful grid that reads as variety at a glance. Colours reuse hues already used elsewhere on the site (browser-chrome dots, accent teal) so it doesn't feel bolted on. */ .app-swatches { display: grid; grid-template-columns: repeat(4, 16px); grid-auto-rows: 16px; gap: 6px; margin-bottom: 18px; } .app-swatches span { display: block; border-radius: 5px; } .app-swatches span:nth-child(1) { background: var(--accent); transform: rotate(-4deg); } .app-swatches span:nth-child(2) { background: #e8c27a; transform: rotate(3deg); } .app-swatches span:nth-child(3) { background: var(--accent-light); transform: rotate(-2deg); } .app-swatches span:nth-child(4) { background: #e8877a; transform: rotate(2deg); } .app-swatches span:nth-child(5) { background: var(--accent-dark); transform: rotate(-3deg); } .app-swatches span:nth-child(6) { background: #8fc28d; transform: rotate(4deg); } .app-swatches span:nth-child(7) { background: #8ba7e8; transform: rotate(-2deg); } .app-swatches span:nth-child(8) { background: #b98fe0; transform: rotate(3deg); } .app-swatches span:nth-child(9) { background: #e8c27a; transform: rotate(-3deg); } .app-swatches span:nth-child(10) { background: var(--accent-dark); transform: rotate(2deg); } .app-swatches span:nth-child(11) { background: #e8877a; transform: rotate(-2deg); } .app-swatches span:nth-child(12) { background: var(--accent); transform: rotate(4deg); } .app-swatches span:nth-child(13) { background: #8ba7e8; transform: rotate(-4deg); } .app-swatches span:nth-child(14) { background: #b98fe0; transform: rotate(2deg); } .app-swatches span:nth-child(15) { background: #8fc28d; transform: rotate(-3deg); } .app-swatch-more { background: none !important; border: 1.5px dashed var(--border); transform: none !important; } .app-card-ghost h3 { color: var(--muted); font-weight: 700; font-size: 16px; } .app-card-ghost p { margin: 0; color: var(--muted); font-size: 13px; } /* ---- Why one account ---- */ .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; } .value-card { padding: 4px 0; } .value-card .value-icon { width: 38px; height: 38px; border-radius: 9px; background: #ffffff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); } .value-card .value-icon svg { width: 18px; height: 18px; color: var(--accent); } .value-card h3 { font-size: 17px; font-weight: 760; color: var(--ink); margin: 0 0 8px; } .value-card p { margin: 0; color: var(--body-text); font-size: 15px; line-height: 1.6; } .value-panel { background: var(--panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* ---- Footer ---- */ footer.site-footer { padding: 44px 0 52px; background: var(--panel); border-top: 1px solid var(--border); } footer.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } footer.site-footer p { margin: 0; color: var(--muted); font-size: 13px; } footer.site-footer a { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 700; } footer.site-footer a:hover { color: var(--accent-dark); } footer.site-footer .footer-right { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; /* justify-content: space-between on the parent only pushes this group right while it shares a row with the copyright text - once the row wraps (narrower viewport, or the copyright text getting longer), a lone flex item on its own line falls back to flex-start instead of staying right-aligned. margin-left: auto keeps it flush right on its own line too. */ margin-left: auto; } .footer-cert { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #ffffff; border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; } .footer-cert svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; } /* Icon button matching .social-links a exactly (same 32px square, same hover treatment) - a pill with "Privacy Policy" text kept wrapping onto its own row and pushing the social icons down whenever the copyright text + link got too long for one line, and even once fixed, an icon reads as "one more icon in the row" rather than a mismatched label. */ .footer-privacy-pill { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: #ffffff; border: 1px solid var(--border); color: var(--muted); transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .footer-privacy-pill:hover { color: var(--accent); border-color: var(--accent-light); transform: translateY(-2px); } .footer-privacy-pill svg { width: 16px; height: 16px; } .social-links { display: flex; align-items: center; gap: 12px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: #ffffff; border: 1px solid var(--border); color: var(--muted); transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .social-links a:hover { color: var(--accent); border-color: var(--accent-light); transform: translateY(-2px); } .social-links svg { width: 16px; height: 16px; } /* ---- Mobile ---- */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero-grid .hero-copy { text-align: center; } .hero-grid .hero-badge { margin-left: auto; margin-right: auto; } .hero-grid .hero-actions { justify-content: center; } .hero-grid .lede { margin-left: auto; margin-right: auto; } .hero-diagram-card { max-width: 360px; margin: 0 auto; } } @media (max-width: 640px) { .wrap { padding: 0 18px; } .site-header .wrap { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 14px; padding-bottom: 14px; } nav.site-nav { flex-wrap: wrap; gap: 4px 18px; width: 100%; } nav.site-nav a { display: inline-block; padding: 8px 0; } section { padding: 44px 0; } .hero { padding: 56px 0 44px; } .hero h1 { font-size: 32px; } .hero p.lede { font-size: 16px; } .hero-actions, .app-hero .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn, .app-hero .hero-actions .btn { text-align: center; } section h2 { font-size: 25px; } .apps-grid, .value-grid, .feature-grid { grid-template-columns: 1fr; } .app-card, .value-card { padding: 24px; } footer.site-footer .wrap { flex-direction: column; align-items: flex-start; text-align: left; } .app-card .btn { display: block; text-align: center; } .app-card .learn-more { display: block; margin: 12px 0 0; text-align: center; } } @media (max-width: 400px) { .hero h1 { font-size: 28px; } }