/*
Droppy marketing site, shared design system
=============================================
This is the single shared stylesheet for every page of the new static
site. Design tokens (custom properties) live at the top under :root,
reusable component classes follow, grouped by section.
Fonts (load these two Google Fonts tags in every page's ,
see _shared/template.html for the exact markup):
Inter is the body and UI font. Instrument Sans is the display font used
for hero headlines and large section titles.
Do not hand-edit component styles per page. Add new shared classes here
instead so every page stays visually consistent.
*/
/* ---------------------------------------------------------------------- */
/* Design tokens */
/* ---------------------------------------------------------------------- */
:root {
color-scheme: dark;
/* Backgrounds */
--bg-top: #04070a;
--bg-bottom: #0a0a0a;
--bg-well: #0b0d10;
--bg-well-raised: #101317;
/* Canonical darkening scrim over every scroll-scrubbed page hero. One value
so every header reads at the same muted level and the copy/content behind
it stays legible. Kept intentionally a touch deep. */
--hero-scrim: linear-gradient(180deg, rgba(4, 7, 10, 0.30) 0%, rgba(4, 7, 10, 0.52) 45%, rgba(4, 7, 10, 0.78) 100%);
/* Glass surfaces */
--glass-bg: rgba(255, 255, 255, 0.045);
--glass-bg-strong: rgba(255, 255, 255, 0.075);
--glass-bg-nav: rgba(20, 22, 26, 0.55);
--glass-border: transparent;
--glass-border-strong: transparent;
--glass-blur: blur(20px) saturate(180%);
--glass-blur-soft: blur(14px) saturate(150%);
/* Accent, taken from Droppy's existing brand blue (docs/cloud.html, app icon) */
--accent: #0a84ff;
--accent-hover: #409cff;
--accent-active: #086bdb;
--accent-soft: rgba(10, 132, 255, 0.16);
--accent-soft-strong: rgba(10, 132, 255, 0.32);
--accent-glow: rgba(10, 132, 255, 0.45);
--accent-text: #6ab6ff;
/* Text */
--text-primary: #e8eaed;
--text-secondary: rgba(255, 255, 255, 0.72);
--text-tertiary: rgba(255, 255, 255, 0.52);
--text-quaternary: rgba(255, 255, 255, 0.34);
/* Status */
--color-success: #34d399;
--color-error: #ff6b6b;
--color-warning: #fbbf24;
/* Borders (kept as tokens, intentionally invisible: flat look, no outlines) */
--border-subtle: transparent;
--border-strong: transparent;
/* Radii */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 16px;
--radius-3xl: 24px;
--radius-full: 999px;
/* Shadows and glows (disabled: flat look, no glow effects) */
--shadow-card: none;
--shadow-nav: none;
--shadow-button: none;
--glow-icon: none;
/* Typography */
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: "Instrument Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
/* Layout */
--container-width: 1120px;
--container-pad: 24px;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 150ms;
--dur-base: 300ms;
--dur-slow: 600ms;
}
/* ---------------------------------------------------------------------- */
/* Reset and base */
/* ---------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
/* Nothing may pan the page sideways on phones; stray wide content is
clipped instead of widening the initial containing block. */
overflow-x: clip;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100dvh;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-top);
background-image:
linear-gradient(180deg, var(--bg-top) 0%, #06090c 45%, var(--bg-bottom) 100%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
video {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
cursor: pointer;
}
h1,
h2,
h3,
h4,
p {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
::selection {
background: var(--accent-soft-strong);
color: var(--text-primary);
}
.container {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
section {
position: relative;
padding-block: clamp(56px, 9vw, 120px);
}
.section-tight {
padding-block: clamp(40px, 6vw, 80px);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--accent-text);
margin-bottom: 14px;
}
/* Section headers share one display style: big tight Inter Tight, */
/* centered, with a soft gray centered subtitle. Same as the hero. */
.section-heading {
font-family: "Inter Tight", var(--font-display);
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1.05;
font-size: clamp(2.25rem, 5.5vw, 3.25rem);
color: var(--text-primary);
text-align: center;
margin-inline: auto;
margin-bottom: 18px;
}
.section-subtitle {
font-size: clamp(1.05rem, 2.2vw, 1.25rem);
color: var(--text-tertiary);
line-height: 1.45;
max-width: 720px;
text-align: center;
margin-inline: auto;
}
.text-center {
text-align: center;
}
.stack-center {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* ---------------------------------------------------------------------- */
/* Glass surfaces */
/* ---------------------------------------------------------------------- */
.glass {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
.glass-strong {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border-strong);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
.surface-well {
background: var(--bg-well);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-3xl);
}
/* ---------------------------------------------------------------------- */
/* Reveal-on-load / reveal-on-scroll animation */
/* ---------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Added by site.js once the reveal transition is over. A persistent */
/* transform on an iframe ancestor breaks touch hit-testing in iOS */
/* Safari (Stripe fields become untappable), so settled reveals drop */
/* their transform box entirely. */
.reveal.is-settled {
transform: none;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal {
transition-duration: 1ms;
transform: none;
}
}
/* ---------------------------------------------------------------------- */
/* Fixed notch navigation: solid black bar hanging from the top edge, */
/* rounded bottom corners, concave fillets easing into the screen edge. */
/* ---------------------------------------------------------------------- */
.nav {
--notch-bar: 8px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
justify-content: center;
pointer-events: none;
}
/* Slim menu-bar strip across the whole top edge; the notch hangs from it */
/* and blends into it via the fillets and a solid overlap. */
.nav::before {
content: "";
position: absolute;
/* Start 1px above the viewport edge so display scaling can never round
a hairline of page content in above the strip: the notch always
attaches to a solid black top line. */
top: -1px;
left: 0;
right: 0;
/* 1px above the viewport edge plus 1px past the bar's bottom, so the
strip overlaps both the window edge and the pill with no seam at any
display scaling. */
height: calc(var(--notch-bar) + 2px);
background: #000;
}
.nav__pill {
--notch-fillet: 24px;
position: relative;
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
max-width: calc(100% - 2 * var(--notch-fillet));
height: 56px;
margin-top: var(--notch-bar);
padding: 6px 7px 6px 12px;
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
background: #000;
-webkit-backdrop-filter: none;
backdrop-filter: none;
/* Bridge the pill up into the strip so no hairline seam can appear. */
box-shadow: 0 calc(-1 * var(--notch-bar)) 0 0 #000;
}
/* Fillets start inside the strip and extend down past it, so the wedge */
/* and the strip overlap in solid black instead of meeting at a seam. */
.nav__pill::before,
.nav__pill::after {
content: "";
position: absolute;
top: calc(-1 * var(--notch-bar));
width: var(--notch-fillet);
height: calc(var(--notch-fillet) + var(--notch-bar));
pointer-events: none;
}
.nav__pill::before {
left: calc(-1 * var(--notch-fillet) + 1px);
background: radial-gradient(circle var(--notch-fillet) at 0 100%, transparent calc(var(--notch-fillet) - 1px), #000 var(--notch-fillet));
}
.nav__pill::after {
right: calc(-1 * var(--notch-fillet) + 1px);
background: radial-gradient(circle var(--notch-fillet) at 100% 100%, transparent calc(var(--notch-fillet) - 1px), #000 var(--notch-fillet));
}
.nav__logo {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-base);
color: var(--text-primary);
margin-right: 10px;
}
.nav__logo img {
height: 24px;
width: auto;
display: block;
}
.nav__links {
display: flex;
align-items: center;
gap: 22px;
margin-right: 8px;
}
.nav__link {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-secondary);
transition: color var(--dur-fast) var(--ease-out);
white-space: nowrap;
}
.nav__link:hover,
.nav__link.is-active {
color: var(--text-primary);
}
.btn.nav__cta {
flex-shrink: 0;
/* The notch navigation CTA intentionally stays a full capsule. */
border-radius: var(--radius-full);
}
/* Notch menu button: three lines that morph into a close mark. Only the
phone dock shows it; desktop keeps the inline link strip. */
.nav__menu {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 12px;
background: transparent;
cursor: pointer;
flex-shrink: 0;
}
.nav__menu span {
display: block;
width: 16px;
height: 2px;
border-radius: 2px;
background: var(--text-primary);
transition: transform 320ms cubic-bezier(0.32, 1.22, 0.36, 1), opacity 180ms ease;
}
.nav__pill.is-open .nav__menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__pill.is-open .nav__menu span:nth-child(2) { opacity: 0; }
.nav__pill.is-open .nav__menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 720px) {
/* Phone dock: logo and Purchase stay in the pill; the menu button
expands the notch downward into the full page list, the same spring
the dock uses to drop in. */
.nav__pill {
width: calc(100vw - 2 * var(--notch-fillet) - 8px);
max-width: calc(100vw - 2 * var(--notch-fillet) - 8px);
height: auto;
min-height: 52px;
flex-wrap: wrap;
column-gap: 10px;
row-gap: 0;
padding-right: 10px;
padding-left: 14px;
}
.nav__logo { margin-right: auto; }
.nav__menu { display: inline-flex; }
.nav__links {
order: 5;
flex-basis: 100%;
flex-direction: column;
align-items: stretch;
gap: 2px;
margin-right: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 4px;
transition:
max-height 560ms cubic-bezier(0.32, 1.22, 0.36, 1),
opacity 240ms ease,
padding 560ms cubic-bezier(0.32, 1.22, 0.36, 1);
}
.nav__pill.is-open .nav__links {
max-height: 360px;
opacity: 1;
padding: 10px 4px 8px;
}
.nav__link {
padding: 13px 12px;
border-radius: 12px;
font-size: 15px;
}
.nav__link:active { background: rgba(255, 255, 255, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
.nav__links, .nav__menu span { transition: none; }
}
@media (max-width: 380px) {
.nav__pill {
padding-left: 12px;
}
.nav__logo span {
display: none;
}
}
/* ---------------------------------------------------------------------- */
/* Buttons */
/* ---------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding-inline: 20px;
border-radius: var(--radius-lg);
border: 1px solid transparent;
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
opacity var(--dur-fast) var(--ease-out);
}
.btn:active {
transform: scale(0.97);
}
.btn--sm {
height: 38px;
padding-inline: 16px;
}
.btn--lg {
/* Identical proportions to the hero pills. */
height: 58px;
padding-inline: 28px;
font-size: 17px;
}
.btn--primary {
background: var(--accent);
color: #f0f2f4;
box-shadow: var(--shadow-button);
}
.btn--white {
background: #e9ebee;
color: #0b0c0e;
}
.btn--white:hover { background: #ffffff; }
.btn--white:active { background: #dcdfe3; }
.btn--primary:hover {
background: var(--accent-hover);
}
.btn--primary:active {
background: var(--accent-active);
}
/* Light mono button, same material as the pricing card's Purchase CTA. */
.btn--mono {
background: #e9ebee;
color: #0b0c0e;
border: 0;
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--mono:hover:not(:disabled) {
opacity: 0.88;
transform: translateY(-1px);
}
.btn--secondary {
background: var(--glass-bg-strong);
border-color: var(--glass-border);
color: var(--text-primary);
-webkit-backdrop-filter: var(--glass-blur-soft);
backdrop-filter: var(--glass-blur-soft);
}
.btn--secondary:hover {
background: rgba(255, 255, 255, 0.11);
}
.btn--ghost {
background: transparent;
color: var(--text-secondary);
}
.btn--ghost:hover {
color: var(--text-primary);
}
.btn--block {
width: 100%;
}
.btn[disabled],
.btn.is-disabled {
opacity: 0.5;
pointer-events: none;
}
/* ---------------------------------------------------------------------- */
/* Hero */
/* ---------------------------------------------------------------------- */
.hero {
padding-top: clamp(120px, 18vw, 168px);
padding-bottom: clamp(40px, 6vw, 80px);
}
.hero__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 720px;
margin-inline: auto;
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: var(--radius-full);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 20px;
}
.hero__title {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1.08;
font-size: clamp(2.25rem, 6vw, var(--text-6xl));
color: var(--text-primary);
margin-bottom: 18px;
}
.hero__subtitle {
font-size: clamp(var(--text-base), 2.2vw, var(--text-lg));
color: var(--text-tertiary);
line-height: 1.6;
max-width: 480px;
margin-bottom: 32px;
}
.hero__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
/* Display hero treatment, shared by every page hero: Apple-mark (or app
icon) kicker, tight Inter Tight display title, soft wide subtitle.
Identical values to the home page hero. */
.hero__kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: "Inter Tight", var(--font-display);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
color: var(--text-primary);
margin-bottom: 30px;
}
.hero__kicker-apple {
width: 17px;
height: 21px;
flex-shrink: 0;
margin-top: -3px;
}
.hero__kicker-icon {
width: 21px;
height: 21px;
border-radius: 5px;
flex-shrink: 0;
}
.hero__title--display {
font-family: "Inter Tight", var(--font-display);
font-weight: 600;
font-size: clamp(2.5rem, 6.4vw, 3.6rem);
letter-spacing: -0.045em;
line-height: 1em;
margin-bottom: 26px;
}
.hero__subtitle--wide {
font-size: clamp(1.05rem, 2.4vw, 1.25rem);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.4;
color: var(--text-primary);
opacity: 0.6;
max-width: 780px;
margin-bottom: 34px;
}
@media (max-width: 640px) {
.hero__kicker {
font-size: 17px;
}
}
/* ---------------------------------------------------------------------- */
/* Media block (large rounded hero visual / video) */
/* ---------------------------------------------------------------------- */
.media-block {
position: relative;
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
border-radius: var(--radius-3xl);
overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--bg-well);
box-shadow: var(--shadow-card);
}
.media-block__frame {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.media-block--glow::before {
content: none;
}
/* ---------------------------------------------------------------------- */
/* Value props grid (3-column) */
/* ---------------------------------------------------------------------- */
.value-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Flat use-case cards: soft flat surface (no border), circular icon chip,
big display title, roomy copy. */
.value-card {
padding: clamp(28px, 3vw, 40px);
border-radius: var(--radius-3xl);
background: var(--glass-bg);
}
.value-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
color: var(--text-primary);
margin-bottom: 30px;
}
.value-card__title {
font-family: "Inter Tight", var(--font-display);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.12;
font-size: clamp(1.35rem, 2vw, 1.7rem);
color: var(--text-primary);
margin-bottom: 12px;
}
.value-card__text {
font-size: var(--text-base);
color: var(--text-tertiary);
line-height: 1.6;
}
@media (max-width: 860px) {
.value-grid {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------------- */
/* Feature surface-well cards (stacked) */
/* ---------------------------------------------------------------------- */
.feature-stack {
display: flex;
flex-direction: column;
gap: 24px;
}
.feature-card {
padding: clamp(28px, 4vw, 48px);
border-radius: var(--radius-3xl);
background: var(--bg-well);
border: 1px solid var(--border-subtle);
overflow: hidden;
}
.feature-card__eyebrow {
font-size: var(--text-sm);
font-weight: 600;
color: var(--accent-text);
margin-bottom: 10px;
}
.feature-card__title {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.02em;
font-size: clamp(1.375rem, 2.6vw, var(--text-2xl));
color: var(--text-primary);
margin-bottom: 10px;
}
.feature-card__subline {
font-size: var(--text-base);
color: var(--text-tertiary);
line-height: 1.6;
max-width: 480px;
margin-bottom: 28px;
}
.feature-card__media {
border-radius: var(--radius-2xl);
overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--bg-well-raised);
}
.feature-card__media img,
.feature-card__media video {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.feature-card--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.feature-card--split .feature-card__subline {
margin-bottom: 0;
}
@media (max-width: 860px) {
.feature-card--split {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------------- */
/* Demo video presentation */
/* ---------------------------------------------------------------------- */
.demo-frame {
position: relative;
width: 100%;
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--bg-well);
aspect-ratio: 16 / 10;
}
.demo-frame video,
.demo-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
/* ---------------------------------------------------------------------- */
/* FAQ accordion (grid-template-rows 0fr -> 1fr pattern) */
/* ---------------------------------------------------------------------- */
.faq__title {
text-align: center;
font-family: "Inter Tight", var(--font-display);
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1.05;
font-size: clamp(2.25rem, 5.5vw, 3.25rem);
color: var(--text-primary);
margin: 0 auto 20px;
}
.faq__sub {
text-align: center;
color: var(--text-tertiary);
font-size: clamp(1.05rem, 2.2vw, 1.25rem);
line-height: 1.45;
max-width: 620px;
margin: 0 auto;
}
.faq {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 20px;
align-items: start;
margin-top: 48px;
}
.faq__item {
border-radius: 22px;
background: var(--bg-well);
}
.faq__question {
width: 100%;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
gap: 18px;
padding: 26px 28px;
background: none;
border: none;
text-align: left;
font-size: var(--text-base);
font-weight: 500;
color: var(--text-primary);
}
.faq__question-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
transition: transform var(--dur-base) var(--ease-out);
}
.faq__item.is-open .faq__question-icon {
transform: rotate(45deg);
color: var(--accent-text);
}
.faq__answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq__item.is-open .faq__answer {
grid-template-rows: 1fr;
}
.faq__answer-inner {
overflow: hidden;
}
.faq__answer-content {
padding: 0 28px 26px;
font-size: var(--text-sm);
color: var(--text-tertiary);
line-height: 1.65;
}
@media (max-width: 760px) {
.faq {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------------- */
/* Pricing card */
/* ---------------------------------------------------------------------- */
.pricing {
display: flex;
justify-content: center;
}
.pricing-card {
position: relative;
width: 100%;
max-width: 420px;
border-radius: var(--radius-3xl);
padding: clamp(28px, 4vw, 40px);
background: var(--bg-well);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-card);
}
.pricing-card__badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--radius-full);
background: var(--accent-soft);
color: var(--accent-text);
font-size: var(--text-xs);
font-weight: 600;
margin-bottom: 18px;
}
.pricing-card__name {
font-size: var(--text-sm);
color: var(--text-tertiary);
margin-bottom: 6px;
}
.pricing-card__price {
display: flex;
align-items: flex-end;
gap: 6px;
margin-bottom: 4px;
}
.pricing-card__price-amount {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.02em;
font-size: var(--text-5xl);
color: var(--text-primary);
line-height: 1;
}
.pricing-card__price-period {
font-size: var(--text-sm);
color: var(--text-tertiary);
padding-bottom: 8px;
}
.pricing-card__tagline {
font-size: var(--text-sm);
color: var(--text-tertiary);
margin-bottom: 24px;
}
.pricing-card__cta {
margin-bottom: 22px;
}
.pricing-card__features {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 22px;
border-top: 1px solid var(--border-subtle);
margin-bottom: 18px;
}
.pricing-card__feature {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--text-sm);
color: var(--text-secondary);
}
.pricing-card__feature-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--accent-text);
}
.pricing-card__note {
font-size: var(--text-xs);
color: var(--text-quaternary);
line-height: 1.6;
text-align: center;
}
/* ---------------------------------------------------------------------- */
/* Forms (license pages) */
/* ---------------------------------------------------------------------- */
.field {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
text-align: left;
}
.field__label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-secondary);
}
.field__input {
height: 48px;
padding-inline: 16px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-size: var(--text-base);
font-family: var(--font-sans);
transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.field__input::placeholder {
color: var(--text-quaternary);
}
.field__input:focus {
outline: none;
border-color: var(--accent);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.field__input.is-invalid {
border-color: var(--color-error);
}
.field__input.is-invalid:focus {
box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.18);
}
textarea.field__input {
height: auto;
padding-block: 12px;
resize: vertical;
min-height: 96px;
}
.field__hint {
font-size: var(--text-xs);
color: var(--text-quaternary);
}
.field__error {
font-size: var(--text-xs);
color: var(--color-error);
}
.form-card {
width: 100%;
max-width: 440px;
margin-inline: auto;
padding: clamp(28px, 4vw, 40px);
border-radius: var(--radius-3xl);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
.status-text {
font-size: var(--text-sm);
line-height: 1.6;
border-radius: var(--radius-md);
padding: 12px 16px;
margin-bottom: 18px;
}
.status-text--success {
color: var(--color-success);
background: rgba(52, 211, 153, 0.1);
border: 1px solid rgba(52, 211, 153, 0.25);
}
.status-text--error {
color: var(--color-error);
background: rgba(255, 107, 107, 0.1);
border: 1px solid rgba(255, 107, 107, 0.25);
}
.status-text--warning {
color: var(--color-warning);
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.25);
}
/* ---------------------------------------------------------------------- */
/* Outro: centered app-icon glow section */
/* ---------------------------------------------------------------------- */
.outro {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-block: clamp(72px, 10vw, 140px);
}
.outro__icon-wrap {
position: relative;
margin-bottom: 32px;
}
.outro__icon {
position: relative;
z-index: 1;
width: 96px;
height: 96px;
border-radius: 24px;
display: block;
}
.outro__icon-wrap::before {
content: none;
}
/* Outro copy mirrors the display hero: same family, weight, and tracking
as .hero__title--display / .hero__subtitle--wide on the home page. */
.outro__title {
font-family: "Inter Tight", var(--font-display);
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1.05;
font-size: clamp(2.1rem, 5vw, 3rem);
color: var(--text-primary);
margin-bottom: 18px;
}
.outro__subtitle {
font-size: clamp(1.05rem, 2.4vw, 1.25rem);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.4;
color: var(--text-primary);
opacity: 0.6;
max-width: 640px;
margin-bottom: 34px;
}
/* Hero CTA pills, shared by every page's hero and outro. The white pill
is the canonical download button; the dark pill is its secondary twin
with identical geometry. */
.btn--applepill {
display: inline-flex;
align-items: center;
gap: 11px;
background: #e9ebee;
color: #0b0c0e;
border-radius: 20px;
padding: 17px 28px;
font-size: 17px;
font-weight: 600;
line-height: 1.4;
transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn--applepill:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.btn--applepill:active {
transform: translateY(0) scale(0.98);
}
.btn--applepill-logo {
width: 16px;
height: 20px;
flex-shrink: 0;
margin-top: -2px;
}
.btn--darkpill {
display: inline-flex;
align-items: center;
gap: 11px;
background: var(--glass-bg-strong);
color: var(--text-primary);
border-radius: 20px;
padding: 17px 28px;
font-size: 17px;
font-weight: 600;
line-height: 1.4;
transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn--darkpill:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
.btn--darkpill:active {
transform: translateY(0) scale(0.98);
}
/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */
.footer {
padding-block: clamp(56px, 7vw, 88px) 0;
position: relative;
}
/* Scroll-scrubbed wave behind the giant half-cut Droppy wordmark at the
very bottom of every page. The backdrop element is injected at runtime
by site.js (so the shared footer markup stays identical across pages)
and scrubbed against scroll; a dark scrim keeps the faint wordmark and
the footer links readable over the bright spray. */
.footer-scrub {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: min(30vw, 460px);
overflow: hidden;
pointer-events: none;
z-index: 0;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
}
.footer-scrub canvas {
width: 100%;
height: 100%;
display: block;
}
.footer-scrub__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(4, 7, 10, 0.85) 0%, rgba(4, 7, 10, 0.45) 100%);
}
.footer > :not(.footer-scrub) {
position: relative;
z-index: 1;
}
/* Giant wordmark peeking out of the bottom of the page. The wrapper */
/* clips the lower part of the word; site.js adds a subtle scroll */
/* parallax on the inner span. */
.footer__wordmark {
overflow: hidden;
height: clamp(90px, 13vw, 190px);
margin-top: clamp(40px, 6vw, 72px);
}
.footer__wordmark span {
display: block;
text-align: center;
font-family: "Inter Tight", var(--font-display);
font-weight: 700;
font-size: clamp(9rem, 23vw, 24rem);
line-height: 0.78;
letter-spacing: -0.05em;
color: rgba(255, 255, 255, 0.045);
user-select: none;
will-change: transform;
transform: translateY(0.06em);
}
.footer__grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 48px;
justify-items: center;
text-align: center;
}
.footer__brand {
display: flex;
flex-direction: column;
align-items: center;
}
.footer__logo {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-xl);
color: var(--text-primary);
margin-bottom: 20px;
}
.footer__logo img,
.footer__logo canvas {
width: 48px;
height: 48px;
}
.footer__tagline {
font-family: "Inter Tight", var(--font-display);
font-weight: 600;
letter-spacing: -0.03em;
font-size: var(--text-2xl);
color: var(--text-primary);
margin: 0 0 14px;
}
.footer__desc {
color: var(--text-tertiary);
line-height: 1.55;
max-width: 46ch;
margin: 0 auto 24px;
}
.footer__cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: #e9ebee;
color: #0b0c0e;
border-radius: 20px;
padding: 13px 22px;
font-size: var(--text-sm);
font-weight: 600;
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer__cta:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.footer__cta svg {
width: 14px;
height: 17px;
flex-shrink: 0;
margin-top: -2px;
}
.footer__copyright {
margin: 28px 0 16px;
color: var(--text-quaternary);
font-size: var(--text-sm);
}
.footer__byline {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
color: var(--text-secondary);
font-size: var(--text-sm);
font-weight: 500;
margin: 0;
}
.footer__face {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
.footer__head {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-lg);
color: var(--text-primary);
margin: 0 0 6px;
}
.footer__col {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.footer__col a {
color: var(--text-tertiary);
font-size: var(--text-base);
transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover {
color: var(--text-primary);
}
@media (max-width: 900px) {
.footer__grid {
grid-template-columns: 1fr 1fr;
}
.footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 560px) {
.footer__grid {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------------- */
/* Responsive */
/* ---------------------------------------------------------------------- */
@media (max-width: 720px) {
.feature-card--split {
gap: 24px;
}
.pricing-card {
max-width: 100%;
}
}
@media (max-width: 480px) {
:root {
--container-pad: 18px;
}
.nav__pill {
min-height: 52px;
}
.btn--lg {
height: 48px;
padding-inline: 20px;
}
.hero__actions {
flex-direction: column;
width: 100%;
}
.hero__actions .btn {
width: 100%;
}
}
/* ---------------------------------------------------------------------- */
/* Generic scroll-scrubbed page hero backdrop */
/* Add .page-scrub-host to a hero section and drop a .page-scrub element */
/* (with data-count / data-local / data-remote and a