/* Cently website — cently.nodemint.dev * * Built from the Claude Design project "Cently Web Design System" and the * page designs (Features, Help, Download, 404 — responsive review). The * design canvas switched width and theme with data attributes; here they * are real media queries: * lg ≥ 1024px (designed at 1440) * md 640–1023px (designed at 768) * sm < 640px (designed at 390) * and dark mode follows the visitor's system setting. `data-theme` on * overrides it (used for testing only; the site has no toggle). */ /* ---------- Tokens: light ---------- */ :root { color-scheme: light; --brand: #0B3D2E; --brand-hover: #0A3327; --brand-soft: rgba(11,61,46,0.06); --on-brand: #F4FBF7; --bg: #FAFAF7; --bg-sunk: #F1F2EC; --card: #FFFFFF; --text: #14201C; --ring: #A7F3D0; --muted: #4C5C56; --line: rgba(11,61,46,0.12); --line-strong: rgba(11,61,46,0.22); --income: #05684A; --expense: #C20E2E; --warn-bg: #FDF0D5; --warn-ink: #7C3D07; --shadow-sm: 0 1px 2px rgba(11,61,46,0.06), 0 1px 3px rgba(11,61,46,0.05); --shadow-md: 0 2px 4px rgba(11,61,46,0.04), 0 8px 24px rgba(11,61,46,0.08); --shadow-lg: 0 4px 10px rgba(11,61,46,0.05), 0 20px 48px rgba(11,61,46,0.12); --screen: #FAFAF7; /* layout (lg) */ --pad-x: 40px; --maxw: 1200px; --sec-y: 80px; --hdr-h: 72px; --h1: 56px; --h1-lh: 1.07; --h2: 34px; --h3: 21px; --lead: 20px; --body: 17px; --card-pad: 30px; --phone-w: 280px; } /* ---------- Tokens: dark ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --brand: #A7F3D0; --brand-hover: #8FE9C0; --brand-soft: rgba(167,243,208,0.10); --on-brand: #06281E; --bg: #101614; --bg-sunk: #0B100E; --card: #17201D; --text: #F2F5F3; --ring: rgba(167,243,208,0.55); --muted: #AEBDB6; --line: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.18); --income: #34D399; --expense: #FB7185; --warn-bg: #3B2A0C; --warn-ink: #FCD34D; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --screen: #101614; } } :root[data-theme="dark"] { color-scheme: dark; --brand: #A7F3D0; --brand-hover: #8FE9C0; --brand-soft: rgba(167,243,208,0.10); --on-brand: #06281E; --bg: #101614; --bg-sunk: #0B100E; --card: #17201D; --text: #F2F5F3; --ring: rgba(167,243,208,0.55); --muted: #AEBDB6; --line: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.18); --income: #34D399; --expense: #FB7185; --warn-bg: #3B2A0C; --warn-ink: #FCD34D; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --screen: #101614; } /* ---------- Per-page type scale (lg) ---------- */ [data-page="help"] { --sec-y: 72px; --h1: 52px; --h1-lh: 1.08; --h2: 26px; --h3: 19px; } [data-page="download"] { --h1: 54px; --h2: 30px; --h3: 20px; } [data-page="notfound"] { --sec-y: 96px; --h1: 54px; --h3: 19px; --code: 120px; } /* ---------- md ---------- */ @media (max-width: 1023px) { :root { --pad-x: 32px; --maxw: 704px; --sec-y: 60px; --h1: 40px; --h1-lh: 1.1; --h2: 28px; --h3: 20px; --lead: 19px; --card-pad: 26px; --phone-w: 240px; } [data-page="help"] { --sec-y: 56px; --h1: 38px; --h2: 24px; --h3: 19px; } [data-page="download"] { --h2: 26px; } [data-page="notfound"] { --sec-y: 72px; --code: 96px; --h3: 19px; } } /* ---------- sm ---------- */ @media (max-width: 639px) { /* Full width with a 20px gutter (the canvas's 350px box read as a second margin on a real phone). */ :root { --pad-x: 20px; --maxw: 100%; --sec-y: 44px; --hdr-h: 64px; --h1: 30px; --h1-lh: 1.15; --h2: 23px; --h3: 19px; --lead: 17px; --body: 16px; --card-pad: 20px; --phone-w: 240px; } [data-page="help"] { --h1: 29px; --h2: 21px; --h3: 18px; } [data-page="download"] { --h2: 22px; } [data-page="notfound"] { --sec-y: 52px; --h3: 18px; --code: 72px; } } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif; font-size: var(--body); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } a { color: var(--brand); text-underline-offset: 3px; } a:hover { color: var(--brand-hover); } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; } h1, h2, h3, .display { font-family: Manrope, system-ui, sans-serif; } p { margin: 0; } img { max-width: 100%; display: block; } .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: 10px; } .skip:focus { left: 8px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .sec { padding-top: var(--sec-y); padding-bottom: var(--sec-y); } .sunk { background: var(--bg-sunk); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .h1 { font-weight: 800; font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: -0.03em; margin: 0 0 18px; text-wrap: balance; } .h2 { font-weight: 700; font-size: var(--h2); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 14px; } .h3 { font-weight: 700; font-size: var(--h3); margin: 0 0 12px; } .lead { font-size: var(--lead); line-height: 1.6; color: var(--muted); text-wrap: pretty; } .muted { color: var(--muted); } .measure { max-width: 54ch; } .stack > * + * { margin-top: 14px; } /* ---------- Buttons, pills ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 700; text-decoration: none; font-size: 16px; background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); transition: background .15s; } .btn:hover { background: var(--brand-hover); color: var(--on-brand); } .btn-outline { background: transparent; color: var(--brand); } .btn-outline:hover { background: var(--brand-soft); color: var(--brand); } .pill { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--brand); color: var(--on-brand); } .pill-outline { background: transparent; color: var(--brand); border: 1px solid var(--brand); } .pill-sm { height: 24px; padding: 0 10px; font-size: 11.5px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); } .site-header .bar { height: var(--hdr-h); display: flex; align-items: center; gap: 28px; } .brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--text); } .brand:hover { color: var(--text); } .mark { width: 32px; height: 32px; border-radius: 10px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-family: Manrope, sans-serif; font-weight: 800; font-size: 18px; } .wordmark { font-family: Manrope, sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; } .nav { display: flex; gap: 26px; align-items: center; } .nav a { font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; padding: 10px 0; } .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand); } .spacer { flex: 1; } .burger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font-size: 18px; line-height: 1; } .hdr-cta { height: 44px; padding: 0 20px; } .menu { display: none; border-top: 1px solid var(--line); background: var(--bg); } .menu a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--pad-x); font-weight: 600; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); } .menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); } /* The menu's link rule outranks .btn; restore the button's own look. */ .menu a.btn { margin: 14px var(--pad-x) 18px; display: flex; justify-content: center; padding: 0 22px; min-height: 48px; color: var(--on-brand); border-bottom: 0; box-shadow: none; } @media (max-width: 639px) { .nav, .hdr-cta { display: none; } .burger { display: inline-flex; align-items: center; justify-content: center; } .site-header.open .menu { display: block; } } /* ---------- Cards, grids ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); padding: var(--card-pad); } .card-sm { border-radius: 16px; padding: 18px 20px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 639px) { .grid-2, .split { grid-template-columns: 1fr; } } .note-warn { border-radius: 12px; background: var(--warn-bg); color: var(--warn-ink); padding: 12px 14px; font-size: 14px; line-height: 1.5; font-weight: 600; } /* ---------- Phone frames and screenshot slots ---------- */ .phones { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } /* Two phones side by side share their column instead of wrapping into a tall stack (at 1440 two 280px frames are wider than the column). */ .phones .phone { width: min(var(--phone-w), calc(50% - 10px)); } @media (max-width: 639px) { .phones .phone { width: var(--phone-w); } } .phone { width: var(--phone-w); aspect-ratio: 300 / 612; border-radius: 42px; background: #0A0E0D; padding: 9px; box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,0.10); margin: 0; } .phone .screen { width: 100%; height: 100%; border-radius: 34px; background: var(--screen); padding: 16px; overflow: hidden; } .phone .screen img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; } .slot { border: 2px dashed var(--line-strong); border-radius: 20px; width: 100%; height: 100%; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.5; } .slot small { font-weight: 400; font-size: 13px; } .slot-wide { aspect-ratio: 16 / 10; height: auto; border-radius: 14px; } /* ---------- Hero figure: Safe-to-Spend ---------- */ .hero-card { width: 100%; max-width: 400px; border-radius: 24px; padding: 32px; box-shadow: var(--shadow-lg); background: linear-gradient(160deg, #14614A 0%, #0B3D2E 58%, #07291F 100%); } .hero-card .label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #A7F3D0; margin-bottom: 12px; } .hero-card .amount { font-family: Manrope, sans-serif; font-weight: 800; font-size: 42px; letter-spacing: -0.025em; color: #F4FBF7; font-variant-numeric: tabular-nums; line-height: 1.05; } .hero-card .foot { font-size: 15px; color: #D8EDE4; margin-top: 10px; } /* ---------- Store badges (until the store listings exist) ---------- */ .badges { display: flex; gap: 14px; flex-wrap: wrap; } .badge { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; height: 56px; min-width: 186px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--brand-soft); color: var(--text); text-decoration: none; line-height: 1.2; } .badge .small { font-size: 12px; color: var(--muted); font-weight: 600; } .badge .big { font-family: Manrope, sans-serif; font-size: 17px; font-weight: 800; } .badges-lg .badge { height: 60px; min-width: 200px; } .badges-sm .badge { height: 48px; min-width: 156px; } .badges-sm .badge .big { font-size: 15px; } /* ---------- Footer ---------- */ .site-footer { background: var(--card); border-top: 1px solid var(--line); } .foot-cols { padding-top: 44px; padding-bottom: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; } .foot-cols p { font-size: 15px; color: var(--muted); margin: 0 0 18px; max-width: 32ch; } .foot-links { display: grid; gap: 2px; } .foot-links a { font-size: 16px; color: var(--text); text-decoration: none; display: flex; align-items: center; min-height: 44px; } .foot-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand); width: fit-content; } .lang { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; font-weight: 600; } .foot-bottom { border-top: 1px solid var(--line); } .foot-bottom .wrap { padding-top: 18px; padding-bottom: 18px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; font-size: 14px; color: var(--muted); } .foot-bottom a { color: var(--muted); } /* ---------- Help ---------- */ .search { display: flex; align-items: center; gap: 12px; max-width: 560px; height: 56px; padding: 0 20px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); } .search input { flex: 1; border: 0; outline: none; background: transparent; min-width: 0; font-family: inherit; font-size: 17px; color: var(--text); } .search input::-webkit-search-cancel-button { cursor: pointer; } .search:focus-within { outline: 3px solid var(--ring); outline-offset: 2px; } .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: 15px; color: var(--muted); align-items: center; } .chip { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-weight: 600; } .doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; } .toc { position: sticky; top: calc(var(--hdr-h) + 24px); } .toc-links { display: grid; gap: 2px; border-left: 1px solid var(--line); } .toc-links a { padding: 8px 14px; min-height: 44px; display: flex; align-items: center; font-size: 15px; text-decoration: none; color: var(--muted); } .toc-links a.active { color: var(--text); font-weight: 700; box-shadow: inset 2px 0 0 var(--brand); } @media (max-width: 1023px) { .doc { grid-template-columns: 1fr; gap: 32px; } .toc { position: static; } } @media (max-width: 639px) { .doc { gap: 26px; } } .faq-group { margin-bottom: 40px; scroll-margin-top: calc(var(--hdr-h) + 24px); } .faq-group .h2 { font-size: var(--h2); margin-bottom: 16px; } .faq-group .h2 small { font-family: 'Nunito Sans', sans-serif; font-size: 15px; font-weight: 400; color: var(--muted); } .faqs { display: grid; gap: 2px; } .faq { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 4px 22px; } .faq summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-family: Manrope, sans-serif; font-weight: 700; font-size: var(--h3); min-height: 44px; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.1em; } .faq[open] summary::after { content: "\2013"; } .faq p { color: var(--muted); margin: 0 0 14px; } .faq p:last-child { margin-bottom: 18px; } .no-results { display: none; } .no-results.show { display: block; } /* ---------- Download ---------- */ .dl-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .qr-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 28px; text-align: center; max-width: 320px; justify-self: center; } .qr-card img { width: 200px; height: 200px; margin: 0 auto 18px; border-radius: 16px; background: #fff; padding: 12px; image-rendering: pixelated; } .platform-first { display: none; font-size: 14px; color: var(--muted); margin-top: 14px; border-left: 2px solid var(--line-strong); padding-left: 12px; } .ticks { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.85; } @media (max-width: 1023px) { .dl-split { grid-template-columns: 1fr; } } @media (max-width: 639px) { .qr-card { display: none; } } /* ---------- 404 ---------- */ .code404 { font-family: Manrope, sans-serif; font-weight: 800; font-size: var(--code); line-height: 1; letter-spacing: -0.04em; color: var(--brand); font-variant-numeric: tabular-nums; margin-bottom: 20px; } .link-card { text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 20px 22px; display: block; transition: border-color .15s; } .link-card:hover { border-color: var(--brand); color: var(--text); } .link-card .t { font-family: Manrope, sans-serif; font-weight: 700; font-size: var(--h3); margin-bottom: 4px; } .link-card .d { font-size: 15px; color: var(--muted); } .slim-footer .wrap { padding-top: 28px; padding-bottom: 28px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; align-items: center; font-size: 15px; color: var(--muted); } .slim-footer nav { display: flex; gap: 20px; flex-wrap: wrap; } .slim-footer nav a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }