/* ============================================================================
Pawcast marketing site — shared styles
Brand palette mirrors the iOS app (see app/src/constants/theme.ts).
No web fonts; we rely on system fonts to keep first paint instant and
match Apple's iOS typography on devices that load the site from
App Store referrals.
============================================================================ */
:root {
--brand-green: #5A8470;
--brand-green-dark: #3E6650;
--brand-green-light: #739C87;
--bg-cream: #FBF6ED;
--bg-soft: #EEF7EF;
--bg-accent: #EED9BA;
--text-dark: #173328;
--text-body: #34483F;
--text-muted: #6E7A75;
--rule: rgba(0, 0, 0, 0.08);
--shadow-soft: 0 6px 24px rgba(42, 61, 47, 0.08);
--shadow-lift: 0 12px 36px rgba(42, 61, 47, 0.15);
--radius-card: 22px;
--radius-pill: 999px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 17px;
line-height: 1.55;
color: var(--text-body);
/* Layered atmospheric background. Five layers, top-down in stacking order:
* 1. Top-left big green wash — sets the "fresh outdoor" tone of the
* hero + features sections.
* 2. Right-side sage orb — anchors the middle of the page in deeper
* brand green, balances the lighter top wash.
* 3. Bottom-left mint orb — keeps the lower sections feeling alive.
* 4. Bottom-right warm-orange accent — picks up the brand's secondary
* color (used for sun + notification dots in the app icons),
* adds a sunset hint without being loud.
* 5. Base cream→sand linear gradient — the foundation everything
* paints over.
*
* Opacities are intentionally low (8–30%) so the page reads as
* "subtly tinted cream" not "saturated green." `background-attachment:
* fixed` keeps the orbs in viewport position as the user scrolls, so
* different sections naturally pick up different hues.
*/
background:
radial-gradient(circle at 0% 0%, rgba(115, 156, 135, 0.28) 0%, transparent 45%),
radial-gradient(circle at 100% 30%, rgba(90, 132, 112, 0.20) 0%, transparent 38%),
radial-gradient(circle at 5% 75%, rgba(157, 207, 175, 0.30) 0%, transparent 42%),
radial-gradient(circle at 95% 95%, rgba(232, 148, 61, 0.10) 0%, transparent 28%),
linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-cream) 50%, var(--bg-accent) 100%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand-green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ---------- Layout primitives -------------------------------------------- */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.container-narrow {
max-width: 760px;
margin: 0 auto;
padding: 0 24px;
}
/* ---------- Header / nav ------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 10;
background: rgba(251, 246, 237, 0.86);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--rule);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
max-width: 1100px;
margin: 0 auto;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 18px;
color: var(--text-dark);
}
.brand img {
width: 36px;
height: 36px;
border-radius: 8px;
}
.site-nav {
display: flex;
gap: 22px;
font-size: 15px;
font-weight: 500;
}
.site-nav a {
color: var(--text-body);
}
.site-nav a:hover {
color: var(--brand-green-dark);
text-decoration: none;
}
@media (max-width: 600px) {
.site-nav { gap: 14px; font-size: 14px; }
.brand { font-size: 16px; }
.brand img { width: 32px; height: 32px; }
}
/* ---------- Hero --------------------------------------------------------- */
/* The hero now has a dog photo as full-bleed background. We layer a
semi-transparent cream-to-cream gradient on top of the image so the
text stays legible regardless of where the photo's exposure falls.
Bottom of the hero fades to fully opaque cream, blending seamlessly
into the next section. The `position: relative` + ::before pattern
keeps the background painting under the content without needing a
wrapper div. */
.hero {
position: relative;
padding: 88px 0 64px;
text-align: center;
overflow: hidden;
isolation: isolate; /* contain ::before's z-index */
}
.hero::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
/* Top: cream wash for soft text contrast.
Mid: slightly more transparent so the dog shows through.
Bottom: fully opaque cream to merge into the next section. */
linear-gradient(180deg,
rgba(238, 247, 239, 0.78) 0%,
rgba(251, 246, 237, 0.55) 35%,
rgba(251, 246, 237, 0.78) 70%,
var(--bg-cream) 100%
),
url('assets/hero-dog.jpg') center 30% / cover no-repeat;
/* Soft right-side fade-out keeps focus on the centered text without
making the photo feel cropped. */
}
/* Subtle pawprints (decorative) softly scattered behind the hero text.
Tiny opacity so they don't compete with the dog photo or the headline. */
.hero::after {
content: '';
position: absolute;
top: 28px;
right: -40px;
width: 220px;
height: 220px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: contain;
transform: rotate(-12deg);
z-index: -1;
pointer-events: none;
}
.hero__logo {
width: 132px;
height: 132px;
border-radius: 30px;
margin: 0 auto 28px;
box-shadow: var(--shadow-lift);
}
.hero__title {
font-size: 56px;
line-height: 1.05;
letter-spacing: -1.5px;
margin: 0 0 14px;
color: var(--text-dark);
font-weight: 800;
}
.hero__tagline {
font-size: 22px;
color: var(--text-body);
margin: 0 auto 28px;
max-width: 560px;
line-height: 1.4;
}
.hero__cta-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 22px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-radius: var(--radius-pill);
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-primary {
background: var(--brand-green-dark);
color: #fff;
box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-lift);
text-decoration: none;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.78);
color: var(--brand-green-dark);
border: 1.5px solid var(--brand-green-light);
}
.btn-secondary:hover { background: #fff; text-decoration: none; }
.appstore-placeholder {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 22px 12px 20px;
background: var(--text-dark);
color: #fff;
border-radius: 14px;
font-weight: 700;
font-size: 15px;
box-shadow: var(--shadow-soft);
}
.appstore-placeholder__logo {
width: 26px;
height: 26px;
flex-shrink: 0;
/* Subtle vertical nudge — the Apple mark's optical center sits slightly
above its bounding box center because of the leaf cutout at the top. */
margin-top: 1px;
}
.appstore-placeholder small {
display: block;
font-size: 10px;
font-weight: 500;
opacity: 0.72;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 1px;
}
/* ---------- Shared SVG icon sizes ---------------------------------------
Use with . The
`display: block` removes the default inline gap below SVGs (caused
by baseline alignment with imaginary descenders). */
.icon-sm {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: -3px;
}
.icon-md {
width: 28px;
height: 28px;
display: block;
}
.icon-lg {
width: 40px;
height: 40px;
display: block;
}
@media (max-width: 600px) {
.hero { padding: 56px 0 40px; }
.hero__title { font-size: 38px; }
.hero__tagline { font-size: 17px; }
.hero__logo { width: 108px; height: 108px; border-radius: 24px; }
}
/* ---------- Feature grid ------------------------------------------------- */
.features {
padding: 56px 0 72px;
}
.section-title {
text-align: center;
font-size: 32px;
letter-spacing: -0.5px;
font-weight: 800;
color: var(--text-dark);
margin: 0 0 8px;
}
.section-sub {
text-align: center;
font-size: 17px;
color: var(--text-muted);
margin: 0 0 44px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
@media (max-width: 800px) {
.feature-grid { grid-template-columns: 1fr; }
}
.feature-card {
position: relative;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: var(--radius-card);
padding: 28px 24px;
box-shadow: var(--shadow-soft);
overflow: hidden; /* clips the decorative paw when it overflows the corner */
}
/* Decorative paw print in the bottom-right corner of every card. Pure CSS
via inline-SVG data URI so there's no extra HTTP request and the paw
inherits brand color automatically. The :nth-child variations below
rotate each card's paw to a slightly different angle so they don't
look like a copy-pasted grid — adds a hand-crafted feel. */
.feature-card::after {
content: '';
position: absolute;
width: 110px;
height: 110px;
bottom: -22px;
right: -22px;
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
opacity: 0.08;
transform: rotate(-12deg);
pointer-events: none;
z-index: 0;
}
/* Vary the paw rotation per card so the grid feels less mechanical. */
.feature-card:nth-child(2)::after { transform: rotate(18deg); }
.feature-card:nth-child(3)::after { transform: rotate(-28deg); }
.feature-card:nth-child(4)::after { transform: rotate(8deg); }
.feature-card:nth-child(5)::after { transform: rotate(-5deg); }
.feature-card:nth-child(6)::after { transform: rotate(22deg); }
/* Small accent paw in the top-LEFT corner of every other card. Smaller +
more transparent so it doesn't compete with the icon above. */
.feature-card:nth-child(odd)::before {
content: '';
position: absolute;
width: 36px;
height: 36px;
top: 14px;
right: 14px;
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
opacity: 0.14;
transform: rotate(28deg);
pointer-events: none;
z-index: 0;
}
/* Make the card text sit ABOVE the decorative paws. Without this, the
z-index: 0 paws would render under the rgba(255,255,255,0.72) card
background which IS more opaque than the paws (i.e. the paws would
be invisible). z-index: 1 on direct children lifts them. */
.feature-card > * { position: relative; z-index: 1; }
.feature-card__icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: #EEF5E9;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.feature-card h3 {
font-size: 19px;
margin: 0 0 8px;
color: var(--text-dark);
font-weight: 800;
}
.feature-card p {
margin: 0;
font-size: 15px;
color: var(--text-body);
line-height: 1.55;
}
/* ---------- Screenshots showcase (interactive) --------------------------- */
.screenshots {
padding: 24px 0 72px;
}
/* Two-column showcase layout: featured phone on the left, description
text on the right. Tab row spans the full width below. On mobile this
collapses to a single column. */
.showcase {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: auto auto;
gap: 32px 56px;
align-items: center;
max-width: 920px;
margin: 0 auto;
padding: 8px 0;
}
.showcase__phone {
grid-column: 1;
grid-row: 1;
margin: 0;
}
.showcase__detail {
grid-column: 2;
grid-row: 1;
}
.showcase__tabs {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
/* The phone frame — same near-black bezel + rounded corners as before,
sized larger now that it's the focal point of the section. */
.showcase__phone .phone__screen {
position: relative;
background: #1a1a1a;
border-radius: 38px;
padding: 10px;
width: 280px;
aspect-ratio: 9 / 19.5;
overflow: hidden;
box-shadow:
0 28px 56px rgba(42, 61, 47, 0.22),
0 8px 16px rgba(42, 61, 47, 0.12),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
margin: 0 auto;
}
/* Stacked slides — only `.is-active` is visible. Others sit at opacity 0
so the transition can crossfade cleanly. `position: absolute` for all
keeps the layout from jumping when slides swap. */
.showcase__slide {
position: absolute;
inset: 10px;
border-radius: 28px;
overflow: hidden;
opacity: 0;
transform: scale(0.96);
transition: opacity 0.45s ease, transform 0.45s ease;
pointer-events: none;
}
.showcase__slide.is-active {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.showcase__slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 2;
}
.showcase__slide .phone__placeholder {
position: absolute;
inset: 0;
border-radius: 28px;
background: linear-gradient(135deg,
var(--brand-green-light) 0%,
var(--brand-green) 60%,
var(--brand-green-dark) 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.85);
font-size: 20px;
font-weight: 700;
letter-spacing: 0.4px;
z-index: 1;
}
/* Right-column description card. Pill at top mirrors the active tab
label; copy below crossfades when slides change. */
.showcase__pill {
display: inline-block;
background: rgba(115, 156, 135, 0.16);
color: var(--brand-green-dark);
padding: 6px 14px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
margin-bottom: 14px;
}
.showcase__copy {
position: relative;
min-height: 220px;
}
.showcase__copy-slide {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
}
.showcase__copy-slide.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.showcase__copy-slide h3 {
font-size: 26px;
margin: 0 0 12px;
color: var(--text-dark);
font-weight: 800;
letter-spacing: -0.4px;
}
.showcase__copy-slide p {
font-size: 17px;
line-height: 1.6;
color: var(--text-body);
margin: 0;
max-width: 460px;
}
/* Tab row — pill-shaped buttons. Active tab gets the brand green fill;
inactive tabs have a subtle white-with-border treatment. */
.showcase__tab {
appearance: none;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.65);
border: 1.5px solid rgba(115, 156, 135, 0.28);
border-radius: var(--radius-pill);
padding: 9px 18px;
font-size: 14px;
font-weight: 700;
color: var(--text-body);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
font-family: inherit;
}
.showcase__tab:hover {
background: #fff;
border-color: var(--brand-green-light);
color: var(--text-dark);
}
.showcase__tab:active {
transform: scale(0.97);
}
.showcase__tab.is-active {
background: var(--brand-green-dark);
border-color: var(--brand-green-dark);
color: #fff;
box-shadow: 0 6px 14px rgba(62, 102, 80, 0.30);
}
.showcase__tab:focus-visible {
outline: 2px solid var(--brand-green-dark);
outline-offset: 2px;
}
/* ---- Responsive: mobile = single column, copy below phone, tabs at bottom */
@media (max-width: 760px) {
.showcase {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 28px;
}
.showcase__phone {
grid-column: 1;
grid-row: 1;
}
.showcase__detail {
grid-column: 1;
grid-row: 2;
text-align: center;
}
.showcase__copy {
min-height: 180px;
}
.showcase__copy-slide p {
margin: 0 auto;
}
.showcase__tabs {
grid-row: 3;
}
.showcase__phone .phone__screen {
width: 240px;
}
}
@media (max-width: 420px) {
.showcase__tab {
padding: 7px 12px;
font-size: 13px;
}
.showcase__copy-slide h3 { font-size: 22px; }
.showcase__copy-slide p { font-size: 15px; }
}
/* Reduced-motion users get instant swaps — keeps focus-state changes
accessible without surprise animations. */
@media (prefers-reduced-motion: reduce) {
.showcase__slide,
.showcase__copy-slide {
transition: none;
}
}
/* ---------- How it works ------------------------------------------------- */
.how {
padding: 24px 0 64px;
}
.steps {
list-style: none;
margin: 0;
padding: 0;
max-width: 820px;
margin: 0 auto;
position: relative;
}
/* Vertical guide line behind the numbered badges. Sits behind the badge
circles via z-index so the green-filled badges read as "milestones" on
a journey rather than disconnected cards. Hidden on small screens where
the badges stack tighter and the line would feel cramped. */
.steps::before {
content: '';
position: absolute;
left: 27px;
top: 32px;
bottom: 32px;
width: 2px;
background: linear-gradient(180deg,
rgba(115, 156, 135, 0.0) 0%,
rgba(115, 156, 135, 0.45) 12%,
rgba(115, 156, 135, 0.45) 88%,
rgba(115, 156, 135, 0.0) 100%);
z-index: 0;
}
.step {
display: flex;
gap: 22px;
align-items: flex-start;
padding: 18px 0;
position: relative;
z-index: 1;
}
.step__num {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
color: #fff;
font-size: 24px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 14px rgba(90, 132, 112, 0.35);
/* The step circle sits on top of the vertical guide line. White ring
gives it visible separation from the line behind it. */
border: 3px solid #FBF6ED;
}
.step__body {
flex: 1;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: var(--radius-card);
padding: 20px 24px;
box-shadow: var(--shadow-soft);
}
.step__body h3 {
margin: 0 0 6px;
font-size: 19px;
font-weight: 800;
color: var(--text-dark);
}
.step__body p {
margin: 0;
font-size: 16px;
color: var(--text-body);
line-height: 1.55;
}
.step__body em {
font-style: normal;
font-weight: 700;
color: var(--brand-green-dark);
}
@media (max-width: 600px) {
.steps::before { display: none; }
.step { gap: 14px; }
.step__num { width: 44px; height: 44px; flex-basis: 44px; font-size: 19px; border-width: 2px; }
.step__body { padding: 16px 18px; }
.step__body h3 { font-size: 17px; }
.step__body p { font-size: 15px; }
}
/* ---------- Pro band ----------------------------------------------------- */
.pro-band {
margin: 32px auto 72px;
max-width: 980px;
background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
color: #fff;
border-radius: 28px;
padding: 48px 40px;
text-align: center;
box-shadow: var(--shadow-lift);
}
.pro-band h2 {
font-size: 30px;
margin: 0 0 10px;
font-weight: 800;
letter-spacing: -0.5px;
}
.pro-band p {
font-size: 17px;
opacity: 0.9;
max-width: 540px;
margin: 0 auto 22px;
}
.pro-band .badge-row {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-top: 18px;
}
.pro-band .badge-row span {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.18);
padding: 6px 12px 6px 10px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.2px;
}
/* Inside Pro band badges, our brand-green icons would be invisible on the
green background. Re-tint them to white via a CSS filter — works on
inline SVGs because we're using