/* Rise — shared dusk tokens + base. Visual identity comes from each version's own stylesheet; this holds the palette, resets, scroll-reveal base, the film grain, the App Store badge, and the striped placeholder slots. */ :root { --bg: #13100B; --bg-alt: #1C1812; --surface: #221D16; --surface-2: #2A2419; --ink: #F2E8D6; --ink2: #C5B89D; --ink3: #8A7F6A; --muted: #5E5646; --line: #2A241C; --line-bright: #3A3125; --accent: #E8A24A; --accent-deep: #C97A2C; --ember: #E8560E; --sage: #9CAF7E; --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; --reveal-y: 24px; --maxw: 1200px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ::selection { background: rgba(232,162,74,0.3); color: var(--ink); } /* eyebrow / mono labels */ .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } /* ── film grain (one fixed layer, behind nothing interactive) ── */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; background-image: radial-gradient(#fff 0.5px, transparent 0.5px); background-size: 3px 3px; mix-blend-mode: screen; } /* ── scroll reveal ── Content is visible by DEFAULT. The hidden+animated state applies only when carries .reveal-armed, which motion.js adds up front and KEEPS only after confirming the renderer actually advances CSS transitions. On engines that freeze the animation clock (some embedded preview webviews) it disarms, so content is shown rather than stuck invisible. */ .reveal-armed [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity 0.9s cubic-bezier(0.2,0.7,0.2,1), transform 0.9s cubic-bezier(0.2,0.7,0.2,1); transition-delay: var(--rd, 0s); } .reveal-armed [data-reveal="fade"] { transform: none; } .reveal-armed [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-armed [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } html { scroll-behavior: auto; } } /* ── App Store badge (injected via [data-appstore]) ── */ .appstore { display: inline-flex; align-items: center; gap: 10px; padding: 9px 28px 9px 22px; border-radius: 12px; background: var(--ink); color: var(--bg); transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.25s; white-space: nowrap; } .appstore:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } .appstore svg { width: 20px; height: 22px; } .appstore .as-txt { display: flex; flex-direction: column; line-height: 1; text-align: left; } .appstore .as-txt small { font-size: 9.5px; letter-spacing: 0.04em; opacity: 0.7; margin-bottom: 2px; } .appstore .as-txt b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .appstore.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-bright); } .appstore.ghost:hover { border-color: var(--accent); } /* ── striped placeholder slot ── */ .ph { position: relative; background: repeating-linear-gradient(135deg, var(--surface) 0 11px, var(--bg-alt) 11px 22px); border: 1px solid var(--line); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--ink3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; overflow: hidden; } .ph::after { content: attr(data-label); padding: 5px 10px; background: var(--bg); border: 1px solid var(--line-bright); border-radius: 999px; } /* ── phone device shell (placeholder app screen) ── */ .device { position: relative; border-radius: 44px; background: #0B0907; border: 1px solid var(--line-bright); box-shadow: 0 40px 100px rgba(0,0,0,0.6), inset 0 0 0 6px #050403; padding: 10px; } .device .screen { position: relative; border-radius: 36px; overflow: hidden; height: 100%; } /* shared radial bloom helper */ .bloom { position: absolute; pointer-events: none; background: radial-gradient(ellipse at center, rgba(232,162,74,0.30), rgba(19,16,11,0) 68%); z-index: 0; } /* ── Blog index ── */ .blog-main { padding-top: 90px; } .blog-inner { max-width: 800px; margin: 0 auto; padding: 64px 36px 80px; } .blog-header { margin-bottom: 52px; } .blog-header .eyebrow { margin: 0 0 14px; } .blog-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); margin: 0 0 16px; } .blog-sub { font-size: 17px; color: var(--ink2); line-height: 1.6; margin: 0; } .blog-list { display: flex; flex-direction: column; } .blog-card { display: block; padding: 28px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); } .blog-card:last-child { border-bottom: 1px solid var(--line); } .blog-card-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .blog-card-cat { background: var(--surface); color: var(--accent); border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .blog-card-date { font-size: 12px; color: var(--ink3); font-family: var(--mono); } .blog-card-title { font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 2.2vw, 22px); color: var(--ink); line-height: 1.3; margin: 0 0 8px; letter-spacing: -0.01em; transition: color 0.15s; } .blog-card:hover .blog-card-title { color: var(--accent); } .blog-card-desc { font-size: 15px; color: var(--ink2); line-height: 1.6; margin: 0 0 12px; } .blog-card-read { font-size: 13px; color: var(--accent); font-weight: 500; opacity: 0.7; transition: opacity 0.15s; } .blog-card:hover .blog-card-read { opacity: 1; } .blog-empty { color: var(--ink3); padding: 4rem 0; text-align: center; } @media (max-width: 880px) { .blog-inner { padding: 48px 18px 60px; } } /* ── Blog post ── */ .bp-main { padding-top: 90px; } .bp-wrap { max-width: 760px; margin: 0 auto; padding: 64px 36px 80px; } .bp-back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13px; font-weight: 500; margin-bottom: 2rem; opacity: 0.8; transition: opacity 0.2s; } .bp-back:hover { opacity: 1; } .bp-meta { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--ink3); margin-bottom: 16px; flex-wrap: wrap; } .bp-category { background: var(--surface); color: var(--accent); border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .bp-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 16px; color: var(--ink); } .bp-desc { font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--ink2); line-height: 1.65; margin: 0 0 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); max-width: 640px; } .bp-body h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.8vw, 28px); letter-spacing: -0.015em; margin: 48px 0 14px; line-height: 1.15; border-top: 1px solid var(--line); padding-top: 28px; color: var(--ink); } .bp-body h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; letter-spacing: -0.01em; margin: 28px 0 8px; color: var(--ink); } .bp-body p { color: var(--ink2); font-size: 16px; line-height: 1.75; margin: 0 0 18px; } .bp-body ul, .bp-body ol { color: var(--ink2); font-size: 16px; line-height: 1.75; padding-left: 22px; margin: 0 0 18px; } .bp-body li { margin-bottom: 8px; } .bp-body strong { color: var(--ink); font-weight: 600; } .bp-body em { color: var(--accent); font-style: italic; } .bp-body blockquote { border-left: 3px solid var(--accent); padding: 14px 20px; margin: 28px 0; background: var(--surface); border-radius: 0 8px 8px 0; } .bp-body blockquote p { color: var(--ink); font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.55; margin: 0; } @media (max-width: 880px) { .bp-wrap { padding: 48px 18px 60px; } }