/* * SealShare website theme. * * The site looks like the app: Material 3 Expressive as Livewire Material 2.1 draws it, written by hand * in plain CSS, because the site has no build step. The tokens carry the app's names (--md-sys-*) and * its values, copied here rather than imported, so nothing loads from another host: * * - Colour roles from the indigo profile in resources/css/material-scheme.json (seed #4f46e5, * Vibrant, Material 3 spec 2025): profiles.indigo.light and .dark at standard contrast, and * profiles.indigo.contrast.high.light and .dark for visitors whose system asks for more contrast * (prefers-contrast: more). The medium contrast level is not used. Only the roles the site draws * with are copied; copy them again when indigo is regenerated differently. The site does not * follow the colour profile an admin chooses. * - Shape, elevation, motion, state, type and spacing from Livewire Material's token files * (vendor/nonameweb/livewire-material/resources/css/tokens/), only the tokens used below. * * Light or dark is , written before the first paint by the inline script in each * page's from the visitor's choice in the nav (Light, Dark or System, remembered in * localStorage). Without JavaScript the attribute is absent and the system setting decides. * * Widths are M3's window size classes: compact below 600px, medium from 600px, expanded from 840px, * large from 1200px. * * Shared by index.html and privacy.html. */ /* Google Sans Flex, the app's typeface, served from this site (SIL OFL 1.1, fonts/OFL.txt) — not from Google, which would hand every visitor's IP address to Google. The same cut the app ships: Latin and Latin Extended, weight 400–700. */ @font-face { font-family: 'Google Sans Flex'; src: url('../fonts/GoogleSansFlex-Latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ---------------------------------------------------------------- tokens */ :root { color-scheme: light; /* Colour: indigo, light, standard contrast (profiles.indigo.light). */ --md-sys-color-surface: #faf4ff; --md-sys-color-surface-container-low: #f5eeff; --md-sys-color-surface-container: #ede4ff; --md-sys-color-surface-container-high: #e8deff; --md-sys-color-surface-container-highest: #e2d7ff; --md-sys-color-on-surface: #32294f; --md-sys-color-on-surface-variant: #5f557f; --md-sys-color-outline: #7b719c; --md-sys-color-outline-variant: #b2a6d5; --md-sys-color-primary: #4a3fe2; --md-sys-color-on-primary: #f4f1ff; --md-sys-color-primary-container: #9795ff; --md-sys-color-on-primary-container: #14007e; --md-sys-color-secondary: #6249b2; --md-sys-color-secondary-container: #d8caff; --md-sys-color-on-secondary-container: #4e339c; --md-sys-color-tertiary-container: #fd8bca; --md-sys-color-on-tertiary-container: #610244; --md-sys-color-success: #006943; --md-sys-color-shadow: #000000; /* Shape (tokens/shape.css). */ --md-sys-shape-corner-xs: 4px; --md-sys-shape-corner-sm: 8px; --md-sys-shape-corner-md: 12px; --md-sys-shape-corner-full: 9999px; /* Elevation (tokens/elevation.css). */ --md-sys-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); --md-sys-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); /* Motion (tokens/motion.css): Expressive springs sampled into linear(), each with its duration. */ --md-sys-motion-spatial-fast: linear(0, 0.0195, 0.0716, 0.1471, 0.2381, 0.3378, 0.4404, 0.5416, 0.6378, 0.7265, 0.806, 0.8754, 0.9342, 0.9826, 1.0211, 1.0503, 1.0713, 1.0849, 1.0924, 1.0948, 1.0931, 1.0882, 1.0812, 1.0726, 1.0632, 1.0534, 1.0438, 1.0347, 1.0263, 1.0187, 1.0121, 1.0064, 1.0018, 0.9981, 0.9953, 0.9933, 0.992, 0.9913, 0.991, 0.9912, 0.9916, 0.9923, 0.9931, 0.994, 0.9949, 0.9958, 0.9967, 0.9975, 1); --md-sys-motion-spatial-fast-duration: 350ms; --md-sys-motion-effects-fast: linear(0, 0.0163, 0.0576, 0.1147, 0.1807, 0.2507, 0.3214, 0.3902, 0.4558, 0.5172, 0.5737, 0.6253, 0.6718, 0.7136, 0.7508, 0.7837, 0.8128, 0.8383, 0.8606, 0.8801, 0.897, 0.9117, 0.9244, 0.9353, 0.9448, 0.9529, 0.9599, 0.9658, 0.9709, 0.9753, 0.979, 0.9822, 0.9849, 0.9872, 0.9892, 0.9909, 0.9923, 0.9935, 0.9945, 0.9954, 0.9961, 0.9967, 0.9972, 0.9977, 0.998, 0.9983, 0.9986, 0.9988, 1); --md-sys-motion-effects-fast-duration: 150ms; --md-sys-motion-effects-default: linear(0, 0.0124, 0.0446, 0.0902, 0.1443, 0.2032, 0.2642, 0.3253, 0.3849, 0.4422, 0.4963, 0.547, 0.594, 0.6372, 0.6768, 0.7127, 0.7452, 0.7745, 0.8009, 0.8244, 0.8454, 0.8641, 0.8807, 0.8954, 0.9084, 0.9199, 0.93, 0.9389, 0.9467, 0.9536, 0.9596, 0.9648, 0.9694, 0.9734, 0.9769, 0.98, 0.9826, 0.985, 0.987, 0.9887, 0.9902, 0.9916, 0.9927, 0.9937, 0.9946, 0.9953, 0.9959, 0.9965, 1); --md-sys-motion-effects-default-duration: 200ms; /* State (tokens/state.css). */ --md-sys-state-hover-state-layer-opacity: 0.08; --md-sys-state-focus-state-layer-opacity: 0.1; --md-sys-state-pressed-state-layer-opacity: 0.1; --md-sys-state-disabled-content-opacity: 0.38; --md-sys-state-disabled-container-opacity: 0.12; /* Type (tokens/type.css). */ --md-ref-typeface-brand: 'Google Sans Flex', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --md-ref-typeface-plain: var(--md-ref-typeface-brand); --md-ref-typeface-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --md-ref-typeface-weight-regular: 400; --md-ref-typeface-weight-medium: 500; --md-sys-typescale-display-lg: var(--md-ref-typeface-weight-regular) 3.5625rem/4rem var(--md-ref-typeface-brand); --md-sys-typescale-display-lg-tracking: -0.0125rem; --md-sys-typescale-display-md: var(--md-ref-typeface-weight-regular) 2.8125rem/3.25rem var(--md-ref-typeface-brand); --md-sys-typescale-display-md-tracking: 0rem; --md-sys-typescale-display-sm: var(--md-ref-typeface-weight-regular) 2.25rem/2.75rem var(--md-ref-typeface-brand); --md-sys-typescale-display-sm-tracking: 0rem; --md-sys-typescale-headline-lg: var(--md-ref-typeface-weight-regular) 2rem/2.5rem var(--md-ref-typeface-brand); --md-sys-typescale-headline-lg-tracking: 0rem; --md-sys-typescale-headline-md: var(--md-ref-typeface-weight-regular) 1.75rem/2.25rem var(--md-ref-typeface-brand); --md-sys-typescale-headline-md-tracking: 0rem; --md-sys-typescale-title-lg: var(--md-ref-typeface-weight-regular) 1.375rem/1.75rem var(--md-ref-typeface-brand); --md-sys-typescale-title-lg-tracking: 0rem; --md-sys-typescale-title-md: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain); --md-sys-typescale-title-md-tracking: 0.0125rem; --md-sys-typescale-title-sm: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain); --md-sys-typescale-title-sm-tracking: 0.00625rem; --md-sys-typescale-body-lg: var(--md-ref-typeface-weight-regular) 1rem/1.5rem var(--md-ref-typeface-plain); --md-sys-typescale-body-lg-tracking: 0.03125rem; --md-sys-typescale-body-md: var(--md-ref-typeface-weight-regular) 0.875rem/1.25rem var(--md-ref-typeface-plain); --md-sys-typescale-body-md-tracking: 0.0125rem; --md-sys-typescale-label-lg: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain); --md-sys-typescale-label-lg-tracking: 0.00625rem; /* Spacing (tokens/spacing.css). */ --md-sys-measurement-space25: 2px; --md-sys-measurement-space50: 4px; --md-sys-measurement-space75: 6px; --md-sys-measurement-space100: 8px; --md-sys-measurement-space200: 16px; --md-sys-measurement-space300: 24px; --md-sys-measurement-space400: 32px; --md-sys-measurement-space500: 40px; --md-sys-measurement-space600: 48px; --md-sys-measurement-space700: 56px; --md-sys-measurement-space800: 64px; --md-sys-measurement-space900: 72px; /* The site's own layout: M3's margins (16px compact, 24px from medium) and the page width. */ --site-margin: var(--md-sys-measurement-space200); --site-width: 1200px; --site-bar-height: var(--md-sys-measurement-space800); --site-section-space: var(--md-sys-measurement-space700); } /* Colour: indigo, dark, standard contrast (profiles.indigo.dark). */ :root[data-theme="dark"] { color-scheme: dark; --md-sys-color-surface: #10062d; --md-sys-color-surface-container-low: #160b36; --md-sys-color-surface-container: #1c113f; --md-sys-color-surface-container-high: #231649; --md-sys-color-surface-container-highest: #291c53; --md-sys-color-on-surface: #eae1ff; --md-sys-color-on-surface-variant: #b0a4d3; --md-sys-color-outline: #7a6f9b; --md-sys-color-outline-variant: #4b426a; --md-sys-color-primary: #a7a5ff; --md-sys-color-on-primary: #1c00a0; --md-sys-color-primary-container: #9795ff; --md-sys-color-on-primary-container: #14007e; --md-sys-color-secondary: #a98ffd; --md-sys-color-secondary-container: #4d329b; --md-sys-color-on-secondary-container: #d6c9ff; --md-sys-color-tertiary-container: #fa88c8; --md-sys-color-on-tertiary-container: #5e0042; --md-sys-color-success: #3bb27b; } /* Without JavaScript there is no data-theme, and the system decides: the same dark values. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --md-sys-color-surface: #10062d; --md-sys-color-surface-container-low: #160b36; --md-sys-color-surface-container: #1c113f; --md-sys-color-surface-container-high: #231649; --md-sys-color-surface-container-highest: #291c53; --md-sys-color-on-surface: #eae1ff; --md-sys-color-on-surface-variant: #b0a4d3; --md-sys-color-outline: #7a6f9b; --md-sys-color-outline-variant: #4b426a; --md-sys-color-primary: #a7a5ff; --md-sys-color-on-primary: #1c00a0; --md-sys-color-primary-container: #9795ff; --md-sys-color-on-primary-container: #14007e; --md-sys-color-secondary: #a98ffd; --md-sys-color-secondary-container: #4d329b; --md-sys-color-on-secondary-container: #d6c9ff; --md-sys-color-tertiary-container: #fa88c8; --md-sys-color-on-tertiary-container: #5e0042; --md-sys-color-success: #3bb27b; } } /* High contrast, when the system asks for more: profiles.indigo.contrast.high. Light first, which the dark selectors below outrank by specificity. */ @media (prefers-contrast: more) { :root { --md-sys-color-surface: #faf4ff; --md-sys-color-surface-container-low: #f5eeff; --md-sys-color-surface-container: #ede4ff; --md-sys-color-surface-container-high: #e8deff; --md-sys-color-surface-container-highest: #e2d7ff; --md-sys-color-on-surface: #000000; --md-sys-color-on-surface-variant: #22193f; --md-sys-color-outline: #433961; --md-sys-color-outline-variant: #524972; --md-sys-color-primary: #110075; --md-sys-color-on-primary: #d3d0ff; --md-sys-color-primary-container: #3c2ed5; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-secondary: #240069; --md-sys-color-secondary-container: #553ba4; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary-container: #882964; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-success: #002515; } :root[data-theme="dark"] { --md-sys-color-surface: #10062d; --md-sys-color-surface-container-low: #160b36; --md-sys-color-surface-container: #1c113f; --md-sys-color-surface-container-high: #231649; --md-sys-color-surface-container-highest: #291c53; --md-sys-color-on-surface: #ffffff; --md-sys-color-on-surface-variant: #eae1ff; --md-sys-color-outline: #beb2e2; --md-sys-color-outline-variant: #a99dcc; --md-sys-color-primary: #e6e2ff; --md-sys-color-on-primary: #1a0099; --md-sys-color-primary-container: #9b99ff; --md-sys-color-on-primary-container: #000000; --md-sys-color-secondary: #eae1ff; --md-sys-color-secondary-container: #ac93ff; --md-sys-color-on-secondary-container: #000000; --md-sys-color-tertiary-container: #fa88c8; --md-sys-color-on-tertiary-container: #000000; --md-sys-color-success: #89fcbf; } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme]) { --md-sys-color-surface: #10062d; --md-sys-color-surface-container-low: #160b36; --md-sys-color-surface-container: #1c113f; --md-sys-color-surface-container-high: #231649; --md-sys-color-surface-container-highest: #291c53; --md-sys-color-on-surface: #ffffff; --md-sys-color-on-surface-variant: #eae1ff; --md-sys-color-outline: #beb2e2; --md-sys-color-outline-variant: #a99dcc; --md-sys-color-primary: #e6e2ff; --md-sys-color-on-primary: #1a0099; --md-sys-color-primary-container: #9b99ff; --md-sys-color-on-primary-container: #000000; --md-sys-color-secondary: #eae1ff; --md-sys-color-secondary-container: #ac93ff; --md-sys-color-on-secondary-container: #000000; --md-sys-color-tertiary-container: #fa88c8; --md-sys-color-on-tertiary-container: #000000; --md-sys-color-success: #89fcbf; } } @media (width >= 600px) { :root { --site-margin: var(--md-sys-measurement-space300); --site-section-space: var(--md-sys-measurement-space900); } } @media (width >= 1200px) { :root { --site-section-space: calc(var(--md-sys-measurement-space600) * 2); } } /* Reduced motion zeroes every duration, so everything that moves through the tokens turns instant. */ @media (prefers-reduced-motion: reduce) { :root { --md-sys-motion-spatial-fast-duration: 0ms; --md-sys-motion-effects-fast-duration: 0ms; --md-sys-motion-effects-default-duration: 0ms; } } /* ---------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-bar-height) + var(--md-sys-measurement-space200)); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: var(--md-sys-color-primary); text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-offset: 0.15em; } /* M3's focus indicator: 3px in secondary, 2px out, for keyboard focus only. */ :focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } h1, h2, h3, p { margin: 0; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } code { font-family: var(--md-ref-typeface-mono); font-size: 0.9em; } .icon { width: 24px; height: 24px; flex-shrink: 0; fill: currentColor; } [hidden] { display: none !important; } /* The icon and shape sprite at the top of each page: symbols only, nothing drawn. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } a.skip-link { position: absolute; inset-block-start: var(--md-sys-measurement-space100); inset-inline-start: var(--md-sys-measurement-space100); z-index: 100; translate: 0 -200%; } a.skip-link:focus-visible { translate: 0 0; } .container { width: 100%; max-width: var(--site-width); margin-inline: auto; padding-inline: var(--site-margin); } /* ---------------------------------------------------------------- type */ /* The hero's line: display, larger as the window grows. */ .display { font: var(--md-sys-typescale-display-sm); letter-spacing: var(--md-sys-typescale-display-sm-tracking); } @media (width >= 600px) { .display { font: var(--md-sys-typescale-display-md); letter-spacing: var(--md-sys-typescale-display-md-tracking); } } @media (width >= 1200px) { .display { font: var(--md-sys-typescale-display-lg); letter-spacing: var(--md-sys-typescale-display-lg-tracking); } } /* Page and section titles. */ .headline { font: var(--md-sys-typescale-headline-md); letter-spacing: var(--md-sys-typescale-headline-md-tracking); } @media (width >= 600px) { .headline { font: var(--md-sys-typescale-headline-lg); letter-spacing: var(--md-sys-typescale-headline-lg-tracking); } } /* Card titles. */ .title { font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); } .lede { max-inline-size: 60ch; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); } /* A section's label above its title: an icon and a word on a tonal pill, not interactive. */ .eyebrow { display: inline-flex; justify-self: start; width: fit-content; align-items: center; gap: var(--md-sys-measurement-space100); padding-block: var(--md-sys-measurement-space75); padding-inline: calc(var(--md-sys-measurement-space100) + var(--md-sys-measurement-space50)) var(--md-sys-measurement-space200); border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); } .eyebrow .icon { width: 20px; height: 20px; } /* ---------------------------------------------------------------- interaction */ /* M3's state layer: the content colour over the element, 8% on hover, 10% on focus and press. */ .btn, .icon-btn, .nav__links a:not(.btn), .faq summary { position: relative; isolation: isolate; } .btn::before, .icon-btn::before, .nav__links a:not(.btn)::before, .faq summary::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } @media (hover: hover) { .btn:hover::before, .icon-btn:hover::before, .nav__links a:not(.btn):hover::before, .faq summary:hover::before { opacity: var(--md-sys-state-hover-state-layer-opacity); } } .btn:focus-visible::before, .icon-btn:focus-visible::before, .nav__links a:not(.btn):focus-visible::before, .faq summary:focus-visible::before { opacity: var(--md-sys-state-focus-state-layer-opacity); } .btn:active::before, .icon-btn:active::before, .nav__links a:not(.btn):active::before, .faq summary:active::before { opacity: var(--md-sys-state-pressed-state-layer-opacity); } /* M3's 48px minimum target around a control drawn smaller. */ .btn::after, .icon-btn::after, .nav__links a:not(.btn)::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: var(--md-sys-measurement-space600); min-height: var(--md-sys-measurement-space600); transform: translate(-50%, -50%); } /* ---------------------------------------------------------------- buttons */ /* M3 Expressive buttons. The default is the small size (40px, label-large); .btn--lg is the medium size (56px, title-medium) for the page's main calls to action. Round at rest, squarer while pressed, on the fast spatial spring; colours on the fast effects spring. */ .btn { --btn-height: 40px; --btn-padding: var(--md-sys-measurement-space200); --btn-icon: 20px; --btn-pressed: var(--md-sys-shape-corner-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--md-sys-measurement-space100); min-block-size: var(--btn-height); padding-inline: var(--btn-padding); border: 0; border-radius: calc(var(--btn-height) / 2); background-color: transparent; color: var(--md-sys-color-primary); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition-property: border-radius, background-color, color, box-shadow; transition-duration: var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast); } .btn:active { border-radius: var(--btn-pressed); } .btn .icon { width: var(--btn-icon); height: var(--btn-icon); } .btn--lg { --btn-height: 56px; --btn-padding: var(--md-sys-measurement-space300); --btn-icon: 24px; --btn-pressed: var(--md-sys-shape-corner-md); font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); } .btn--filled { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .btn--tonal { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .btn--outlined { border: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); } @media (hover: hover) { .btn--filled:hover, .btn--tonal:hover { box-shadow: var(--md-sys-elevation-1); } } .btn:is(:disabled, [aria-disabled="true"]) { box-shadow: none; color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); cursor: not-allowed; } .btn:is(.btn--filled, .btn--tonal):is(:disabled, [aria-disabled="true"]) { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent); } .btn:is(:disabled, [aria-disabled="true"])::before { display: none; } /* A standard icon button: 40px drawn, a 48px target, on-surface-variant. */ .icon-btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px; background-color: transparent; color: var(--md-sys-color-on-surface-variant); cursor: pointer; transition: border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast); } .icon-btn:active { border-radius: var(--md-sys-shape-corner-sm); } /* M3 Expressive's connected button group, the successor of segmented buttons: segments 2px apart, round outer corners and small inner ones, and the chosen segment (aria-pressed) fully round in secondary-container with a check. */ .button-group { display: inline-flex; gap: var(--md-sys-measurement-space25); } .button-group .btn { min-inline-size: var(--md-sys-measurement-space600); border-radius: var(--md-sys-shape-corner-sm); background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); } .button-group .btn:first-child { border-start-start-radius: calc(var(--btn-height) / 2); border-end-start-radius: calc(var(--btn-height) / 2); } .button-group .btn:last-child { border-start-end-radius: calc(var(--btn-height) / 2); border-end-end-radius: calc(var(--btn-height) / 2); } .button-group .btn:active { border-radius: var(--md-sys-shape-corner-xs); } .button-group .btn:first-child:active { border-radius: calc(var(--btn-height) / 2) var(--md-sys-shape-corner-xs) var(--md-sys-shape-corner-xs) calc(var(--btn-height) / 2); } .button-group .btn:last-child:active { border-radius: var(--md-sys-shape-corner-xs) calc(var(--btn-height) / 2) calc(var(--btn-height) / 2) var(--md-sys-shape-corner-xs); } .button-group .btn[aria-pressed="true"] { border-radius: calc(var(--btn-height) / 2); background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .button-group .btn .icon { display: none; } .button-group .btn[aria-pressed="true"] .icon { display: block; } /* ---------------------------------------------------------------- nav */ /* The top app bar: surface at rest, surface-container once the page scrolls under it. */ .nav { position: sticky; top: 0; z-index: 50; background-color: var(--md-sys-color-surface); transition: background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default); } .nav[data-scrolled] { background-color: var(--md-sys-color-surface-container); } .nav__bar { display: flex; align-items: center; gap: var(--md-sys-measurement-space100); min-height: var(--site-bar-height); } .brand { display: inline-flex; align-items: center; gap: var(--md-sys-measurement-space100); min-block-size: var(--md-sys-measurement-space600); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); text-decoration: none; } .brand svg { width: 32px; height: 32px; color: var(--md-sys-color-primary); } .nav__toggle { display: none; margin-inline-start: auto; color: var(--md-sys-color-on-surface); } .nav__toggle .icon-close { display: none; } .nav__toggle[aria-expanded="true"] .icon-menu { display: none; } .nav__toggle[aria-expanded="true"] .icon-close { display: block; } .nav__bar > nav { margin-inline-start: auto; } .nav__links { display: flex; align-items: center; gap: var(--md-sys-measurement-space50); margin: 0; padding: 0; list-style: none; } .nav__links a:not(.btn) { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: calc(var(--md-sys-measurement-space100) + var(--md-sys-measurement-space50)); border-radius: 20px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); text-decoration: none; } .nav__links .btn { margin-inline-start: var(--md-sys-measurement-space100); } /* Light, Dark or System. Without JavaScript there is nothing to switch, so it stays hidden. */ .theme-toggle { display: none; } :root[data-theme-choice] .theme-toggle { display: inline-flex; } .theme-toggle .icon { display: none; } :root[data-theme-choice="light"] .theme-toggle .icon-light-mode, :root[data-theme-choice="dark"] .theme-toggle .icon-dark-mode, :root[data-theme-choice="system"] .theme-toggle .icon-brightness-auto { display: block; } /* Below expanded, the links fold into a menu under the bar. */ @media (width < 840px) { .nav__toggle { display: inline-flex; } .nav__bar > nav { margin-inline-start: 0; } .nav__links { position: absolute; inset-block-start: 100%; inset-inline: var(--site-margin); display: none; flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--md-sys-measurement-space100); border-radius: var(--md-sys-shape-corner-xs); background-color: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-2); } .nav__links.is-open { display: flex; } .nav__links a:not(.btn) { min-block-size: var(--md-sys-measurement-space600); padding-inline: var(--md-sys-measurement-space200); border-radius: 0; color: var(--md-sys-color-on-surface); } .nav__links .btn { width: calc(100% - 2 * var(--md-sys-measurement-space200)); margin: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200) 0; } } /* ---------------------------------------------------------------- hero */ .hero { position: relative; overflow: clip; padding-block: var(--md-sys-measurement-space500) var(--md-sys-measurement-space700); } .hero__grid { display: grid; align-items: center; gap: var(--md-sys-measurement-space500); } .hero__copy { display: grid; gap: var(--md-sys-measurement-space300); justify-items: start; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space200); margin-block-start: var(--md-sys-measurement-space100); } .hero__facts { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space300); margin: var(--md-sys-measurement-space100) 0 0; padding: 0; list-style: none; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } .hero__facts li { display: inline-flex; align-items: center; gap: var(--md-sys-measurement-space75); } .hero__facts .icon { width: 20px; height: 20px; color: var(--md-sys-color-success); } .hero__visual { position: relative; padding-block-end: var(--md-sys-measurement-space500); } .hero__visual .device--phone { position: absolute; inset-inline-end: -2%; bottom: 0; width: 25%; } /* Two Expressive shapes behind the devices: decoration only. */ .hero__shape { position: absolute; z-index: -1; fill: currentColor; } .hero__shape--one { top: -8%; inset-inline-end: -6%; width: 46%; color: var(--md-sys-color-secondary-container); rotate: 12deg; } .hero__shape--two { bottom: -4%; inset-inline-start: -10%; width: 30%; color: var(--md-sys-color-surface-container-highest); } @media (width >= 600px) { .hero { padding-block: var(--md-sys-measurement-space800) var(--md-sys-measurement-space900); } } @media (width >= 840px) { .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--md-sys-measurement-space600); } .hero__visual { padding-block-end: var(--md-sys-measurement-space600); } } @media (width >= 1200px) { .hero { padding-block: calc(var(--md-sys-measurement-space600) * 2) calc(var(--md-sys-measurement-space700) * 2); } .hero__grid { gap: var(--md-sys-measurement-space900); } } /* ---------------------------------------------------------------- sections */ .section { padding-block: var(--site-section-space); overflow-x: clip; } .section--tint { background-color: var(--md-sys-color-surface-container-low); } .section__head { display: grid; gap: var(--md-sys-measurement-space200); max-width: 760px; margin-block-end: var(--md-sys-measurement-space400); } .section__head--center { margin-inline: auto; text-align: center; justify-items: center; } @media (width >= 600px) { .section__head { margin-block-end: var(--md-sys-measurement-space600); } } /* M3's outlined card: surface, an outline-variant edge, the medium corner, and no shape change. */ .reason, .step, .feature, .faq details, .contact, .table-scroll { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-md); background-color: var(--md-sys-color-surface); } /* "Why run your own": a statement beside four reasons. */ .why { display: grid; gap: var(--md-sys-measurement-space500); align-items: start; } .why__statement { display: grid; gap: var(--md-sys-measurement-space300); } .reasons { display: grid; gap: var(--md-sys-measurement-space200); } .reason { display: grid; gap: var(--md-sys-measurement-space200); align-content: start; padding: var(--md-sys-measurement-space300); } .reason p { color: var(--md-sys-color-on-surface-variant); } @media (width >= 600px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width >= 840px) { .why { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--md-sys-measurement-space600); } .why__statement { position: sticky; top: calc(var(--site-bar-height) + var(--md-sys-measurement-space400)); } } @media (width >= 1200px) { .why { gap: var(--md-sys-measurement-space900); } } /* An icon on an M3 Expressive shape. */ .badge-icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; color: var(--md-sys-color-on-primary-container); } .badge-icon > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--md-sys-color-primary-container); fill: currentColor; } .badge-icon .icon { position: relative; } .badge-icon--secondary { color: var(--md-sys-color-on-secondary-container); } .badge-icon--secondary > svg:first-child { color: var(--md-sys-color-secondary-container); } .badge-icon--tertiary { color: var(--md-sys-color-on-tertiary-container); } .badge-icon--tertiary > svg:first-child { color: var(--md-sys-color-tertiary-container); } /* How it works: three steps. */ .steps { display: grid; gap: var(--md-sys-measurement-space200); margin: 0; padding: 0; list-style: none; counter-reset: step; } .step { position: relative; display: grid; gap: var(--md-sys-measurement-space200); align-content: start; padding: var(--md-sys-measurement-space300); counter-increment: step; } /* The step's number, a decoration beside its title. */ .step::before { content: counter(step); position: absolute; inset-block-start: var(--md-sys-measurement-space300); inset-inline-end: var(--md-sys-measurement-space300); color: var(--md-sys-color-outline); font: var(--md-sys-typescale-display-md); letter-spacing: var(--md-sys-typescale-display-md-tracking); } .step p { color: var(--md-sys-color-on-surface-variant); } @media (width >= 840px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Features. */ .features { display: grid; gap: var(--md-sys-measurement-space200); } .feature { display: grid; grid-template-columns: auto 1fr; gap: var(--md-sys-measurement-space50) var(--md-sys-measurement-space200); align-content: start; padding: var(--md-sys-measurement-space300); } .feature .badge-icon { grid-row: span 2; width: 48px; height: 48px; } .feature h3 { align-self: end; font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); } .feature p { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } @media (width >= 600px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Three columns only from large: at expanded they leave too little room for the text. */ @media (width >= 1200px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------------------------------------------------------------- gallery */ .gallery__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300); margin-block-end: var(--md-sys-measurement-space500); } .gallery { display: grid; gap: var(--md-sys-measurement-space500) var(--md-sys-measurement-space400); margin: 0; padding: 0; list-style: none; } .gallery--phone { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--md-sys-measurement-space200); max-width: 1040px; margin-inline: auto; } .gallery[hidden] { display: none; } .shot { display: grid; gap: var(--md-sys-measurement-space200); margin: 0; } .shot figcaption { display: grid; gap: var(--md-sys-measurement-space25); text-align: center; } .shot figcaption strong { font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); } .shot figcaption span { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } @media (width >= 840px) { .gallery--desktop { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--md-sys-measurement-space600); } .gallery--phone { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--md-sys-measurement-space400); } } @media (width >= 1200px) { .gallery--desktop { column-gap: calc(var(--md-sys-measurement-space400) + var(--md-sys-measurement-space700)); } } /* ---------------------------------------------------------------- compare */ .compare { display: grid; gap: var(--md-sys-measurement-space600); } .compare__block { display: grid; gap: var(--md-sys-measurement-space200); } .compare__block h3 { font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); } .compare__block > p { color: var(--md-sys-color-on-surface-variant); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .compare table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } .compare caption { padding: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300); border-block-end: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); text-align: start; } .compare th, .compare td { padding: calc(var(--md-sys-measurement-space100) + var(--md-sys-measurement-space50)) var(--md-sys-measurement-space200); border-block-end: 1px solid var(--md-sys-color-outline-variant); text-align: start; vertical-align: top; } .compare tbody tr:last-child > * { border-block-end: 0; } .compare thead tr { background-color: var(--md-sys-color-surface); } .compare thead th { color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); white-space: nowrap; } .compare tbody th { position: sticky; inset-inline-start: 0; z-index: 1; min-width: 170px; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); } .compare thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 2; background-color: var(--md-sys-color-surface); } /* SealShare's own column: its heading in the secondary-container pair, its cells a tone up. */ .compare .is-us { background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); } .compare thead .is-us { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .compare__sources { display: grid; gap: var(--md-sys-measurement-space100); margin: 0; padding-inline-start: var(--md-sys-measurement-space300); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); overflow-wrap: anywhere; } .compare__note { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } /* The numbered notes under the tables read as one block. */ .compare__notes { display: grid; gap: var(--md-sys-measurement-space100); } .compare__notes sup, .compare td sup { line-height: 0; } /* ---------------------------------------------------------------- install */ .install { display: grid; gap: var(--md-sys-measurement-space500); align-items: start; } .install__copy { display: grid; gap: var(--md-sys-measurement-space300); justify-items: start; } .install__list { display: grid; gap: var(--md-sys-measurement-space200); margin: 0; padding: 0; list-style: none; } .install__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--md-sys-measurement-space200); color: var(--md-sys-color-on-surface-variant); } .install__list .icon { color: var(--md-sys-color-primary); } /* The compose commands: a filled card (surface-container-highest) in the theme's own ink. */ .code { overflow: hidden; border-radius: var(--md-sys-shape-corner-md); background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); } .code__bar { display: flex; align-items: center; gap: var(--md-sys-measurement-space100); padding: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300); border-block-end: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); } .code__bar .icon { width: 20px; height: 20px; } .code pre { margin: 0; padding: var(--md-sys-measurement-space300); overflow-x: auto; font-family: var(--md-ref-typeface-mono); font-size: 0.875rem; line-height: 1.5rem; } .code pre code { font-size: inherit; } .code .comment { color: var(--md-sys-color-on-surface-variant); } @media (width >= 840px) { .install { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--md-sys-measurement-space600); } } @media (width >= 1200px) { .install { gap: var(--md-sys-measurement-space800); } } /* ---------------------------------------------------------------- faq */ .faq { display: grid; gap: var(--md-sys-measurement-space100); max-width: 860px; margin-inline: auto; } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sys-measurement-space200); min-height: var(--md-sys-measurement-space800); padding: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300); border-radius: calc(var(--md-sys-shape-corner-md) - 1px); font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); cursor: pointer; list-style: none; } .faq details[open] summary { border-end-start-radius: 0; border-end-end-radius: 0; } .faq summary::-webkit-details-marker { display: none; } .faq summary .icon { color: var(--md-sys-color-on-surface-variant); transition: rotate var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast); } .faq details[open] summary .icon { rotate: 180deg; } .faq__answer { display: grid; gap: var(--md-sys-measurement-space200); padding: 0 var(--md-sys-measurement-space300) var(--md-sys-measurement-space300); color: var(--md-sys-color-on-surface-variant); } /* ---------------------------------------------------------------- contact */ .contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space400) var(--md-sys-measurement-space300); } .contact > div { display: grid; gap: var(--md-sys-measurement-space100); } .contact p { color: var(--md-sys-color-on-surface-variant); } .contact a:not(.btn) { display: inline-flex; align-items: center; gap: var(--md-sys-measurement-space100); min-block-size: var(--md-sys-measurement-space600); width: fit-content; font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); } @media (width >= 840px) { .contact { padding: var(--md-sys-measurement-space600); } } /* ---------------------------------------------------------------- footer */ .footer { padding-block: var(--md-sys-measurement-space700) var(--md-sys-measurement-space500); background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } .footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--md-sys-measurement-space400); } .footer__grid > :first-child { grid-column: 1 / -1; } .footer__blurb { max-width: 380px; margin-block-start: var(--md-sys-measurement-space100); } .footer h2 { margin-block-end: var(--md-sys-measurement-space100); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); } .footer ul { display: grid; margin: 0; padding: 0; list-style: none; } .footer ul a { display: inline-flex; align-items: center; min-block-size: var(--md-sys-measurement-space500); } .footer a { color: var(--md-sys-color-on-surface-variant); text-decoration: none; } .footer a:hover { color: var(--md-sys-color-on-surface); text-decoration-line: underline; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space300); margin-block-start: var(--md-sys-measurement-space500); padding-block-start: var(--md-sys-measurement-space300); border-block-start: 1px solid var(--md-sys-color-outline-variant); } @media (width >= 600px) { .footer__grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } .footer__grid > :first-child { grid-column: auto; } } /* ---------------------------------------------------------------- legal page */ .legal { padding-block: var(--md-sys-measurement-space500) var(--md-sys-measurement-space800); } .legal article { display: grid; gap: var(--md-sys-measurement-space200); max-width: 760px; margin-inline: auto; } .legal h1 { margin-block-end: var(--md-sys-measurement-space50); } .legal h2 { margin-block-start: var(--md-sys-measurement-space300); font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); } .legal ul { display: grid; gap: var(--md-sys-measurement-space100); margin: 0; padding-inline-start: var(--md-sys-measurement-space300); } .legal .meta { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); } @media (width >= 600px) { .legal { padding-block: var(--md-sys-measurement-space800) calc(var(--md-sys-measurement-space500) * 2); } }