Andreas Reinhold / reiniandClaude Opus 5
606cc766f2
website/ is hand-written HTML and CSS, uploaded as it is, like the MailifySMS site: SealShare as software a company installs for its own upload platform, how it works, features, a desktop/phone and light/dark gallery of the generated screenshots, a dated and sourced comparison with hosted transfer services and self-hosted tools, the Docker quick start, FAQ and a privacy page for Plausible. Colours come from the app's scheme, Google Sans Flex is served locally, nothing else loads from other hosts. The README shows three screenshots and no longer calls the encryption end-to-end. WebsiteTest guards missing files, other hosts, the screenshot set and the encryption wording. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
1358 lines
26 KiB
CSS
1358 lines
26 KiB
CSS
/*
|
||
* SealShare website theme.
|
||
*
|
||
* The colours are not an approximation of the app's: they are copied from
|
||
* resources/css/material-scheme.json, generated by `php artisan material:scheme "#4f46e5"
|
||
* --variant=vibrant` (Material 3, spec 2025, contrast 0). When the scheme is regenerated, copy the
|
||
* roles below again — the site does not read the file. Light is the default, dark follows the
|
||
* visitor's system setting; the site has no theme toggle of its own.
|
||
*
|
||
* 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;
|
||
}
|
||
|
||
:root {
|
||
color-scheme: light dark;
|
||
|
||
--surface: #faf4ff;
|
||
--surface-container-lowest: #ffffff;
|
||
--surface-container-low: #f5eeff;
|
||
--surface-container: #ede4ff;
|
||
--surface-container-high: #e8deff;
|
||
--surface-container-highest: #e2d7ff;
|
||
--on-surface: #32294f;
|
||
--on-surface-variant: #5f557f;
|
||
--outline: #7b719c;
|
||
--outline-variant: #b2a6d5;
|
||
--inverse-surface: #10062d;
|
||
--inverse-on-surface: #a296c4;
|
||
--primary: #4a3fe2;
|
||
--on-primary: #f4f1ff;
|
||
--primary-container: #9795ff;
|
||
--on-primary-container: #14007e;
|
||
--secondary: #6249b2;
|
||
--secondary-container: #d8caff;
|
||
--on-secondary-container: #4e339c;
|
||
--tertiary-container: #fd8bca;
|
||
--on-tertiary-container: #610244;
|
||
--success: #006c45;
|
||
--error: #b41340;
|
||
|
||
/* The code block reads as a terminal in both themes. */
|
||
--code-surface: #10062d;
|
||
--code-ink: #eae1ff;
|
||
|
||
--font: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||
--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
||
|
||
--corner-sm: 8px;
|
||
--corner-md: 12px;
|
||
--corner-lg: 16px;
|
||
--corner-xl: 28px;
|
||
--corner-xxl: 48px;
|
||
--corner-full: 999px;
|
||
|
||
--shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
|
||
--shadow-3: 0 4px 8px 3px rgb(0 0 0 / 0.15), 0 1px 3px rgb(0 0 0 / 0.3);
|
||
|
||
--ease-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
|
||
--ease-effects: cubic-bezier(0.34, 0.8, 0.34, 1);
|
||
|
||
--container: 1200px;
|
||
--gutter: clamp(16px, 4vw, 32px);
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--surface: #10062d;
|
||
--surface-container-lowest: #000000;
|
||
--surface-container-low: #160b36;
|
||
--surface-container: #1c113f;
|
||
--surface-container-high: #231649;
|
||
--surface-container-highest: #291c53;
|
||
--on-surface: #eae1ff;
|
||
--on-surface-variant: #b0a4d3;
|
||
--outline: #7a6f9b;
|
||
--outline-variant: #4b426a;
|
||
--inverse-surface: #fdf7ff;
|
||
--inverse-on-surface: #594f78;
|
||
--primary: #a7a5ff;
|
||
--on-primary: #1c00a0;
|
||
--primary-container: #9795ff;
|
||
--on-primary-container: #14007e;
|
||
--secondary: #a98ffd;
|
||
--secondary-container: #4d329b;
|
||
--on-secondary-container: #d6c9ff;
|
||
--tertiary-container: #fa88c8;
|
||
--on-tertiary-container: #5e0042;
|
||
--success: #69dca1;
|
||
--error: #ff6e84;
|
||
|
||
--code-surface: #000000;
|
||
--code-ink: #eae1ff;
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- base */
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
scroll-padding-top: 88px;
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--surface);
|
||
color: var(--on-surface);
|
||
font-family: var(--font);
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
letter-spacing: 0.01em;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
img,
|
||
svg {
|
||
display: block;
|
||
max-width: 100%;
|
||
}
|
||
|
||
a {
|
||
color: var(--primary);
|
||
text-underline-offset: 3px;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration-thickness: 2px;
|
||
}
|
||
|
||
:focus-visible {
|
||
outline: 3px solid var(--primary);
|
||
outline-offset: 3px;
|
||
border-radius: var(--corner-sm);
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3 {
|
||
margin: 0;
|
||
font-weight: 500;
|
||
letter-spacing: 0;
|
||
text-wrap: balance;
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
code {
|
||
font-family: var(--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: rect(0 0 0 0);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.skip-link {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
z-index: 100;
|
||
padding: 12px 20px;
|
||
border-radius: var(--corner-full);
|
||
background: var(--primary);
|
||
color: var(--on-primary);
|
||
font-weight: 500;
|
||
translate: 0 -200%;
|
||
}
|
||
|
||
.skip-link:focus-visible {
|
||
translate: 0 0;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
max-width: var(--container);
|
||
margin-inline: auto;
|
||
padding-inline: var(--gutter);
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- type */
|
||
|
||
.display {
|
||
font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
|
||
line-height: 1.06;
|
||
font-weight: 500;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.headline {
|
||
font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
|
||
line-height: 1.15;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.title {
|
||
font-size: 1.375rem;
|
||
line-height: 1.27;
|
||
}
|
||
|
||
.lede {
|
||
color: var(--on-surface-variant);
|
||
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.eyebrow {
|
||
display: inline-flex;
|
||
justify-self: start;
|
||
width: fit-content;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 14px;
|
||
border-radius: var(--corner-full);
|
||
background: var(--secondary-container);
|
||
color: var(--on-secondary-container);
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.eyebrow .icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- buttons */
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
min-height: 48px;
|
||
padding: 12px 24px;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--corner-full);
|
||
font: inherit;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
line-height: 1.25;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
transition: border-radius 250ms var(--ease-spatial), background-color 150ms var(--ease-effects);
|
||
}
|
||
|
||
.btn:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn:active {
|
||
border-radius: var(--corner-md);
|
||
}
|
||
|
||
.btn .icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.btn--filled {
|
||
background: var(--primary);
|
||
color: var(--on-primary);
|
||
}
|
||
|
||
.btn--filled:hover {
|
||
background: color-mix(in srgb, var(--primary) 88%, var(--on-primary));
|
||
}
|
||
|
||
.btn--tonal {
|
||
background: var(--secondary-container);
|
||
color: var(--on-secondary-container);
|
||
}
|
||
|
||
.btn--tonal:hover {
|
||
background: color-mix(in srgb, var(--secondary-container) 88%, var(--on-secondary-container));
|
||
}
|
||
|
||
.btn--outlined {
|
||
border-color: var(--outline-variant);
|
||
color: var(--primary);
|
||
}
|
||
|
||
.btn--outlined:hover {
|
||
background: color-mix(in srgb, var(--primary) 8%, transparent);
|
||
}
|
||
|
||
.btn--lg {
|
||
min-height: 56px;
|
||
padding: 16px 28px;
|
||
font-size: 1.0625rem;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- nav */
|
||
|
||
.nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
background: color-mix(in srgb, var(--surface) 86%, transparent);
|
||
backdrop-filter: blur(16px);
|
||
-webkit-backdrop-filter: blur(16px);
|
||
border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
|
||
}
|
||
|
||
.nav__bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
min-height: 72px;
|
||
}
|
||
|
||
.brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: var(--on-surface);
|
||
font-size: 1.375rem;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.brand:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.brand svg {
|
||
width: 32px;
|
||
height: 32px;
|
||
color: var(--primary);
|
||
}
|
||
|
||
.nav__bar > nav {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.nav__links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.nav__links a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 40px;
|
||
padding: 8px 14px;
|
||
border-radius: var(--corner-full);
|
||
color: var(--on-surface-variant);
|
||
font-size: 0.9375rem;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav__links a:hover {
|
||
background: color-mix(in srgb, var(--on-surface) 8%, transparent);
|
||
color: var(--on-surface);
|
||
}
|
||
|
||
.nav__links .btn {
|
||
margin-left: 8px;
|
||
color: var(--on-primary);
|
||
}
|
||
|
||
.nav__links .btn:hover {
|
||
color: var(--on-primary);
|
||
background: color-mix(in srgb, var(--primary) 88%, var(--on-primary));
|
||
}
|
||
|
||
.nav__toggle {
|
||
display: none;
|
||
margin-left: auto;
|
||
width: 48px;
|
||
height: 48px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 0;
|
||
border-radius: var(--corner-full);
|
||
background: transparent;
|
||
color: var(--on-surface);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav__toggle:hover {
|
||
background: color-mix(in srgb, var(--on-surface) 8%, transparent);
|
||
}
|
||
|
||
.nav__toggle .icon-close {
|
||
display: none;
|
||
}
|
||
|
||
.nav__toggle[aria-expanded="true"] .icon-menu {
|
||
display: none;
|
||
}
|
||
|
||
.nav__toggle[aria-expanded="true"] .icon-close {
|
||
display: block;
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.nav__toggle {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.nav__links {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: var(--gutter);
|
||
right: var(--gutter);
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 2px;
|
||
margin: 8px 0 0;
|
||
padding: 8px;
|
||
border-radius: var(--corner-xl);
|
||
background: var(--surface-container);
|
||
box-shadow: var(--shadow-3);
|
||
}
|
||
|
||
.nav__links.is-open {
|
||
display: flex;
|
||
}
|
||
|
||
.nav__links a {
|
||
min-height: 48px;
|
||
padding: 12px 16px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.nav__bar > nav {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.nav__links .btn {
|
||
width: 100%;
|
||
margin: 8px 0 0;
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- hero */
|
||
|
||
.hero {
|
||
position: relative;
|
||
overflow: clip;
|
||
padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 112px);
|
||
}
|
||
|
||
.hero__grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
|
||
align-items: center;
|
||
gap: clamp(32px, 5vw, 72px);
|
||
}
|
||
|
||
.hero__copy {
|
||
display: grid;
|
||
gap: 24px;
|
||
justify-items: start;
|
||
}
|
||
|
||
.hero__actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.hero__facts {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 20px;
|
||
margin: 8px 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
color: var(--on-surface-variant);
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
.hero__facts li {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.hero__facts .icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
color: var(--success);
|
||
}
|
||
|
||
.hero__visual {
|
||
position: relative;
|
||
padding: 0 0 48px;
|
||
}
|
||
|
||
.hero__visual .device--phone {
|
||
position: absolute;
|
||
right: -2%;
|
||
bottom: 0;
|
||
width: 25%;
|
||
}
|
||
|
||
.hero__shape {
|
||
position: absolute;
|
||
z-index: -1;
|
||
fill: currentColor;
|
||
color: var(--secondary-container);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.hero__shape--one {
|
||
top: -8%;
|
||
right: -6%;
|
||
width: 46%;
|
||
rotate: 12deg;
|
||
}
|
||
|
||
.hero__shape--two {
|
||
bottom: -4%;
|
||
left: -10%;
|
||
width: 30%;
|
||
color: var(--tertiary-container);
|
||
opacity: 0.35;
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.hero__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.hero__visual {
|
||
padding-bottom: 36px;
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- sections */
|
||
|
||
.section {
|
||
padding-block: clamp(56px, 8vw, 104px);
|
||
overflow-x: clip;
|
||
}
|
||
|
||
.section--tint {
|
||
background: var(--surface-container-low);
|
||
}
|
||
|
||
.section__head {
|
||
display: grid;
|
||
gap: 16px;
|
||
max-width: 760px;
|
||
margin-bottom: clamp(32px, 5vw, 56px);
|
||
}
|
||
|
||
.section__head--center {
|
||
margin-inline: auto;
|
||
text-align: center;
|
||
justify-items: center;
|
||
}
|
||
|
||
/* "Why run your own": a statement beside four reasons. */
|
||
.why {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
|
||
gap: clamp(32px, 5vw, 72px);
|
||
align-items: start;
|
||
}
|
||
|
||
.why__statement {
|
||
position: sticky;
|
||
top: 104px;
|
||
display: grid;
|
||
gap: 20px;
|
||
}
|
||
|
||
.reasons {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.reason {
|
||
display: grid;
|
||
gap: 12px;
|
||
align-content: start;
|
||
padding: 28px;
|
||
border-radius: var(--corner-xl);
|
||
background: var(--surface-container);
|
||
}
|
||
|
||
.reason:nth-child(1) {
|
||
border-radius: var(--corner-xxl) var(--corner-xl) var(--corner-xl) var(--corner-xl);
|
||
}
|
||
|
||
.reason:nth-child(4) {
|
||
border-radius: var(--corner-xl) var(--corner-xl) var(--corner-xxl) var(--corner-xl);
|
||
}
|
||
|
||
.reason p {
|
||
color: var(--on-surface-variant);
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.why {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.why__statement {
|
||
position: static;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.reasons {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* An icon on an M3 Expressive shape. */
|
||
.badge-icon {
|
||
position: relative;
|
||
display: grid;
|
||
place-items: center;
|
||
width: 56px;
|
||
height: 56px;
|
||
color: var(--on-primary-container);
|
||
}
|
||
|
||
.badge-icon > svg:first-child {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: var(--primary-container);
|
||
fill: currentColor;
|
||
}
|
||
|
||
.badge-icon .icon {
|
||
position: relative;
|
||
width: 26px;
|
||
height: 26px;
|
||
}
|
||
|
||
.badge-icon--secondary {
|
||
color: var(--on-secondary-container);
|
||
}
|
||
|
||
.badge-icon--secondary > svg:first-child {
|
||
color: var(--secondary-container);
|
||
}
|
||
|
||
.badge-icon--tertiary {
|
||
color: var(--on-tertiary-container);
|
||
}
|
||
|
||
.badge-icon--tertiary > svg:first-child {
|
||
color: var(--tertiary-container);
|
||
}
|
||
|
||
/* How it works: three steps. */
|
||
.steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 16px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
counter-reset: step;
|
||
}
|
||
|
||
.step {
|
||
position: relative;
|
||
display: grid;
|
||
gap: 14px;
|
||
align-content: start;
|
||
padding: 32px 28px 28px;
|
||
border-radius: var(--corner-xl);
|
||
background: var(--surface-container-lowest);
|
||
counter-increment: step;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
.step {
|
||
background: var(--surface-container);
|
||
}
|
||
}
|
||
|
||
.step::before {
|
||
content: counter(step);
|
||
position: absolute;
|
||
top: 24px;
|
||
right: 28px;
|
||
color: var(--outline-variant);
|
||
font-size: 3rem;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
}
|
||
|
||
.step p {
|
||
color: var(--on-surface-variant);
|
||
}
|
||
|
||
@media (max-width: 840px) {
|
||
.steps {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Features. */
|
||
.features {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.feature {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 4px 16px;
|
||
align-content: start;
|
||
padding: 24px;
|
||
border-radius: var(--corner-xl);
|
||
background: var(--surface-container-low);
|
||
}
|
||
|
||
.section--tint .feature {
|
||
background: var(--surface-container);
|
||
}
|
||
|
||
.feature .badge-icon {
|
||
grid-row: span 2;
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
|
||
.feature .badge-icon .icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.feature h3 {
|
||
align-self: end;
|
||
font-size: 1.0625rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.feature p {
|
||
color: var(--on-surface-variant);
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.features {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.features {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- gallery */
|
||
|
||
.gallery__controls {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 12px 16px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
/* M3 segmented buttons. */
|
||
.segmented {
|
||
display: inline-flex;
|
||
border: 1px solid var(--outline);
|
||
border-radius: var(--corner-full);
|
||
}
|
||
|
||
.segmented button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-height: 40px;
|
||
padding: 8px 18px;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--on-surface);
|
||
font: inherit;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.segmented button + button {
|
||
border-left: 1px solid var(--outline);
|
||
}
|
||
|
||
.segmented button:first-child {
|
||
border-radius: var(--corner-full) 0 0 var(--corner-full);
|
||
}
|
||
|
||
.segmented button:last-child {
|
||
border-radius: 0 var(--corner-full) var(--corner-full) 0;
|
||
}
|
||
|
||
.segmented button:hover {
|
||
background: color-mix(in srgb, var(--on-surface) 8%, transparent);
|
||
}
|
||
|
||
.segmented button[aria-pressed="true"] {
|
||
background: var(--secondary-container);
|
||
color: var(--on-secondary-container);
|
||
}
|
||
|
||
.segmented .icon {
|
||
display: none;
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.segmented button[aria-pressed="true"] .icon {
|
||
display: block;
|
||
}
|
||
|
||
.gallery {
|
||
display: grid;
|
||
gap: 40px 32px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.gallery--desktop {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
column-gap: clamp(40px, 6vw, 88px);
|
||
}
|
||
|
||
.gallery--phone {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
max-width: 1040px;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.gallery[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.shot {
|
||
display: grid;
|
||
gap: 16px;
|
||
margin: 0;
|
||
}
|
||
|
||
.shot figcaption {
|
||
display: grid;
|
||
gap: 2px;
|
||
text-align: center;
|
||
}
|
||
|
||
.shot figcaption strong {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.shot figcaption span {
|
||
color: var(--on-surface-variant);
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
@media (max-width: 840px) {
|
||
.gallery--desktop {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.gallery--phone {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 32px 20px;
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- compare */
|
||
|
||
.compare {
|
||
display: grid;
|
||
gap: 48px;
|
||
}
|
||
|
||
.compare__block {
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
|
||
.compare__block h3 {
|
||
font-size: 1.375rem;
|
||
}
|
||
|
||
.compare__block > p {
|
||
color: var(--on-surface-variant);
|
||
}
|
||
|
||
.table-scroll {
|
||
overflow-x: auto;
|
||
border: 1px solid var(--outline-variant);
|
||
border-radius: var(--corner-xl);
|
||
background: var(--surface-container-lowest);
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
.table-scroll {
|
||
background: var(--surface-container-low);
|
||
}
|
||
}
|
||
|
||
.table-scroll:focus-visible {
|
||
outline-offset: 2px;
|
||
border-radius: var(--corner-xl);
|
||
}
|
||
|
||
.compare table {
|
||
width: 100%;
|
||
min-width: 860px;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
.compare caption {
|
||
padding: 14px 20px;
|
||
border-bottom: 1px solid var(--outline-variant);
|
||
color: var(--on-surface-variant);
|
||
font-size: 0.875rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.compare th,
|
||
.compare td {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
|
||
text-align: left;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.compare tbody tr:last-child > * {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.compare thead th {
|
||
color: var(--on-surface);
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.compare tbody th {
|
||
position: sticky;
|
||
left: 0;
|
||
z-index: 1;
|
||
min-width: 170px;
|
||
background: var(--surface-container-lowest);
|
||
color: var(--on-surface-variant);
|
||
font-weight: 500;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
.compare tbody th {
|
||
background: var(--surface-container-low);
|
||
}
|
||
}
|
||
|
||
.compare thead th:first-child {
|
||
position: sticky;
|
||
left: 0;
|
||
z-index: 2;
|
||
background: inherit;
|
||
}
|
||
|
||
.compare thead tr {
|
||
background: var(--surface-container-lowest);
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
.compare thead tr {
|
||
background: var(--surface-container-low);
|
||
}
|
||
}
|
||
|
||
/* SealShare's own column. */
|
||
.compare .is-us {
|
||
background: color-mix(in srgb, var(--secondary-container) 55%, transparent);
|
||
color: var(--on-surface);
|
||
}
|
||
|
||
.compare thead .is-us {
|
||
color: var(--on-secondary-container);
|
||
}
|
||
|
||
.compare__sources {
|
||
display: grid;
|
||
gap: 6px;
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
color: var(--on-surface-variant);
|
||
font-size: 0.875rem;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.compare__note {
|
||
color: var(--on-surface-variant);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
/* The numbered notes under the tables read as one block. */
|
||
.compare__notes {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.compare__notes sup,
|
||
.compare td sup {
|
||
line-height: 0;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- install */
|
||
|
||
.install {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
|
||
gap: clamp(32px, 5vw, 64px);
|
||
align-items: start;
|
||
}
|
||
|
||
.install__copy {
|
||
display: grid;
|
||
gap: 20px;
|
||
justify-items: start;
|
||
}
|
||
|
||
.install__list {
|
||
display: grid;
|
||
gap: 12px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.install__list li {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
color: var(--on-surface-variant);
|
||
}
|
||
|
||
.install__list .icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
color: var(--primary);
|
||
}
|
||
|
||
.code {
|
||
overflow: hidden;
|
||
border-radius: var(--corner-xl);
|
||
background: var(--code-surface);
|
||
color: var(--code-ink);
|
||
box-shadow: var(--shadow-1);
|
||
}
|
||
|
||
.code__bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 14px 20px;
|
||
border-bottom: 1px solid rgb(255 255 255 / 0.1);
|
||
color: rgb(234 225 255 / 0.7);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.code__bar .icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.code pre {
|
||
margin: 0;
|
||
padding: 20px;
|
||
overflow-x: auto;
|
||
font-family: var(--mono);
|
||
font-size: 0.875rem;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.code .comment {
|
||
color: rgb(234 225 255 / 0.55);
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.install {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- faq */
|
||
|
||
.faq {
|
||
display: grid;
|
||
gap: 8px;
|
||
max-width: 860px;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.faq details {
|
||
border-radius: var(--corner-lg);
|
||
background: var(--surface-container);
|
||
transition: border-radius 250ms var(--ease-spatial);
|
||
}
|
||
|
||
.faq details[open] {
|
||
border-radius: var(--corner-xl);
|
||
}
|
||
|
||
.faq summary {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
min-height: 64px;
|
||
padding: 16px 24px;
|
||
border-radius: inherit;
|
||
font-size: 1.0625rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
list-style: none;
|
||
}
|
||
|
||
.faq summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.faq summary .icon {
|
||
color: var(--on-surface-variant);
|
||
transition: rotate 250ms var(--ease-spatial);
|
||
}
|
||
|
||
.faq details[open] summary .icon {
|
||
rotate: 180deg;
|
||
}
|
||
|
||
.faq__answer {
|
||
display: grid;
|
||
gap: 12px;
|
||
padding: 0 24px 24px;
|
||
color: var(--on-surface-variant);
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- contact */
|
||
|
||
.contact {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
padding: clamp(28px, 5vw, 48px);
|
||
border-radius: var(--corner-xxl);
|
||
background: var(--primary-container);
|
||
color: var(--on-primary-container);
|
||
}
|
||
|
||
.contact > div {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.contact p {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.contact a:not(.btn) {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: inherit;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.contact .btn--filled {
|
||
background: var(--on-primary-container);
|
||
color: var(--primary-container);
|
||
}
|
||
|
||
.contact .btn--filled:hover {
|
||
background: color-mix(in srgb, var(--on-primary-container) 88%, var(--primary-container));
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- footer */
|
||
|
||
.footer {
|
||
padding-block: 56px 40px;
|
||
background: var(--surface-container-low);
|
||
color: var(--on-surface-variant);
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
.footer__grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
|
||
gap: 32px;
|
||
}
|
||
|
||
.footer__blurb {
|
||
max-width: 380px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.footer h2 {
|
||
margin-bottom: 12px;
|
||
color: var(--on-surface);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.footer ul {
|
||
display: grid;
|
||
gap: 8px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.footer a {
|
||
color: var(--on-surface-variant);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.footer a:hover {
|
||
color: var(--on-surface);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.footer__bottom {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
gap: 8px 24px;
|
||
margin-top: 40px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid var(--outline-variant);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.footer__grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
|
||
.footer__grid > :first-child {
|
||
grid-column: 1 / -1;
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- legal page */
|
||
|
||
.legal {
|
||
padding-block: clamp(40px, 6vw, 80px);
|
||
}
|
||
|
||
.legal article {
|
||
display: grid;
|
||
gap: 16px;
|
||
max-width: 760px;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.legal h1 {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.legal h2 {
|
||
margin-top: 24px;
|
||
font-size: 1.375rem;
|
||
}
|
||
|
||
.legal p,
|
||
.legal li {
|
||
color: var(--on-surface-variant);
|
||
}
|
||
|
||
.legal ul {
|
||
display: grid;
|
||
gap: 8px;
|
||
margin: 0;
|
||
padding-left: 22px;
|
||
}
|
||
|
||
.legal .meta {
|
||
color: var(--on-surface-variant);
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- motion */
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html {
|
||
scroll-behavior: auto;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
transition-duration: 0.01ms !important;
|
||
animation-duration: 0.01ms !important;
|
||
}
|
||
}
|