/* Fermata — shared site styles */ :root { --bg: #faf7f2; --bg-alt: #f1ece3; --ink: #2b2723; --ink-soft: #6b6258; --accent: #b3541e; --accent-soft: #e8d5c4; --card: #ffffff; --radius: 18px; --max-width: 980px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Helvetica Neue", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.75; font-size: 17px; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ---- language visibility ---- [data-lang] blocks exist only in en and zh (long-form pages). zh shows the zh block; every other language falls back to the English block. */ html[data-lang="zh"] [data-lang="en"] { display: none !important; } html:not([data-lang="zh"]) [data-lang="zh"] { display: none !important; } /* ---- header (fixed bar) ---- */ header.site { position: sticky; top: 0; z-index: 100; padding: 14px 0; border-bottom: 1px solid var(--accent-soft); background: rgba(250, 247, 242, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } header.site .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; min-width: 0; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; white-space: nowrap; } .brand img.mark { width: 28px; height: auto; display: block; } .header-right { display: flex; align-items: center; } nav.site a { margin-right: 20px; text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; } nav.site a:hover { color: var(--accent); } select.lang-switch { appearance: none; -webkit-appearance: none; border: 1px solid var(--accent-soft); border-radius: 999px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6258' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center / 10px; padding: 5px 30px 5px 14px; font: inherit; font-size: 0.85rem; color: var(--ink); cursor: pointer; } /* ---- hero (simple, non-scrolly pages) ---- */ .hero { text-align: center; padding: 96px 24px 72px; } .hero .emoji-mark { font-size: 4rem; display: block; line-height: 1; margin-bottom: 24px; } /* product app icon, shown with the iOS squircle feel */ .hero .app-icon-mark { width: clamp(96px, 12vw, 132px); height: auto; border-radius: 22.5%; box-shadow: 0 14px 32px rgba(43, 39, 35, 0.18); display: block; margin: 0 auto 28px; } .card .card-app-icon { width: 56px; height: 56px; border-radius: 22.5%; box-shadow: 0 6px 14px rgba(43, 39, 35, 0.12); display: block; margin-bottom: 14px; } .hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: 0.02em; margin-bottom: 16px; } .hero p.tagline { font-size: 1.25rem; color: var(--ink-soft); max-width: 580px; margin: 0 auto; } /* ===================================================== Scrolly hero (homepage) Base styles below are the static fallback (no JS or prefers-reduced-motion). `.has-scrolly` on switches to the pinned, scroll-driven layout. ===================================================== */ .scrolly { text-align: center; padding: 72px 24px 56px; } .scrolly-head h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 800; letter-spacing: 0.02em; margin-bottom: 14px; } .scrolly-head p { font-size: 1.15rem; color: var(--ink-soft); max-width: 600px; margin: 0 auto; } .f-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 40px auto; } .f-arc { width: clamp(150px, 24vw, 250px); display: block; } .f-dot { width: clamp(20px, 3.2vw, 34px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); } .scroll-hint { display: none; } .memories { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin: 48px auto; max-width: 900px; } .memory { width: clamp(120px, 22vw, 200px); aspect-ratio: 3 / 3.6; border-radius: 16px; border: 1px solid var(--accent-soft); box-shadow: 0 16px 40px rgba(43, 39, 35, 0.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; overflow: hidden; will-change: transform, opacity; } .memory .emoji { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; } .memory img { width: 100%; height: 68%; object-fit: cover; border-radius: 10px; } .memory figcaption { font-size: 0.82rem; color: var(--ink-soft); text-align: center; line-height: 1.4; } .m1 { background: linear-gradient(160deg, #fff3e0, #ffe0c2); } .m2 { background: linear-gradient(160deg, #fdeef0, #f9d9de); } .m3 { background: linear-gradient(160deg, #fff0e6, #ffd9c4); } .m4 { background: linear-gradient(160deg, #f0edfa, #ded7f3); } .m5 { background: linear-gradient(160deg, #e9f6ee, #d2ecdc); } .m6 { background: linear-gradient(160deg, #fdf0f5, #f7dce9); } .scrolly-end { font-size: clamp(1.2rem, 2.6vw, 1.7rem); max-width: 640px; margin: 0 auto; color: var(--ink); } .scrolly-end strong { color: var(--accent); } /* ---- animated mode ---- */ .has-scrolly .scrolly { height: 380vh; padding: 0; } .has-scrolly .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; } .has-scrolly .scrolly-stage { position: relative; width: 100%; height: 100%; } .has-scrolly .scrolly-head { position: absolute; top: 11%; left: 0; right: 0; padding: 0 24px; z-index: 3; will-change: transform, opacity; pointer-events: none; /* display-only; never steal the logo's press-and-hold */ } .has-scrolly .f-logo { position: absolute; inset: 0; justify-content: center; margin: 0; z-index: 2; pointer-events: none; } /* the marks themselves stay interactive (press-and-hold easter egg) */ .has-scrolly .f-logo > * { pointer-events: auto; } .has-scrolly .f-arc, .has-scrolly .f-dot { will-change: transform; } .has-scrolly .memories { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1100px; margin: 0; display: block; z-index: 1; } .has-scrolly .memory { position: absolute; opacity: 0; } /* Horizontal slots only — vertical positions are computed by scrolly.js so cards always stay between the split arc and dot. */ .has-scrolly .m1 { left: 14%; } .has-scrolly .m2 { left: 68%; } .has-scrolly .m3 { left: 11%; } .has-scrolly .m4 { left: 66%; } .has-scrolly .m5 { left: 41%; } .has-scrolly .m6 { left: 39%; } .has-scrolly .scrolly-end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 24px; max-width: none; opacity: 0; z-index: 2; will-change: transform, opacity; pointer-events: none; /* display-only; never steal the logo's press-and-hold */ } /* one line, always — scrolly.js shrinks the font if the text is too wide */ .has-scrolly .scrolly-end p { max-width: none; white-space: nowrap; } .has-scrolly .scroll-hint { display: block; position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: var(--ink-soft); font-size: 0.8rem; letter-spacing: 0.25em; text-transform: uppercase; z-index: 3; } /* Short viewports (e.g. phones in landscape): tighten the hero so the headline never collides with the fermata mark. */ @media (max-height: 620px) { .has-scrolly .scrolly-head { top: 6%; } .has-scrolly .scrolly-head h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 8px; } .has-scrolly .scrolly-head p { font-size: 0.95rem; } .has-scrolly .f-logo { padding-top: 14vh; } .has-scrolly .f-arc { width: min(24vw, 36vh); } .has-scrolly .f-dot { width: min(3.2vw, 4.6vh); } } @media (max-width: 640px) { .has-scrolly .m1 { left: 5%; } .has-scrolly .m2 { left: 64%; } .has-scrolly .m3 { left: 4%; } .has-scrolly .m4 { left: 62%; } .has-scrolly .m5 { left: 36%; } .has-scrolly .m6 { left: 34%; } .has-scrolly .memory { width: clamp(104px, 27vw, 150px); } /* phones: tighter headline, smaller mark, and clear air between them */ .scrolly-head h1 { font-size: 1.65rem; } .scrolly-head p { font-size: 0.92rem; } .has-scrolly .scrolly-head { top: 7%; } .has-scrolly .f-logo { padding-top: 16vh; } .f-arc { width: min(150px, 36vw); } } /* ---- sections ---- */ section { padding: 56px 0; } section.alt { background: var(--bg-alt); } section h2 { font-size: 1.6rem; margin-bottom: 20px; letter-spacing: 0.03em; } section p.lead { color: var(--ink-soft); max-width: 640px; } section p.lead a { color: var(--accent); } /* ---- cards ---- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 32px; } .card { background: var(--card); border-radius: var(--radius); padding: 28px; border: 1px solid var(--accent-soft); text-decoration: none; color: var(--ink); transition: transform 0.15s ease, box-shadow 0.15s ease; } a.card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 39, 35, 0.08); } .card .icon { font-size: 2rem; margin-bottom: 12px; display: block; } .card h3 { font-size: 1.2rem; margin-bottom: 8px; } .card p { color: var(--ink-soft); font-size: 0.95rem; } .card.placeholder { border-style: dashed; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 0.95rem; min-height: 160px; } /* ---- buttons ---- */ .btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 12px 28px; border-radius: 999px; font-weight: 600; margin-top: 24px; } .btn:hover { opacity: 0.9; } .btn.ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); } /* ---- feature list (product page) ---- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; } .feature h3 { font-size: 1.05rem; margin-bottom: 6px; } .feature h3 .icon { margin-right: 8px; } .feature p { color: var(--ink-soft); font-size: 0.95rem; } .feature p a { color: var(--accent); } .steps { counter-reset: step; margin-top: 24px; max-width: 640px; } .steps li { list-style: none; counter-increment: step; position: relative; padding-left: 56px; margin-bottom: 20px; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; } .steps li strong { display: block; } .steps li span { color: var(--ink-soft); font-size: 0.95rem; } /* ---- prose (privacy page) ---- */ .prose { max-width: 720px; padding: 48px 0 72px; } .prose h1 { font-size: 1.9rem; margin-bottom: 8px; } .prose .meta { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 32px; } .prose h2 { font-size: 1.25rem; margin: 36px 0 12px; } .prose h3 { font-size: 1.05rem; margin: 24px 0 8px; } .prose p, .prose li { color: var(--ink); } .prose ul { padding-left: 24px; margin: 12px 0; } .prose li { margin-bottom: 8px; } .prose a { color: var(--accent); } /* ---- footer ---- */ footer.site { border-top: 1px solid var(--accent-soft); padding: 40px 0; margin-top: 40px; color: var(--ink-soft); font-size: 0.9rem; } footer.site .container { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } footer.site a { color: var(--ink-soft); text-decoration: none; margin-left: 18px; } footer.site a:hover { color: var(--accent); } /* ---- press-and-hold easter egg (homepage logo) ---- */ .f-logo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .f-logo .f-arc, .f-logo .f-dot { touch-action: none; } .f-logo .f-arc, .f-logo .f-dot { cursor: pointer; } /* glow only — no transform, so it never fights the scroll animation. box-shadow rings suit the round dot; the arc is an SVG, so it gets drop-shadows that follow its shape instead of its bounding box. */ .f-dot { transition: box-shadow 0.35s ease; } .f-arc { transition: filter 0.35s ease; } /* hover hint: a soft pre-glow that says "I'm interactive" */ .f-logo:hover .f-dot { box-shadow: 0 0 0 6px rgba(179, 84, 30, 0.12); } .f-logo:hover .f-arc { filter: drop-shadow(0 0 6px rgba(179, 84, 30, 0.35)); } /* holding: the glow swells over the full hold, like a note sustained */ .f-logo.holding .f-dot { transition: box-shadow 1.05s ease; box-shadow: 0 0 0 14px rgba(179, 84, 30, 0.14), 0 0 0 30px rgba(179, 84, 30, 0.07); } .f-logo.holding .f-arc { transition: filter 1.05s ease; filter: drop-shadow(0 0 10px rgba(179, 84, 30, 0.55)) drop-shadow(0 0 26px rgba(179, 84, 30, 0.3)); } .margin-note-overlay[hidden] { display: none !important; } .margin-note-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(43, 39, 35, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.35s ease; } .margin-note-overlay.show { opacity: 1; } .margin-note { max-width: 440px; background: #fffdf6; border: 1px solid var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 4px 14px 14px 4px; box-shadow: 0 24px 60px rgba(43, 39, 35, 0.3); padding: 32px 36px; transform: rotate(-1.2deg) translateY(14px); transition: transform 0.35s ease; cursor: pointer; } .margin-note-overlay.show .margin-note { transform: rotate(-1.2deg) translateY(0); } .margin-note blockquote { font-family: Georgia, "Songti TC", "Noto Serif TC", serif; font-style: italic; font-size: 1.15rem; line-height: 1.9; color: var(--ink); } .margin-note figcaption { margin-top: 16px; font-size: 0.85rem; color: var(--ink-soft); text-align: right; } /* ---- 404 page ---- */ .notfound { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 24px; } .notfound img.mark404 { width: clamp(120px, 18vw, 180px); margin-bottom: 32px; } .notfound h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: 0.06em; margin-bottom: 16px; } .notfound p { color: var(--ink-soft); font-size: 1.1rem; max-width: 460px; } /* ---- motion preferences ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @media (max-width: 640px) { .hero { padding: 64px 20px 48px; } /* nav links don't fit beside the brand and language picker on phones; all destinations remain reachable by scrolling and via the footer */ nav.site { display: none; } .brand { font-size: 1.05rem; } select.lang-switch { font-size: 0.8rem; padding: 4px 26px 4px 12px; } }