/* ============================================================ DEMHA FUTURE — shared design system (the "one place" to theme) Change a token here → it applies to every page that links this file (tools, blog, future pages). The homepage keeps its own inline styles for now and can be migrated onto this later. Per-section theming: add a body class (section-tools / section-blog / section-home) and override tokens under it below — still one file. ============================================================ */ :root{ --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#86868b; --bg:#ffffff; --bg-2:#f5f5f7; --line:#d2d2d7; --line-soft:rgba(0,0,0,0.08); --accent:#0071e3; --accent-hover:#006edb; --accent-link:#0066cc; --good:#1d8a52; --warn:#b15c00; --bad:#c0392b; --radius:18px; --radius-lg:24px; --pill:980px; --maxw:1080px; --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",system-ui,sans-serif; } /* Accent is driven by the header Settings picker (html[data-accent]); no per-section pin so the user's chosen colour flows everywhere (was: body.section-* pinned it to blue). */ /* ============================================================ User settings (header gear): site colour + day/night. Set on / by an early inline script (no flash) + site.js. Blue + light are the defaults. ============================================================ */ html[data-accent="indigo"] { --accent:#5b5bd6; --accent-hover:#4f4fc9; --accent-link:#4f46c5; } html[data-accent="emerald"] { --accent:#0a9d6e; --accent-hover:#0a8c62; --accent-link:#0a8358; } html[data-accent="orange"] { --accent:#f5821f; --accent-hover:#e5751a; --accent-link:#c75f12; } html[data-accent="pink"] { --accent:#e0408a; --accent-hover:#d2397f; --accent-link:#c12f70; } html[data-accent="graphite"]{ --accent:#48484a; --accent-hover:#3a3a3c; --accent-link:#1d1d1f; } /* ---- Dark mode (tokens flip; everything token-based follows automatically) ---- */ html[data-theme="dark"]{ --ink:#f5f5f7; --ink-2:#a1a1a6; --ink-3:#8d8d93; --bg:#1c1c1e; --bg-2:#000000; --line:#38383a; --line-soft:rgba(255,255,255,0.12); --accent:#0a84ff; --accent-hover:#3a9bff; --accent-link:#64b5ff; } html[data-theme="dark"][data-accent="indigo"] { --accent:#8b8bf5; --accent-hover:#9a9af7; --accent-link:#a5a5f8; } html[data-theme="dark"][data-accent="emerald"] { --accent:#1cc98a; --accent-hover:#2dd498; --accent-link:#43dca6; } html[data-theme="dark"][data-accent="orange"] { --accent:#ff9f0a; --accent-hover:#ffb340; --accent-link:#ffc266; } html[data-theme="dark"][data-accent="pink"] { --accent:#ff5fa2; --accent-hover:#ff77b1; --accent-link:#ff90c0; } html[data-theme="dark"][data-accent="graphite"]{ --accent:#aeaeb2; --accent-hover:#c7c7cc; --accent-link:#d1d1d6; } /* chrome pieces with hardcoded light colours → dark equivalents */ html[data-theme="dark"] header.site{ background:rgba(20,20,22,0.8); } html[data-theme="dark"] body{ color-scheme:dark; } html[data-theme="dark"] .btn-ghost:hover{ background:#2c2c2e; } *{ box-sizing:border-box; } [hidden]{ display:none !important; } /* the hidden attribute must always win over component display:flex/grid */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:64px; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.5; letter-spacing:-0.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; display:flex; flex-direction:column; min-height:100dvh; } main{ flex:1 0 auto; } a{ color:inherit; text-decoration:none; } img,svg{ display:block; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; width:100%; } .muted{ color:var(--ink-3); } /* ---- Header / nav ---- */ header.site{ position:sticky; top:0; z-index:100; background:rgba(251,251,253,0.8); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line-soft); } .nav{ display:flex; align-items:center; justify-content:space-between; height:52px; } .brand{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:17px; letter-spacing:-0.01em; color:var(--ink); } .brand .mark{ width:26px; height:26px; border-radius:8px; background:linear-gradient(145deg,#3f74e0,#0071e3); display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,113,227,0.35); } .brand .mark svg{ width:15px; height:15px; } .nav-links{ display:flex; align-items:center; gap:6px; } .nav-links a{ font-size:14px; color:var(--accent); font-weight:500; padding:7px 13px; border-radius:980px; transition:color .2s,background .2s,opacity .2s; } .nav-links a:hover{ color:var(--accent-hover); background:rgba(0,0,0,0.05); } .nav-links a.cta{ color:#fff; background:var(--accent); } .nav-links a.cta:hover{ background:var(--accent-hover); } /* Responsive header: on phones the "DEMHA FUTURE" wordmark wraps to 2 lines and crushes the nav. Drop it to just the logo mark (still links home; a "Home" text link is in the nav too) and tighten the nav spacing so Home · Apps · Blog · ⚙ always sit on one line. */ @media (max-width:600px){ header.site .brand-name{ display:none; } .nav-links{ gap:1px; } .nav-links a{ padding:7px 10px; } } @media (max-width:380px){ .nav-links a{ padding:7px 8px; font-size:13.5px; } } /* Language switcher (.lang-switch / .lang-btn / .lang-menu) + first-visit prompt (.lang-prompt) are injected WITH their CSS by /assets/site.js — kept there so they also style the standalone homepage (which doesn't link this file). Don't re-add them here. */ /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:16px; font-weight:500; line-height:1; padding:13px 22px; border-radius:var(--pill); border:none; cursor:pointer; transition:background .2s,transform .15s,opacity .2s; } .btn-primary{ color:#fff; background:var(--accent); } .btn-primary:hover{ background:var(--accent-hover); } .btn-primary:disabled{ opacity:.5; cursor:default; } .btn-ghost{ color:var(--ink); background:var(--bg-2); } .btn-ghost:hover{ background:#ececef; } .pill{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--accent-link); background:rgba(0,113,227,0.1); padding:6px 13px; border-radius:980px; } /* ---- Shared tool-page template (every /apps// page uses the same building blocks) ---- */ .explain{ max-width:720px; margin:54px auto 0; padding:0 22px 64px; } .explain h2{ font-size:22px; font-weight:600; letter-spacing:-0.015em; margin:0 0 18px; text-align:center; } .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .step{ padding:20px; } .step .n{ font-size:13px; font-weight:600; color:var(--accent-link); } .step h3{ font-size:16px; font-weight:600; margin:8px 0 5px; } .step p{ font-size:14px; color:var(--ink-2); margin:0; line-height:1.45; } @media (max-width:640px){ .steps{ grid-template-columns:1fr; } } /* ---- Card ---- */ .card{ background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:0 1px 2px rgba(0,0,0,0.04); } /* ---- Editable page content (admin-built blocks, shown after "How it works") ---- */ .page-content{ max-width:760px; margin:0 auto; padding:0 22px 70px; display:flex; flex-direction:column; gap:26px; } .pc-text h3{ font-size:clamp(20px,3vw,26px); font-weight:700; letter-spacing:-0.015em; margin:0 0 10px; } .pc-text p{ font-size:16px; color:var(--ink-2); line-height:1.6; margin:0; } .pc-img{ width:100%; border-radius:var(--radius); display:block; } .pc-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .pc-carousel{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; } .pc-carousel img{ height:240px; width:auto; border-radius:var(--radius); scroll-snap-align:start; flex:0 0 auto; object-fit:cover; } .pc-carousel::-webkit-scrollbar{ height:8px; } .pc-carousel::-webkit-scrollbar-thumb{ background:var(--line); border-radius:980px; } .pc-apps{ width:min(1120px, 94vw); margin-left:50%; transform:translateX(-50%); } .pc-apps h3{ font-size:clamp(18px,2.6vw,22px); font-weight:600; letter-spacing:-0.01em; margin:0 0 16px; text-align:center; } /* Show exactly `--cap` cards per row (the chosen per-row). When the row is narrow the cards scale DOWN proportionally (icon + text + padding all shrink together via container queries), never just width-squished. On phones drop to 2 / 1 so they don't get microscopic. */ .pc-apps-grid{ display:grid; gap:16px; justify-content:center; margin-inline:auto; grid-template-columns:repeat(var(--cap,4), minmax(0,1fr)); max-width:calc(var(--cap,4) * 360px + (var(--cap,4) - 1) * 16px); } @media (max-width:680px){ .pc-apps-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:440px){ .pc-apps-grid{ grid-template-columns:1fr; } } .pc-appcard{ container-type:inline-size; display:flex; align-items:center; gap:4%; padding:6.5%; border-radius:var(--radius); text-decoration:none; color:inherit; background:var(--bg); box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent), 0 10px 26px -16px color-mix(in srgb, var(--accent) 42%, transparent); transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; } .pc-appcard:hover{ transform:translateY(-4px); box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 78%, transparent), 0 22px 48px -24px color-mix(in srgb, var(--accent) 48%, transparent); } .pc-appcard .ic{ width:clamp(34px,17cqw,48px); height:clamp(34px,17cqw,48px); border-radius:12px; flex:0 0 auto; display:grid; place-items:center; background:var(--bg-2); color:var(--accent); } .pc-appcard .ic svg{ width:52%; height:52%; } .pc-appcard-body{ display:flex; flex-direction:column; flex:1; min-width:0; } .pc-appcard .t{ font-size:clamp(13px,6.5cqw,17px); font-weight:600; letter-spacing:-0.01em; } .pc-appcard .d{ font-size:clamp(11px,5.5cqw,14px); color:var(--ink-2); margin-top:3px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .pc-appcard .cat{ font-size:clamp(9px,3.8cqw,11px); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; } /* ---- Footer ---- */ footer.site{ border-top:1px solid var(--line); background:var(--bg-2); padding:18px 0 22px; margin-top:auto; } .foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; } .foot .copy{ font-size:12px; color:var(--ink-2); } .foot-links{ display:flex; flex-wrap:wrap; gap:2px; } .foot-links a{ font-size:12px; color:var(--ink-2); padding:5px 10px; border-radius:8px; transition:color .2s; cursor:pointer; } .foot-links a:hover{ color:var(--accent); } :focus-visible{ outline:3px solid rgba(0,113,227,0.45); outline-offset:3px; border-radius:6px; } /* ---- Blog ---- */ .blog-hero{ text-align:center; padding:60px 0 22px; } .blog-hero h1{ font-size:clamp(32px,6vw,52px); font-weight:700; letter-spacing:-0.025em; margin:12px 0 10px; } .blog-hero p{ font-size:clamp(16px,2vw,20px); color:var(--ink-2); max-width:48ch; margin:0 auto; line-height:1.45; } .posts{ max-width:720px; margin:0 auto; padding:18px 22px 30px; display:grid; gap:16px; } .postcard{ display:block; padding:24px 26px; transition:transform .25s, box-shadow .25s; } .postcard:hover{ box-shadow:0 16px 40px -24px rgba(0,0,0,0.2); transform:translateY(-3px); } /* postcard accent ring */ .postcard{ box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent), 0 12px 30px -18px color-mix(in srgb, var(--accent) 42%, transparent); transition:box-shadow .25s ease, transform .25s ease; } .postcard:hover{ box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, transparent), 0 24px 50px -24px color-mix(in srgb, var(--accent) 50%, transparent); } .postcard-cover{ width:100%; aspect-ratio:1200/630; object-fit:cover; border-radius:12px; margin:0 0 16px; display:block; background:var(--bg-2); } .postcard .meta{ font-size:13px; color:var(--ink-3); } .postcard h2{ font-size:22px; font-weight:600; letter-spacing:-0.015em; margin:6px 0 8px; } .postcard p{ font-size:15.5px; color:var(--ink-2); margin:0; line-height:1.5; } .pager{ max-width:720px; margin:0 auto; padding:0 22px 50px; display:flex; justify-content:space-between; font-size:14px; } .pager a{ color:var(--accent-link); } article.post{ max-width:720px; margin:0 auto; padding:30px 22px 10px; } .post-head h1{ font-size:clamp(28px,4.6vw,42px); font-weight:700; letter-spacing:-0.02em; line-height:1.12; margin:8px 0 12px; } .post-byline{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-3); } .byline-ava{ width:30px; height:30px; border-radius:50%; background:linear-gradient(145deg,#3f74e0,#0071e3); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 auto; } .post-cover{ width:100%; border-radius:var(--radius); margin:18px 0 4px; } .post-body{ font-size:17px; line-height:1.7; color:var(--ink); } .post-body h2{ font-size:25px; font-weight:700; letter-spacing:-0.015em; margin:34px 0 12px; } .post-body h3{ font-size:20px; font-weight:600; margin:26px 0 10px; } .post-body p{ margin:0 0 18px; } .post-body a{ color:var(--accent-link); text-decoration:underline; } .post-body ul,.post-body ol{ margin:0 0 18px; padding-left:24px; } .post-body li{ margin:6px 0; } .post-body blockquote{ margin:18px 0; padding:4px 18px; border-left:3px solid var(--line); color:var(--ink-2); } .post-body img{ max-width:100%; border-radius:12px; margin:18px 0; } /* Night mode: app screenshots are usually bright. If a post image has no `-dark` sibling (site.js swaps to one when present), soften it so a white panel never flashes the eyes. */ html[data-theme="dark"] .post-body img{ filter:brightness(.86) contrast(1.03); border:1px solid var(--line-soft); } html[data-theme="dark"] .post-body img:hover{ filter:none; } .post-body pre{ background:var(--bg-2); border-radius:12px; padding:16px; overflow:auto; margin:18px 0; } .post-body code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; } .author-box{ max-width:720px; margin:28px auto; padding:22px 26px; display:flex; gap:15px; align-items:flex-start; } .author-box .ava{ width:46px; height:46px; border-radius:50%; background:linear-gradient(145deg,#3f74e0,#0071e3); flex:0 0 auto; display:grid; place-items:center; color:#fff; font-weight:700; font-size:18px; } .author-box .ab h3{ font-size:16px; font-weight:600; margin:0 0 4px; } .author-box .ab p{ font-size:14px; color:var(--ink-2); margin:0; line-height:1.5; } .subscribe{ max-width:720px; margin:26px auto 60px; padding:26px; text-align:center; } .subscribe h3{ font-size:20px; font-weight:600; margin:0 0 6px; } .subscribe p{ font-size:14px; color:var(--ink-2); margin:0 0 16px; } .subscribe form{ display:flex; gap:10px; max-width:430px; margin:0 auto; } .subscribe input{ flex:1; font:inherit; font-size:15px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); } .subscribe input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,0.15); } .subscribe .note{ font-size:12px; color:var(--ink-3); margin-top:10px; } .back-link{ max-width:720px; margin:0 auto; padding:18px 22px 0; } .back-link a{ color:var(--accent-link); font-size:14px; } @media(max-width:760px){ .subscribe form{ flex-direction:column; } } /* header/footer: accent ring + accent shadow (like the cards), lifts on hover */ header.site{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 6px 20px -12px color-mix(in srgb, var(--accent) 45%, transparent); transition:box-shadow .25s ease; } header.site:hover{ box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 62%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--accent) 55%, transparent); } footer.site{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent), 0 -6px 20px -12px color-mix(in srgb, var(--accent) 38%, transparent); transition:box-shadow .25s ease; } footer.site:hover{ box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 -14px 34px -14px color-mix(in srgb, var(--accent) 50%, transparent); }