/*! * Swala SMS marketing site. * * Mobile-first and deliberately restrained: one accent colour, hairline * borders, flat surfaces and a single type scale. Every rule starts at the * small screen and widens through min-width queries, so the phone layout is * designed rather than a squeezed desktop. * * Hand-authored because the panel's compiled CSS is a pre-built vendor bundle; * a utility framework here would need a build step that overwrites it. */ /* ---------------------------------------------------------------- tokens -- */ :root { --radius: 8px; --radius-lg: 12px; --shell: 1120px; --gutter: 1.25rem; --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --bg: #ffffff; --bg-alt: #fafafb; --surface: #ffffff; --fg: #101114; --fg-muted: #5b5f66; --border: #e6e7ea; --accent: #127a64; --accent-soft: #eaf5f1; --on-accent: #ffffff; --accent-hover: #0b5f4d; --tab-active: #ffffff; --ok-fg: #0f7250; --ok-bg: #e9f6f1; --warn-fg: #8a5300; --warn-bg: #fdf3e4; --err-fg: #b3261e; --err-bg: #fdecea; color-scheme: light; } @media (min-width: 640px) { :root { --gutter: 2rem; } } @media (min-width: 1024px) { :root { --gutter: 2.5rem; } } /* * Theme resolution: follow the operating system unless the visitor has picked * a side, in which case data-theme on wins in both directions. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0c0e; --bg-alt: #121316; --surface: #0b0c0e; --fg: #f2f3f5; --fg-muted: #9ea3ab; --border: #24262b; --accent: #7bc8b6; --accent-soft: #10231f; --on-accent: #0b0c0e; --accent-hover: #a7ddcf; --tab-active: #24262b; --ok-fg: #4ade80; --ok-bg: #10231b; --warn-fg: #fbbf24; --warn-bg: #241c0d; --err-fg: #fca5a5; --err-bg: #2a1414; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0b0c0e; --bg-alt: #121316; --surface: #0b0c0e; --fg: #f2f3f5; --fg-muted: #9ea3ab; --border: #24262b; --accent: #7bc8b6; --accent-soft: #10231f; --on-accent: #0b0c0e; --accent-hover: #a7ddcf; --tab-active: #24262b; --ok-fg: #4ade80; --ok-bg: #10231b; --warn-fg: #fbbf24; --warn-bg: #241c0d; --err-fg: #fca5a5; --err-bg: #2a1414; color-scheme: dark; } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; max-width: 100%; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; max-width: 100%; overflow-x: hidden; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } main, section, .card, .section-head, .classic-hero, .footer, .nav { min-width: 0; } p, h1, h2, h3, h4, a, li, .btn, .tag, .status { overflow-wrap: anywhere; } img, svg, video, iframe { max-width: 100%; display: block; } img, video { height: auto; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.02em; font-weight: 640; color: var(--fg); text-wrap: balance; } /* One tight scale, sized for a phone first and nudged up from there. */ h1 { font-size: 1.95rem; letter-spacing: -.03em; } h2 { font-size: 1.5rem; } h3 { font-size: 1.0625rem; } h4 { font-size: .9375rem; } @media (min-width: 640px) { h1 { font-size: 2.5rem; } h2 { font-size: 1.75rem; } } @media (min-width: 1024px) { h1 { font-size: 3.125rem; } h2 { font-size: 2rem; } h3 { font-size: 1.125rem; } } p { margin: 0 0 1rem; color: var(--fg-muted); text-wrap: pretty; } p:last-child { margin-bottom: 0; } .lead { font-size: 1rem; line-height: 1.6; color: var(--fg-muted); } @media (min-width: 640px) { .lead { font-size: 1.0625rem; } } code { font-family: var(--mono); font-size: .875em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: .75rem 1rem; background: var(--fg); color: var(--bg); } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------- layout --- */ .shell { width: 100%; max-width: var(--shell); min-width: 0; margin-inline: auto; padding-inline: var(--gutter); } .shell-narrow { max-width: 44rem; } .band { padding-block: 3rem; } .band-tight { padding-block: 2rem; } .band-alt { background: var(--bg-alt); } .band-dark { background: #0b0c0e; color: #f2f3f5; } .band-dark h1, .band-dark h2, .band-dark h3 { color: #fff; } .band-dark p, .band-dark .lead { color: #a1a5ad; } .band-dark a { color: #c7d2fe; } @media (min-width: 640px) { .band { padding-block: 4.5rem; } .band-tight { padding-block: 3rem; } } @media (min-width: 1024px) { .band { padding-block: 6rem; } } /* Single column by default. Extra columns are earned, not assumed. */ .grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); min-width: 0; } .grid > * { min-width: 0; } @media (min-width: 760px) { .grid { gap: 1.25rem; } .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1120px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .split { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { .split { gap: 3rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } } .split-top { align-items: start; } .section-head { max-width: 42rem; margin-bottom: 2rem; } .section-head.centred { margin-inline: auto; text-align: center; } .section-head > :last-child { margin-bottom: 0; } @media (min-width: 640px) { .section-head { margin-bottom: 2.5rem; } } .eyebrow { display: inline-block; margin-bottom: .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .eyebrow:hover { text-decoration: none; } .band-dark .eyebrow { color: #a5b4fc; } /* ------------------------------------------------------------ utilities -- */ .u-centre { text-align: center; } .u-mt { margin-top: 1rem; } .u-mt-lg { margin-top: 2rem; } .u-mb-0 { margin-bottom: 0; } .u-mb { margin-bottom: 1rem; } .u-muted { color: var(--fg-muted); } .u-fg { color: var(--fg); } .u-sm { font-size: .875rem; } .u-xs { font-size: .8125rem; } .u-measure { max-width: 34ch; } .inline-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .stack { display: grid; gap: .75rem; } /* --------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6875rem 1.125rem; border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-size: .9375rem; font-weight: 550; line-height: 1.2; cursor: pointer; text-align: center; max-width: 100%; white-space: normal; transition: background .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); } .btn-ghost { border-color: var(--border); color: var(--fg); background: transparent; } .btn-ghost:hover { border-color: var(--fg-muted); color: var(--fg); } .btn-light { background: #fff; color: #101114; } .btn-light:hover { background: #e6e7ea; color: #101114; } .btn-on-dark { background: transparent; border-color: #3a3d44; color: #f2f3f5; } .btn-on-dark:hover { border-color: #6b7078; color: #fff; } .btn-lg { padding: .8125rem 1.375rem; font-size: 1rem; } .btn-block { width: 100%; } /* Full-width on a phone: side-by-side pills wrap into a mess at 360px. */ .btn-row { display: grid; gap: .625rem; } .btn-row .btn { width: 100%; } @media (min-width: 480px) { .btn-row { display: flex; flex-wrap: wrap; } .btn-row .btn { width: auto; } .btn-row.centred { justify-content: center; } } /* ----------------------------------------------------------------- cards -- */ .card { position: relative; min-width: 0; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color .15s ease; } .card-hover:hover { border-color: var(--fg-muted); } .card > :last-child { margin-bottom: 0; } @media (min-width: 640px) { .card { padding: 1.5rem; } } .band-dark .card { background: #121316; border-color: #24262b; } .icon-tile { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .875rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); } .icon-tile svg { width: 18px; height: 18px; } .band-dark .icon-tile { background: #1a1c2e; color: #a5b4fc; } /* ------------------------------------------------------------------ hero -- */ .hero { padding-block: 2.5rem 3rem; } @media (min-width: 640px) { .hero { padding-block: 3rem 3.5rem; } } @media (min-width: 1024px) { .hero { padding-block: 4rem 4.5rem; } } .hero h1 { margin-bottom: .75rem; } .classic-hero { max-width: 48rem; margin-inline: auto; text-align: center; } .classic-hero .lead { max-width: 42rem; margin-inline: auto; margin-bottom: 1.5rem; } .hero-points { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .5rem; } .hero-points li { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: .5rem; align-items: start; color: var(--fg-muted); font-size: .9375rem; } .hero-points svg { width: 1.125rem; height: 1.125rem; margin-top: .18rem; color: var(--accent); } .band-dark .hero-points li { color: #a1a5ad; } .band-dark .hero-points svg { color: #a5b4fc; } .trust { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .trust p { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .625rem; } .trust ul { display: flex; flex-wrap: wrap; gap: .375rem .875rem; list-style: none; margin: 0; padding: 0; } .trust li { font-size: .875rem; color: var(--fg-muted); } /* ------------------------------------------------------- product preview -- */ .preview { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .preview-bar { padding: .625rem .875rem; border-bottom: 1px solid var(--border); background: var(--bg-alt); font-family: var(--mono); font-size: .75rem; color: var(--fg-muted); } .preview-body { padding: .875rem; display: grid; gap: .5rem; } .preview-figure { padding: .875rem; border-radius: var(--radius); background: var(--bg-alt); } .preview-figure b { display: block; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.1; } .preview-figure span { font-size: .8125rem; color: var(--fg-muted); } .preview-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem .875rem; border: 1px solid var(--border); border-radius: var(--radius); } .preview-row strong { display: block; font-size: .875rem; font-weight: 560; } .preview-row small { display: block; font-size: .75rem; color: var(--fg-muted); } .tag { display: inline-block; padding: .1875rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; white-space: nowrap; } .tag-ok { background: var(--ok-bg); color: var(--ok-fg); } .tag-wait { background: var(--warn-bg); color: var(--warn-fg); } /* ----------------------------------------------------------------- stats -- */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; } @media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat b { display: block; font-size: 1.625rem; line-height: 1.1; letter-spacing: -.03em; color: var(--fg); } .stat strong { display: block; margin: .375rem 0 .125rem; font-size: .875rem; font-weight: 560; } .stat span { font-size: .8125rem; color: var(--fg-muted); } @media (min-width: 640px) { .stat b { font-size: 2rem; } } /* --------------------------------------------------------------- pricing -- */ .price-card { display: flex; flex-direction: column; } .price-card.featured { border-color: var(--accent); } .price-badge { position: absolute; top: -.6875rem; left: 1.25rem; padding: .1875rem .5rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .6875rem; font-weight: 600; } .price-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: .375rem; margin: .875rem 0 .25rem; } .price-amount b { font-size: 1.75rem; letter-spacing: -.03em; line-height: 1.1; } .price-amount span { font-size: .875rem; color: var(--fg-muted); } .price-rate { display: inline-block; margin-bottom: 1rem; font-size: .8125rem; color: var(--ok-fg); font-weight: 550; } .tick-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; } .tick-list li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .5rem; align-items: start; font-size: .875rem; color: var(--fg-muted); } .tick-list svg { width: 1rem; height: 1rem; margin-top: .2rem; color: var(--accent); } .price-card .btn { margin-top: auto; width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: .875rem; } /* Segmented controls scroll sideways on a phone instead of wrapping. */ .segmented { display: flex; gap: .25rem; padding: .25rem; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: 999px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .segmented::-webkit-scrollbar { display: none; } .segmented.centred { width: fit-content; max-width: 100%; margin-inline: auto; } .segmented a, .segmented button { flex: none; padding: .4375rem .875rem; border: 0; border-radius: 999px; background: transparent; color: var(--fg-muted); font: inherit; font-size: .875rem; font-weight: 550; cursor: pointer; white-space: nowrap; } .segmented a:hover, .segmented button:hover { color: var(--fg); text-decoration: none; } .segmented a[aria-current="true"], .segmented button[aria-pressed="true"] { background: var(--fg); color: var(--bg); } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); -webkit-overflow-scrolling: touch; } table.compare { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: .875rem; } table.compare th, table.compare td { padding: .75rem .875rem; text-align: left; border-bottom: 1px solid var(--border); } table.compare thead th { background: var(--bg-alt); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); font-weight: 600; } table.compare tbody tr:last-child td, table.compare tbody tr:last-child th { border-bottom: 0; } table.compare td.mark { text-align: center; } table.compare svg { width: 1rem; height: 1rem; color: var(--accent); display: inline-block; } /* -------------------------------------------------------------- coverage -- */ .country-card { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .875rem; align-items: start; } .flag { font-size: 1.5rem; line-height: 1.2; } .net-list { display: flex; flex-wrap: wrap; gap: .375rem; margin: .75rem 0 0; padding: 0; list-style: none; } .net-list li { padding: .1875rem .5rem; border-radius: 999px; background: var(--bg-alt); font-size: .75rem; color: var(--fg-muted); } .status { display: inline-block; padding: .1875rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; white-space: nowrap; } .status-live { background: var(--ok-bg); color: var(--ok-fg); } .status-wait { background: var(--warn-bg); color: var(--warn-fg); } .status-plan { background: var(--bg-alt); color: var(--fg-muted); } .market-marquee { position: relative; width: 100%; max-width: 48rem; margin-inline: auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } .market-track { display: flex; width: max-content; gap: .75rem; animation: market-scroll 26s linear infinite; } .market-marquee:hover .market-track { animation-play-state: paused; } .market-pill { flex: none; display: inline-flex; align-items: center; gap: .625rem; min-width: 10rem; justify-content: center; padding: .75rem 1rem; border: 1px solid #24262b; border-radius: var(--radius-lg); background: #121316; color: #f2f3f5; } .market-pill:hover { text-decoration: none; border-color: #6b7078; color: #fff; } .market-pill strong { font-size: .9375rem; font-weight: 560; } @keyframes market-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - .375rem)); } } @media (prefers-reduced-motion: reduce) { .market-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .market-track { animation: none; } } /* ------------------------------------------------------------------ form -- */ .field { display: grid; gap: .3125rem; margin-bottom: .875rem; } .field label { font-size: .875rem; font-weight: 550; color: var(--fg); } .field input, .field select, .field textarea { width: 100%; padding: .6875rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; /* 16px minimum, or iOS Safari zooms the whole page on focus. */ font-size: 1rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .field .hint { font-size: .8125rem; color: var(--fg-muted); } .field .err { font-size: .8125rem; color: var(--err-fg); } .form-grid { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 560px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .band-dark .field label { color: #f2f3f5; } .band-dark .field input, .band-dark .field select { background: #121316; border-color: #24262b; color: #f2f3f5; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .notice { padding: .75rem .875rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .875rem; } .notice-ok { background: var(--ok-bg); color: var(--ok-fg); } .notice-err { background: var(--err-bg); color: var(--err-fg); } /* ------------------------------------------------------------------- faq -- */ .faq { border-bottom: 1px solid var(--border); } .faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; font-weight: 550; font-size: .9375rem; color: var(--fg); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; flex: none; width: .5rem; height: .5rem; margin-top: .375rem; border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted); transform: rotate(45deg); transition: transform .18s ease; } .faq[open] summary::after { transform: rotate(-135deg); } .faq .faq-body { padding-bottom: 1rem; font-size: .9375rem; } /* ------------------------------------------------------------------ code -- */ .code-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt); } .code-tabs { display: flex; gap: .125rem; padding: .375rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .code-tabs::-webkit-scrollbar { display: none; } .code-tabs button { flex: none; padding: .375rem .75rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--fg-muted); font: inherit; font-size: .8125rem; font-weight: 550; cursor: pointer; white-space: nowrap; } .code-tabs button[aria-selected="true"] { background: var(--tab-active); color: var(--fg); } .code-card pre { margin: 0; padding: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: var(--mono); font-size: .75rem; line-height: 1.65; color: var(--fg); tab-size: 2; } @media (min-width: 640px) { .code-card pre { font-size: .8125rem; } } .code-card pre .k { color: var(--accent); } .code-card pre .s { color: var(--ok-fg); } .code-card pre .c { color: var(--fg-muted); font-style: italic; } /* ------------------------------------------------------------------ blog -- */ .post-card { display: flex; flex-direction: column; height: 100%; } .post-card .cat { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); } .post-card h3 { margin: .5rem 0 .375rem; } .post-card h3 a { color: var(--fg); } .post-meta { margin-top: auto; padding-top: .875rem; font-size: .8125rem; color: var(--fg-muted); display: flex; flex-wrap: wrap; gap: .375rem; } .prose { max-width: 40rem; } .prose h2 { margin-top: 2rem; font-size: 1.25rem; } .prose h3 { margin-top: 1.5rem; font-size: 1.0625rem; } .prose p, .prose li { color: var(--fg-muted); font-size: 1rem; line-height: 1.7; } .prose ul, .prose ol { padding-left: 1.125rem; margin-bottom: 1rem; } .prose li { margin-bottom: .375rem; } .prose blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 2px solid var(--border); color: var(--fg); } .prose code { padding: .0625rem .25rem; border-radius: 3px; background: var(--bg-alt); } .prose pre { padding: 1rem; border-radius: var(--radius); background: var(--bg-alt); overflow-x: auto; font-size: .8125rem; } .prose pre code { background: none; padding: 0; } .pagination { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; margin: 2rem 0 0; padding: 0; list-style: none; } .pagination a, .pagination span { display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: .875rem; color: var(--fg-muted); } .pagination a:hover { border-color: var(--fg-muted); color: var(--fg); text-decoration: none; } .pagination .active span { background: var(--fg); border-color: var(--fg); color: var(--bg); } .pagination .disabled span { opacity: .4; } /* ----------------------------------------------------------- breadcrumbs -- */ .crumbs { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .8125rem; color: var(--fg-muted); } .crumbs li::after { content: '/'; margin-left: .375rem; opacity: .45; } .crumbs li:last-child::after { content: ''; } .crumbs a { color: var(--fg-muted); } /* ------------------------------------------------------------------- nav -- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid transparent; } .nav.stuck { border-bottom-color: var(--border); } /* Brand, links and actions are all children of one flex row. On a phone the links wrap to their own full-width line; from 900px they join the row. */ .nav-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-height: 3.5rem; } .brand { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; font-weight: 640; font-size: 1rem; color: var(--fg); letter-spacing: -.02em; } .brand:hover { text-decoration: none; } .brand-mark { display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 6px; background: var(--accent); color: var(--on-accent); } .brand-mark svg { width: 15px; height: 15px; } .nav-bar-actions { display: flex; align-items: center; gap: .25rem; } .nav-toggle, .theme-toggle { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--fg-muted); cursor: pointer; } .theme-toggle { border-color: var(--border); } .nav-toggle:hover, .theme-toggle:hover { color: var(--fg); border-color: var(--fg-muted); } .nav-toggle svg { width: 20px; height: 20px; } .theme-toggle svg { width: 17px; height: 17px; } /* Only the icon for the theme you would switch *to* is shown. */ .theme-icon { display: none; } .theme-icon-moon { display: grid; } :root[data-theme="dark"] .theme-icon-moon { display: none; } :root[data-theme="dark"] .theme-icon-sun { display: grid; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-icon-moon { display: none; } :root:not([data-theme="light"]) .theme-icon-sun { display: grid; } } .nav-panel { display: none; order: 3; width: 100%; padding: .25rem 0 1rem; border-top: 1px solid var(--border); } .nav.open .nav-panel { display: block; } .nav-links { display: grid; gap: .125rem; margin: 0 0 1rem; padding: 0; list-style: none; } .nav-links a { display: block; padding: .625rem .25rem; color: var(--fg); font-size: .9375rem; font-weight: 500; } .nav-links a:hover { text-decoration: none; color: var(--accent); } .nav-links a[aria-current="page"] { color: var(--accent); } .nav-cta { display: grid; gap: .5rem; } @media (min-width: 900px) { .nav-row { flex-wrap: nowrap; gap: 1.5rem; min-height: 3.75rem; } .nav-toggle { display: none; } .nav-panel { display: flex !important; order: 0; width: auto; align-items: center; gap: 1.5rem; padding: 0; border: 0; } .nav-links { display: flex; align-items: center; gap: .25rem; margin: 0; } .nav-links a { padding: .375rem .625rem; color: var(--fg-muted); font-size: .875rem; border-radius: var(--radius); } .nav-cta { display: flex; align-items: center; gap: .5rem; } .nav-cta .btn { padding: .5rem .875rem; font-size: .875rem; } } /* ---------------------------------------------------------------- footer -- */ .footer { border-top: 1px solid var(--border); padding-block: 2.5rem 1.5rem; } .footer-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); } .footer-lead { grid-column: 1 / -1; } @media (min-width: 520px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); } .footer-lead { grid-column: auto; } } .footer h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-muted); font-weight: 600; margin-bottom: .75rem; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .footer a { color: var(--fg-muted); font-size: .875rem; } .footer a:hover { color: var(--fg); } .footer-base { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); display: grid; gap: .5rem; font-size: .8125rem; color: var(--fg-muted); } @media (min-width: 720px) { .footer-base { display: flex; justify-content: space-between; gap: 1.5rem; } } /* ---------------------------------------------------------------- reveal -- */ [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; } [data-reveal].shown { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } } /* A card's own heading: matched to body scale so it does not shout. */ .h-card { font-size: 1.0625rem; margin-bottom: .5rem; } /* An article byline sits under the intro, separated from the body. */ .article-meta { margin: 0 0 1.5rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--border); } /* A card whose content reaches the edges: maps, embeds, media. */ .card-flush { padding: 0; overflow: hidden; } .card-flush iframe { border: 0; } /* The band immediately under the header needs far less breathing room above it: the header already provides the separation. */ main > section:first-child { padding-top: 1.25rem; } @media (min-width: 640px) { main > section:first-child { padding-top: 1.75rem; } } /* Do not repeat the route/page name above the primary page heading. */ main > section:first-child .eyebrow { display: none; } /* Pricing is a decision page, so keep the scan path tight and uninterrupted. */ .pricing-band.band, .coverage-band.band, .developer-band.band, .about-band.band, .feature-band.band, .contact-band.band, .home-band.band { padding-block: 2rem; } .pricing-band.band-tight, .coverage-band.band-tight, .developer-band.band-tight, .about-band.band-tight, .feature-band.band-tight, .contact-band.band-tight, .home-band.band-tight { padding-block: 1.5rem; } .pricing-band .band, .coverage-band .band, .developer-band .band, .about-band .band, .feature-band .band, .contact-band .band, .home-band .band { padding-block: 2rem; } .pricing-band .section-head { margin-bottom: 1.25rem; } @media (min-width: 640px) { .pricing-band.band, .coverage-band.band, .developer-band.band, .about-band.band, .feature-band.band, .contact-band.band, .home-band.band { padding-block: 2.75rem; } .pricing-band.band-tight, .coverage-band.band-tight, .developer-band.band-tight, .about-band.band-tight, .feature-band.band-tight, .contact-band.band-tight, .home-band.band-tight { padding-block: 2rem; } .pricing-band .band, .coverage-band .band, .developer-band .band, .about-band .band, .feature-band .band, .contact-band .band, .home-band .band { padding-block: 2.75rem; } } @media (min-width: 1024px) { .pricing-band.band { padding-block: 2.75rem; } .coverage-band.band, .developer-band.band, .about-band.band, .feature-band.band, .contact-band.band, .home-band.band { padding-block: 3.25rem; } .pricing-band.band-tight { padding-block: 2rem; } .coverage-band.band-tight, .developer-band.band-tight, .about-band.band-tight, .feature-band.band-tight, .contact-band.band-tight, .home-band.band-tight { padding-block: 2.25rem; } .pricing-band .band { padding-block: 2.75rem; } .coverage-band .band, .developer-band .band, .about-band .band, .feature-band .band, .contact-band .band, .home-band .band { padding-block: 3.25rem; } }