/* pupsaps — shared styles for every page. Studio tokens live on :root. Each app page sets its own accent with a class on : .app-tenk, .app-subvibe, .app-riverruler. New app? Add one more .app- block at the bottom. */ :root { --bg: #fbf9f6; --surface: #ffffff; --surface-2: #f3efe9; --ink: #17151f; --muted: #5d5969; --line: #e7e1d8; --brand: #ffc23d; --brand-ink: #17151f; /* app accent: studio yellow by default */ --accent: var(--brand); --accent-2: #ff8a3d; --accent-ink: #8a5a00; /* accent-coloured text on light bg */ --accent-soft: #fff4d6; /* tinted panels */ --on-accent: #17151f; /* text on accent buttons */ --radius: 22px; --radius-sm: 14px; --shadow: 0 1px 2px rgba(23, 21, 31, .05), 0 12px 32px -12px rgba(23, 21, 31, .18); --wrap: 1120px; --gutter: 20px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --bg: #100f15; --surface: #1a1822; --surface-2: #211f2a; --ink: #f4f2f8; --muted: #a9a5b6; --line: #2c2936; --accent-ink: #ffd27a; --accent-soft: #2a2415; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.022em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 7.4vw, 3.9rem); font-weight: 800; letter-spacing: -.035em; } h2 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); font-weight: 800; } h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1em; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .narrow { max-width: 760px; } .muted { color: var(--muted); } .lead { font-size: clamp(1.08rem, 2.6vw, 1.3rem); color: var(--muted); max-width: 38em; } .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--surface); padding: 8px 14px; border-radius: 10px; } /* ---------- header / footer ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; text-decoration: none; } .logo-mark { width: 30px; height: 30px; flex: none; } .nav { display: flex; align-items: center; gap: 4px; font-size: .95rem; } .nav a { text-decoration: none; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-weight: 600; } .nav a:hover { color: var(--ink); background: var(--surface-2); } .nav .lang { color: var(--ink); border: 1px solid var(--line); padding: 6px 10px; margin-left: 4px; font-size: .85rem; } @media (max-width: 420px) { .nav .hide-sm { display: none; } } .site-footer { margin-top: 56px; border-top: 1px solid var(--line); padding: 36px 0 44px; font-size: .95rem; color: var(--muted); } .site-footer .wrap { display: grid; gap: 20px; } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } .footer-links a { text-decoration: none; font-weight: 600; color: var(--ink); } .footer-links a:hover { text-decoration: underline; } @media (min-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr auto; align-items: center; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 700 1rem/1 var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--surface-2); } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* App Store button (drawn, not an image — no extra request) */ .store-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 13px; background: #000; color: #fff; text-decoration: none; border: 1px solid #3a3a3a; line-height: 1.05; transition: transform .15s ease; } .store-btn:hover { transform: translateY(-1px); text-decoration: none; } .store-btn svg { width: 26px; height: 26px; flex: none; fill: currentColor; } .store-btn small { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .01em; } .store-btn strong { display: block; font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em; } .store-btn.sm { height: 44px; padding: 0 14px 0 11px; border-radius: 11px; gap: 8px; } .store-btn.sm svg { width: 21px; height: 21px; } .store-btn.sm small { font-size: .6rem; } .store-btn.sm strong { font-size: 1.05rem; } @media (prefers-color-scheme: dark) { .store-btn { border-color: #55525f; } } /* ---------- sections ---------- */ .section { padding: 56px 0; } .section-tight { padding: 32px 0; } .section-head { margin-bottom: 28px; } .section-head p { color: var(--muted); max-width: 36em; } @media (min-width: 900px) { .section { padding: 88px 0; } } /* ---------- home ---------- */ .home-hero { padding: 44px 0 20px; } .home-hero h1 { max-width: 13em; } .home-hero .lead { margin-bottom: 26px; } .icon-stack { display: flex; margin-bottom: 26px; } .icon-stack img { width: 60px; height: 60px; border-radius: 15px; box-shadow: var(--shadow); border: 3px solid var(--bg); } .icon-stack img + img { margin-left: -14px; } @media (min-width: 900px) { .home-hero { padding: 88px 0 40px; } .icon-stack img { width: 76px; height: 76px; border-radius: 19px; } } .app-grid { display: grid; gap: 16px; } @media (min-width: 700px) { .app-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1020px) { .app-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .app-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .app-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .app-card-top { display: flex; align-items: center; gap: 14px; } .app-card-top img { width: 64px; height: 64px; border-radius: 15px; flex: none; } .app-card h3 { margin: 0; font-size: 1.3rem; } .app-card .tag { font-size: .85rem; color: var(--muted); font-weight: 600; } .app-card p { margin: 0; color: var(--muted); flex: 1; } .app-card .btn-row { gap: 10px; } .app-card .btn { min-height: 44px; padding: 0 18px; } .badge-soon { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: .78rem; font-weight: 700; } .about { display: grid; gap: 24px; } .about p { font-size: 1.12rem; } @media (min-width: 900px) { .about { grid-template-columns: 1fr 1.4fr; gap: 64px; } } .contact-card { display: grid; gap: 18px; padding: 28px; border-radius: var(--radius); background: var(--ink); color: var(--bg); } .contact-card h2 { margin: 0; } .contact-card p { margin: 0; opacity: .78; } .contact-card .mail { font-size: clamp(1.2rem, 4.4vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; word-break: break-all; color: var(--brand); } @media (min-width: 900px) { .contact-card { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 44px; } } /* ---------- app page ---------- */ .app-hero { position: relative; overflow: hidden; padding: 28px 0 8px; } .app-hero::before { content: ""; position: absolute; inset: -30% -20% auto; height: 520px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); z-index: -1; pointer-events: none; } .app-hero .wrap { display: grid; gap: 30px; align-items: center; } .app-id { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-weight: 700; } .app-id img { width: 52px; height: 52px; border-radius: 13px; box-shadow: var(--shadow); } .app-id span { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); } .app-hero .lead { margin-bottom: 24px; } .hero-meta { margin-top: 14px; font-size: .88rem; color: var(--muted); } .hero-shot { justify-self: center; width: min(74vw, 300px); } .hero-shot img { width: 100%; border-radius: 30px; box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--accent) 55%, rgba(0,0,0,.4)); } @media (min-width: 900px) { .app-hero { padding: 72px 0 24px; } .app-hero .wrap { grid-template-columns: 1.25fr 1fr; gap: 56px; } .hero-shot { width: 330px; } } .benefits { display: grid; gap: 14px; } @media (min-width: 700px) { .benefits { grid-template-columns: repeat(2, 1fr); gap: 18px; } } .benefit { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .benefit .ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-ink); } .benefit .ico svg { width: 24px; height: 24px; } .benefit p { margin: 0; color: var(--muted); } .shots { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 18px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: thin; } .shots img { flex: none; width: 200px; aspect-ratio: 460 / 995; border-radius: 22px; scroll-snap-align: center; background: var(--surface-2); border: 1px solid var(--line); } @media (min-width: 900px) { .shots img { width: 230px; } } .steps { counter-reset: step; display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; } @media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 18px; } } .steps li { counter-increment: step; position: relative; padding: 24px; border-radius: var(--radius); background: var(--accent-soft); } .steps li::before { content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; } .steps p { margin: 0; color: var(--muted); } .faq { display: grid; gap: 10px; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } .faq summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; font-weight: 700; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; } .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq details > div { padding: 0 20px 18px; color: var(--muted); } .faq details > div p:last-child { margin: 0; } .cta-band { display: grid; gap: 18px; justify-items: start; padding: 30px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); } .cta-band h2 { margin: 0; } .cta-band p { margin: 0; opacity: .85; } @media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; padding: 44px; } } /* notify / support forms */ .form { display: grid; gap: 12px; width: 100%; max-width: 520px; } .form label { font-weight: 600; font-size: .92rem; } .form input, .form select, .form textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; } .form textarea { min-height: 130px; resize: vertical; } .form .row { display: grid; gap: 6px; } .form-inline { display: flex; flex-wrap: wrap; gap: 10px; } .form-inline input { flex: 1 1 220px; } .form-note { font-size: .85rem; color: var(--muted); margin: 0; } .form-status { font-weight: 600; margin: 0; min-height: 1.4em; } /* ---------- legal / text pages ---------- */ .page-head { padding: 40px 0 8px; } @media (min-width: 900px) { .page-head { padding: 72px 0 16px; } } .prose { font-size: 1.02rem; } .prose h2 { font-size: 1.5rem; margin-top: 2.2em; scroll-margin-top: 80px; } .prose h3 { margin-top: 1.6em; scroll-margin-top: 80px; } .prose ul { padding-left: 1.2em; } .prose li { margin-bottom: .4em; } .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 0 0 1.2em; } .prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); } .prose th { font-weight: 700; background: var(--surface-2); } .table-scroll { overflow-x: auto; } .notice { padding: 14px 18px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px dashed var(--accent-ink); color: var(--ink); font-size: .95rem; } .toc { padding: 18px 22px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); } .toc ol { margin: 0; padding-left: 1.2em; } .app-section { border-left: 5px solid var(--accent); padding-left: 18px; margin-top: 2.4em; } .app-section h2 { margin-top: 0; } /* 404 */ .center-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 40px 0; } .center-page .big { font-size: clamp(5rem, 22vw, 9rem); font-weight: 900; letter-spacing: -.06em; line-height: 1; margin: 0; background: linear-gradient(135deg, var(--brand), #ff7a45); -webkit-background-clip: text; background-clip: text; color: transparent; } /* language hint (main.js) */ .lang-hint { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 12px; max-width: 460px; margin: 0 auto; padding: 12px 12px 12px 18px; border-radius: 16px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); font-size: .95rem; } .lang-hint a { color: var(--brand); font-weight: 700; } .lang-hint button { margin-left: auto; background: transparent; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; padding: 6px 10px; cursor: pointer; } /* ---------- per-app accents ---------- */ .app-tenk { --accent: #ff6a1f; --accent-2: #e2489e; --accent-ink: #b8410a; --accent-soft: #fff0e6; --on-accent: #1d0c03; } .app-subvibe { --accent: #ff5277; --accent-2: #6a6bff; --accent-ink: #cc1f47; --accent-soft: #ffeef2; --on-accent: #22050d; } .app-riverruler { --accent: #1c74dc; --accent-2: #22a565; --accent-ink: #1463bf; --accent-soft: #e9f3ff; --on-accent: #ffffff; } /* Template for the next app — rename to .app- and pick colours. --accent: buttons and highlights; --accent-ink: accent text on the page background (keep 4.5:1 contrast); --on-accent: text on accent buttons. */ .app-new { --accent: #7c5cff; --accent-2: #22b8cf; --accent-ink: #5b3fe0; --accent-soft: #f1edff; --on-accent: #ffffff; } @media (prefers-color-scheme: dark) { .app-new { --accent-ink: #b3a3ff; --accent-soft: #1f1a36; } .app-tenk { --accent-ink: #ff9a5c; --accent-soft: #2c1a10; } .app-subvibe { --accent-ink: #ff8aa4; --accent-soft: #2c1520; } .app-riverruler { --accent-ink: #7ab8ff; --accent-soft: #10223a; --on-accent: #04121f; --accent: #4b9cf5; } }