/* ─────────────────────────────────────────────────────────────
Pokeibo · A-Morning landing — supporting CSS
--------------------------------------------------------------
Pair with index.html. Tailwind handles layout/type/color.
This file owns:
· design tokens (CSS vars) — mirrored in tailwind.config
· the .mark icon (inline SVG background, two tints)
· feature-tile glyphs
· soft background glows (hero + CTA)
Phone mockups are ![]()
placeholders — swap with real renders.
───────────────────────────────────────────────────────────── */
:root {
--cream: #f5ede0;
--cream-soft: #faf4ea;
--paper: #fdf9f1;
--ink: #2b2620;
--ink-soft: #4a4239;
--ink-muted: #8a8175;
--ink-faint: #b8b0a3;
--sage: #8aa68d;
--sage-deep: #6e8c75;
--sage-soft: #d8e2d6;
--sage-tint: #ecf1ea;
--peach: #f0c2a3;
--peach-deep: #d9a17f;
--peach-soft: #fbe2cf;
--peach-tint: #fdf0e5;
--rule: #e6dccb;
--rule-soft: #efe7d6;
}
/* ─── The Mark (pocket + peach notebook) ─────────────────── */
.mark {
--m: 48px;
width: var(--m); height: var(--m);
flex: 0 0 auto;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
background-repeat: no-repeat;
}
.mark.deep {
/* Setting#og_default_image takes over via --cms-mark-image when uploaded
in /admin/settings; otherwise fall back to the deep-tinted built-in.
border-radius matches the rx='26.5' on the fallback SVG so uploaded
square images get the same rounded-square silhouette. */
background-image: var(--cms-mark-image, url("data:image/svg+xml;utf8,"));
border-radius: 26.5%;
}
/* ─── Feature triptych glyphs (small decorative icons) ───── */
.glyph-pocket {
width: 30px; height: 22px;
background: var(--cream-soft);
border: 1.5px solid var(--ink-soft);
border-radius: 4px 4px 2px 2px;
position: relative;
}
.glyph-pocket::before {
content:""; position: absolute; left: 5px; right: 5px; top: 2px;
height: 6px; border: 1.5px solid var(--peach-deep); border-bottom: 0; border-radius: 4px 4px 0 0;
}
.glyph-stack { width: 30px; height: 22px; display: flex; flex-direction: column; gap: 3px; }
.glyph-stack i { display: block; height: 4px; background: var(--peach-deep); border-radius: 2px; }
.glyph-stack i:nth-child(1) { width: 100%; }
.glyph-stack i:nth-child(2) { width: 70%; }
.glyph-stack i:nth-child(3) { width: 85%; }
.glyph-stack i:nth-child(4) { width: 50%; }
.glyph-sun {
width: 28px; height: 14px;
background: var(--ink); border-radius: 14px 14px 0 0;
position: relative; overflow: hidden;
}
.glyph-sun::after {
content:""; position: absolute; left: 50%; top: 30%;
width: 16px; height: 16px; background: var(--peach);
border-radius: 50%; transform: translateX(-50%);
}
/* ─── きく mascot ("Poké") ───────────────────────────────── */
/* Sage notebook head peeking from a stitched pocket. Two stacked layers so
the head can pop UP out of the static pocket. Palette is fixed (identical in
light/dark). Animation mirrors the app's PocketPoke keyframes; the cadence
is driven by poke_controller.js toggling .is-poking. */
.poke {
position: relative;
width: 52px;
height: 52px;
transform-origin: 50% 100%;
}
.poke-head,
.poke-pocket {
position: absolute;
inset: 0;
}
.poke svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.poke-head { transform: translateY(1px); } /* resting peek */
.poke.is-poking { animation: poke-bounce 550ms linear; }
.poke.is-poking .poke-head { animation: poke-bob 500ms linear; }
@keyframes poke-bounce {
0% { transform: translateY(0) scale(1, 1); }
22% { transform: translateY(1px) scale(1.14, 0.86); }
45% { transform: translateY(-5px) scale(0.9, 1.12); }
68% { transform: translateY(0) scale(1.06, 0.95); }
85% { transform: translateY(0) scale(0.98, 1.02); }
100% { transform: translateY(0) scale(1, 1); }
}
@keyframes poke-bob {
0% { transform: translateY(1px); }
45% { transform: translateY(-7px); }
72% { transform: translateY(-3.5px); }
100% { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
.poke.is-poking,
.poke.is-poking .poke-head { animation: none; }
}
/* ─── Ask demo · on-device glyph ─────────────────────────── */
/* No-network glyph: a small ring with a diagonal slash. */
.glyph-offline {
width: 11px; height: 11px;
border: 1.5px solid currentColor;
border-radius: 50%;
position: relative;
display: inline-block;
}
.glyph-offline::after {
content: ""; position: absolute;
left: 50%; top: -2px; bottom: -2px;
width: 1.5px; background: currentColor;
transform: translateX(-50%) rotate(45deg);
}
/* ─── Mini phone frame (export-guide band) ───────────────── */
.phone-mini {
border-radius: 24px;
overflow: hidden;
background: var(--paper);
box-shadow:
0 1px 0 rgba(0,0,0,0.04),
0 14px 30px -12px rgba(74, 66, 57, 0.18);
}
/* ─── Hero device peach glow ─────────────────────────────── */
.hero-glow { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-glow::before {
content:""; position: absolute; inset: -10% -15% 0% -15%;
background: radial-gradient(circle at 60% 40%, var(--peach-tint), transparent 65%);
z-index: 0; pointer-events: none;
}
.hero-glow > * { position: relative; z-index: 1; }
/* ─── Download CTA peach orb ─────────────────────────────── */
.cta-orb { position: relative; overflow: hidden; }
.cta-orb::before {
content:""; position: absolute; right: -120px; top: -120px;
width: 480px; height: 480px; border-radius: 50%;
background: var(--peach); opacity: 0.42;
}
.cta-orb > * { position: relative; z-index: 1; }
/* ─── Markdown pages (terms, privacy, tokushoho) ─────────── */
.page-prose h2 {
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1.25;
letter-spacing: -0.015em;
margin: 40px 0 14px;
color: var(--ink);
}
.page-prose h3 {
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1.3;
margin: 28px 0 10px;
color: var(--ink);
}
.page-prose p { margin: 0 0 18px; }
.page-prose ul,
.page-prose ol { margin: 0 0 18px 1.5rem; padding: 0; }
.page-prose ul { list-style: disc outside; }
.page-prose ol { list-style: decimal outside; }
.page-prose li { margin-bottom: 6px; }
.page-prose a {
color: var(--sage-deep);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: var(--rule);
transition: text-decoration-color 0.15s ease;
}
.page-prose a:hover { text-decoration-color: var(--sage-deep); }
.page-prose hr {
border: 0;
border-top: 1px solid var(--rule);
margin: 36px 0;
}
.page-prose code {
font-family: "DM Mono", ui-monospace, monospace;
font-size: 0.92em;
background: var(--cream-soft);
padding: 1px 6px;
border-radius: 4px;
}
.page-prose blockquote {
border-left: 2px solid var(--rule);
margin: 24px 0;
padding: 4px 0 4px 20px;
font-style: italic;
color: var(--ink-soft);
}
.dark .page-prose h2,
.dark .page-prose h3 { color: var(--cream); }
.dark .page-prose a { color: var(--peach); text-decoration-color: var(--ink-soft); }
.dark .page-prose a:hover { text-decoration-color: var(--peach); }
.dark .page-prose code { background: var(--ink-soft); color: var(--cream); }
.dark .page-prose blockquote { border-left-color: var(--ink-soft); color: var(--ink-faint); }
/* ─── Japanese typography — italic is awkward for CJK ────── */
/* Italic Latin works as a design accent; italic Mincho / Noto
Sans JP doesn't read the same way. When the document is in
Japanese, strip italic from accents and from elements
carrying Tailwind's `.italic` utility so the design signal
becomes color + serif weight alone. */
[lang="ja"] em,
[lang="ja"] .italic {
font-style: normal;
}
/* ─── Phone placeholder (swap with real renders) ─────────── */
.phone-ph {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 44px;
box-shadow:
0 1px 0 rgba(0,0,0,0.04),
0 24px 48px -16px rgba(74, 66, 57, 0.18),
0 60px 100px -32px rgba(74, 66, 57, 0.14);
display: flex; align-items: center; justify-content: center;
color: var(--ink-faint);
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}