/* ============================================================================ OZJAM — Design System Dark / cinematic. Built for cPanel static hosting. No build step. ------------------------------------------------------------------------ 00 Reset & base 01 Tokens 02 Typography 03 Layout primitives 04 Atmosphere (aurora, grain, grid) 05 Buttons & badges 06 Cards & surfaces 07 Navigation 08 Hero 09 Sections & feature blocks 10 Device mockups (iPhone frame) 11 Marquee, stats, timeline, accordion 12 Forms 13 Prose (legal / blog) 14 Footer 15 Motion & reveal 16 Utilities 17 Responsive ========================================================================== */ /* ---------------------------------------------------------------- 00 reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; /* clip, not hidden — hidden on the root would break position: sticky */ overflow-x: clip; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; } ::selection { background: rgba(99, 102, 241, .35); color: #fff; } /* --------------------------------------------------------------- 01 tokens */ :root { /* Surfaces */ --bg-0: #04060c; --bg-1: #070a13; --bg-2: #0a0e1a; --bg-3: #0e1322; --surface: rgba(255, 255, 255, .034); --surface-2: rgba(255, 255, 255, .06); --surface-3: rgba(255, 255, 255, .09); --stroke: rgba(255, 255, 255, .08); --stroke-2: rgba(255, 255, 255, .14); --stroke-strong: rgba(255, 255, 255, .22); /* Text */ --text: #eef1f7; --text-1: #a8b1c3; --text-2: #737d92; --text-3: #4c5568; /* Brand */ --indigo: #6366f1; --violet: #a855f7; --cyan: #22d3ee; --gold: #f5c451; --gold-2: #fbbf24; --blue: #3b82f6; --green: #34d399; --red: #f87171; --accent: var(--indigo); --accent-soft: rgba(99, 102, 241, .16); --accent-line: rgba(99, 102, 241, .34); --grad-brand: linear-gradient(115deg, #6366f1 0%, #a855f7 46%, #22d3ee 100%); --grad-gold: linear-gradient(115deg, #fbbf24 0%, #f5c451 50%, #fde68a 100%); --grad-text: linear-gradient(100deg, #ffffff 0%, #dbe2f0 40%, #9aa6c0 100%); /* Type */ --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace; /* Space */ --gutter: clamp(20px, 5vw, 40px); --maxw: 1200px; --maxw-nr: 760px; --section: clamp(72px, 11vw, 148px); /* Radii */ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; /* Shadow */ --sh-sm: 0 1px 2px rgba(0, 0, 0, .4); --sh-md: 0 12px 32px -12px rgba(0, 0, 0, .65); --sh-lg: 0 40px 80px -32px rgba(0, 0, 0, .8); --sh-glow: 0 0 0 1px rgba(99, 102, 241, .28), 0 22px 60px -22px rgba(99, 102, 241, .5); --focus: #8b93ff; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --nav-h: 68px; } /* Per-app accent theming — set data-accent on or a section */ [data-accent="warry"] { --accent: #3b82f6; --accent-soft: rgba(59, 130, 246, .16); --accent-line: rgba(59, 130, 246, .36); --grad-brand: linear-gradient(115deg, #2563eb 0%, #3b82f6 45%, #60a5fa 100%); --sh-glow: 0 0 0 1px rgba(59, 130, 246, .28), 0 22px 60px -22px rgba(59, 130, 246, .5); } /* PurrBuddy is a warm, playful game — amber rather than the studio indigo. */ [data-accent="purrbuddy"] { --accent: #f59e0b; --accent-soft: rgba(245, 158, 11, .15); --accent-line: rgba(245, 158, 11, .38); --grad-brand: linear-gradient(115deg, #f97316 0%, #f59e0b 48%, #fcd34d 100%); --sh-glow: 0 0 0 1px rgba(245, 158, 11, .3), 0 22px 60px -22px rgba(245, 158, 11, .5); } /* ----------------------------------------------------------- 02 typography */ body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--text-1); background: var(--bg-0); font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; min-height: 100vh; } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text); font-weight: 700; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; } .display { font-size: clamp(2.7rem, 7.4vw, 5.05rem); font-weight: 800; line-height: 1.02; letter-spacing: -.042em; } .h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -.035em; } .h2 { font-size: clamp(1.75rem, 4vw, 2.7rem); letter-spacing: -.03em; } .h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); letter-spacing: -.022em; } .h4 { font-size: clamp(1.08rem, 1.7vw, 1.22rem); letter-spacing: -.016em; font-weight: 650; } .lead { font-size: clamp(1.06rem, 1.9vw, 1.28rem); line-height: 1.62; color: var(--text-1); text-wrap: pretty; } .muted { color: var(--text-2); } .faint { color: var(--text-3); } .small { font-size: .875rem; line-height: 1.6; } .tiny { font-size: .8rem; line-height: 1.55; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: .705rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); } .eyebrow::before { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line)); } .grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .grad-brand-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .gold-text { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------------------------------------------------------- 03 layout */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { width: 100%; max-width: var(--maxw-nr); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); position: relative; } .section-sm { padding-block: clamp(48px, 7vw, 84px); } .section-top-0 { padding-top: 0; } .stack > * + * { margin-top: var(--stack-gap, 18px); } .grid { display: grid; gap: clamp(16px, 2.4vw, 26px); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 82px); align-items: center; } .cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .center { text-align: center; } .center-x { margin-inline: auto; } .section-head { max-width: 660px; margin-bottom: clamp(36px, 5vw, 60px); } .section-head.center { margin-inline: auto; } .section-head .h2 { margin-top: 16px; } .section-head .lead { margin-top: 18px; } .rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--stroke-2) 20%, var(--stroke-2) 80%, transparent); margin-block: clamp(40px, 6vw, 72px); } /* ------------------------------------------------------ 04 atmosphere */ .atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, #0d1224 0%, transparent 60%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%, #05070e 100%); } .atmos::after { /* fine grain — pure CSS, no image request */ content: ''; position: absolute; inset: -50%; opacity: .5; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 0); background-size: 3px 3px; mix-blend-mode: overlay; } .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; } .blob-1 { width: 46vw; height: 46vw; min-width: 340px; min-height: 340px; top: -14vw; left: -8vw; background: radial-gradient(circle, rgba(99, 102, 241, .55), transparent 68%); animation: drift-a 26s var(--ease) infinite alternate; } .blob-2 { width: 40vw; height: 40vw; min-width: 300px; min-height: 300px; top: 8vw; right: -12vw; background: radial-gradient(circle, rgba(168, 85, 247, .42), transparent 68%); animation: drift-b 32s var(--ease) infinite alternate; } .blob-3 { width: 36vw; height: 36vw; min-width: 260px; min-height: 260px; top: 62vh; left: 34%; background: radial-gradient(circle, rgba(34, 211, 238, .26), transparent 68%); animation: drift-c 38s var(--ease) infinite alternate; } @keyframes drift-a { to { transform: translate3d(7vw, 5vw, 0) scale(1.14); } } @keyframes drift-b { to { transform: translate3d(-8vw, 7vw, 0) scale(1.08); } } @keyframes drift-c { to { transform: translate3d(5vw, -8vw, 0) scale(1.16); } } /* Faint technical grid used behind key sections */ .gridlines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--stroke) 1px, transparent 1px), linear-gradient(90deg, var(--stroke) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 76%); opacity: .55; } .glow-line { height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line) 35%, rgba(168, 85, 247, .5) 50%, var(--accent-line) 65%, transparent); } /* --------------------------------------------------------- 05 buttons */ .btn { --btn-bg: var(--surface-2); --btn-fg: var(--text); --btn-bd: var(--stroke-2); display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border-radius: var(--r-pill); border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-display); font-size: .935rem; font-weight: 650; letter-spacing: -.008em; line-height: 1; cursor: pointer; position: relative; isolation: isolate; overflow: hidden; white-space: nowrap; transition: transform .25s var(--ease-out), border-color .25s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease); } .btn:hover { transform: translateY(-2px); border-color: var(--stroke-strong); } .btn:active { transform: translateY(0) scale(.985); } .btn svg { width: 17px; height: 17px; flex-shrink: 0; } .btn-primary { --btn-bd: transparent; --btn-fg: #fff; background: var(--grad-brand); box-shadow: 0 14px 34px -14px rgba(99, 102, 241, .75); } .btn-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, #7c7ff5, #b975f8 46%, #4ce0f5); opacity: 0; transition: opacity .3s var(--ease); } .btn-primary:hover { box-shadow: 0 20px 44px -14px rgba(99, 102, 241, .9); } .btn-primary:hover::after { opacity: 1; } .btn-gold { --btn-bd: transparent; --btn-fg: #1a1405; background: var(--grad-gold); box-shadow: 0 14px 34px -14px rgba(251, 191, 36, .6); } .btn-ghost { --btn-bg: transparent; --btn-bd: var(--stroke-2); } .btn-ghost:hover { --btn-bg: var(--surface-2); } .btn-lg { padding: 16px 30px; font-size: 1rem; } .btn-sm { padding: 9px 17px; font-size: .84rem; } .btn-block { width: 100%; } /* App Store badge — drawn, not an image */ .appstore-badge { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px 11px 18px; border-radius: 14px; border: 1px solid var(--stroke-2); background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035)); color: var(--text); transition: transform .28s var(--ease-out), border-color .28s var(--ease), box-shadow .3s var(--ease); } .appstore-badge:hover { transform: translateY(-3px); border-color: var(--stroke-strong); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); } .appstore-badge svg { width: 27px; height: 27px; flex-shrink: 0; } .appstore-badge .as-txt { display: flex; flex-direction: column; line-height: 1.15; } .appstore-badge .as-top { font-size: .655rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); } .appstore-badge .as-btm { font-family: var(--font-display); font-size: 1.08rem; font-weight: 650; letter-spacing: -.02em; } /* Chips / pills */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--stroke); background: var(--surface); font-size: .795rem; font-weight: 500; color: var(--text-1); white-space: nowrap; } .chip svg { width: 14px; height: 14px; opacity: .8; } .chip-accent { border-color: var(--accent-line); background: var(--accent-soft); color: #cfd3ff; } .chip-gold { border-color: rgba(251, 191, 36, .3); background: rgba(251, 191, 36, .1); color: #f7d58c; } .chip-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); animation: pulse-dot 2.2s var(--ease) infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); } 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } } /* ------------------------------------------------- 06 cards & surfaces */ .card { position: relative; border-radius: var(--r-lg); border: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)); padding: clamp(22px, 3vw, 32px); overflow: hidden; isolation: isolate; transition: transform .4s var(--ease-out), border-color .4s var(--ease), box-shadow .4s var(--ease); } /* mouse-tracked spotlight (see ozjam.js) */ .card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .07), transparent 62%); transition: opacity .45s var(--ease); } .card:hover::before { opacity: 1; } .card-hover:hover { transform: translateY(-4px); border-color: var(--stroke-2); box-shadow: var(--sh-lg); } .card-glass { background: rgba(255, 255, 255, .04); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); } /* Gradient hairline border */ .card-lit { border-color: transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad-brand) border-box; border: 1px solid transparent; } .card-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: #c8cbff; margin-bottom: 20px; } .card-icon svg { width: 22px; height: 22px; } .card-icon-gold { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .28); color: var(--gold); } .card-icon-green { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .26); color: var(--green); } .card-icon-cyan { background: rgba(34, 211, 238, .1); border-color: rgba(34, 211, 238, .26); color: var(--cyan); } .card h3, .card .h3, .card .h4 { margin-bottom: 10px; } .card p { color: var(--text-1); font-size: .95rem; } /* App showcase card */ .app-card { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 34px); text-decoration: none; } .app-card-head { display: flex; align-items: center; gap: 16px; } .app-icon { width: 62px; height: 62px; border-radius: 15px; flex-shrink: 0; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .12); } .app-card-meta { min-width: 0; } .app-card-meta .h3 { margin-bottom: 3px; } .app-card-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--stroke); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .app-card-cta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 620; font-size: .9rem; color: var(--text); } .app-card-cta svg { width: 15px; height: 15px; transition: transform .3s var(--ease-out); } .app-card:hover .app-card-cta svg { transform: translateX(4px); } /* Coming-soon / placeholder card */ .card-dashed { border-style: dashed; border-color: var(--stroke-2); background: transparent; display: grid; place-items: center; text-align: center; min-height: 220px; color: var(--text-2); } /* ------------------------------------------------------ 07 navigation */ .skip-link { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -180%); z-index: 200; padding: 11px 20px; border-radius: var(--r-pill); background: var(--bg-3); border: 1px solid var(--stroke-2); color: var(--text); font-size: .875rem; transition: transform .25s var(--ease-out); } .skip-link:focus { transform: translate(-50%, 0); } .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease); border-bottom: 1px solid transparent; } .nav.is-stuck { background: rgba(6, 9, 16, .72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom-color: var(--stroke); } .nav-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 18px; } .brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; margin-right: auto; } /* The wordmark already spells the name, so there is no text beside it. It keeps its own aspect ratio and its own glow rather than being boxed in. */ .brand-wordmark { height: 28px; width: auto; flex-shrink: 0; transition: opacity .25s var(--ease); } .brand:hover .brand-wordmark { opacity: .82; } @media (max-width: 620px) { .brand-wordmark { height: 25px; } } .brand-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); } .brand-name span { color: var(--text-2); font-weight: 600; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-link { position: relative; padding: 9px 14px; border-radius: var(--r-pill); font-size: .905rem; font-weight: 500; color: var(--text-1); transition: color .25s var(--ease), background .25s var(--ease); } .nav-link:hover { color: var(--text); background: var(--surface); } .nav-link[aria-current="page"] { color: var(--text); } .nav-link[aria-current="page"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--grad-brand); } .nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Language switch */ .lang-switch { display: inline-flex; align-items: center; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--stroke); background: var(--surface); position: relative; } .lang-btn { position: relative; z-index: 1; padding: 6px 13px; border: 0; background: none; border-radius: var(--r-pill); font-family: var(--font-display); font-size: .775rem; font-weight: 700; letter-spacing: .04em; color: var(--text-2); cursor: pointer; transition: color .28s var(--ease); } .lang-btn[aria-pressed="true"] { color: #fff; } .lang-thumb { position: absolute; top: 3px; bottom: 3px; border-radius: var(--r-pill); background: var(--grad-brand); transition: transform .38s var(--ease-spring), width .38s var(--ease-spring); z-index: 0; } /* Mobile menu */ .nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--surface); cursor: pointer; place-items: center; } .nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .32s var(--ease-out), opacity .2s var(--ease); } .nav-toggle span + span { margin-top: 4.5px; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-drawer { position: fixed; inset: var(--nav-h) 0 0; z-index: 99; background: rgba(4, 6, 12, .96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 28px var(--gutter) 48px; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s var(--ease), transform .35s var(--ease-out), visibility .3s; overflow-y: auto; } .nav-drawer.is-open { opacity: 1; visibility: visible; transform: none; } .nav-drawer a { padding: 15px 4px; font-family: var(--font-display); font-size: 1.32rem; font-weight: 650; letter-spacing: -.02em; color: var(--text); border-bottom: 1px solid var(--stroke); } .nav-drawer .drawer-foot { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; } /* ------------------------------------------------------------- 08 hero */ .hero { position: relative; padding-top: calc(var(--nav-h) + clamp(56px, 10vw, 116px)); padding-bottom: clamp(64px, 9vw, 112px); overflow: hidden; } .hero-inner { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .hero .display { margin-top: 22px; } .hero .lead { margin-top: 24px; max-width: 54ch; } .hero-cta { margin-top: 36px; } .hero-note { margin-top: 22px; font-size: .84rem; color: var(--text-3); } .hero-stats { margin-top: clamp(48px, 7vw, 84px); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--stroke); border: 1px solid var(--stroke); border-radius: var(--r-lg); overflow: hidden; } .hero-stat { background: var(--bg-1); padding: 26px clamp(18px, 2.4vw, 30px); /* Labels wrap to different line counts across languages, so the values are pushed to the bottom of the cell instead of hanging off the label. Grid stretches every cell to the same height, so they all land on one line. */ display: flex; flex-direction: column; } .hero-stat dt { font-size: .755rem; line-height: 1.45; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); font-weight: 600; text-wrap: balance; } .hero-stat dd { margin-top: auto; padding-top: 14px; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--text); /* Same-width digits, so numbers line up column to column. */ font-variant-numeric: lining-nums tabular-nums; } /* --------------------------------------------- 09 sections & features */ .feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; } .feature-row + .feature-row { margin-top: clamp(64px, 9vw, 120px); } .feature-row.reverse > :first-child { order: 2; } .feature-list { margin-top: 26px; display: grid; gap: 16px; } .feature-item { display: flex; gap: 14px; align-items: flex-start; } .feature-item-icon { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; margin-top: 2px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: #c8cbff; } .feature-item-icon svg { width: 13px; height: 13px; } .feature-item strong { color: var(--text); font-weight: 620; display: block; margin-bottom: 2px; font-family: var(--font-display); } .feature-item p { font-size: .925rem; color: var(--text-2); } /* --- Decision log ---------------------------------------------------------- A deliberately different shape from .feature-list: struck-through headings and a dashed rule between rows, so a list of refusals reads as a list of refusals rather than as another set of feature bullets. */ .nope-list { display: grid; } .nope { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 15px 0; border-bottom: 1px dashed var(--stroke); } .nope:first-child { padding-top: 4px; } .nope:last-child { border-bottom: 0; padding-bottom: 0; } .nope-mark { width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(248, 113, 113, .28); background: rgba(248, 113, 113, .08); color: var(--red); } .nope-mark svg { width: 10px; height: 10px; } .nope strong { display: block; margin-bottom: 3px; font-family: var(--font-display); font-weight: 650; font-size: .97rem; letter-spacing: -.014em; color: var(--text-1); text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, .55); text-decoration-thickness: 1.5px; } .nope p { font-size: .89rem; color: var(--text-2); } /* Big callout band */ .band { position: relative; border-radius: var(--r-xl); border: 1px solid var(--stroke); padding: clamp(38px, 6vw, 72px); overflow: hidden; text-align: center; background: radial-gradient(90% 130% at 50% 0%, rgba(99, 102, 241, .22), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); } .band .h2 { max-width: 20ch; margin-inline: auto; } .band .lead { max-width: 56ch; margin: 20px auto 0; } .band .cluster { justify-content: center; margin-top: 34px; } /* --------------------------------------------------- 10 device mockup */ .device-stage { position: relative; display: grid; place-items: center; perspective: 1600px; } .device-stage::before { content: ''; position: absolute; width: 78%; height: 62%; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, .4), transparent 68%); filter: blur(70px); z-index: 0; } [data-accent="warry"] .device-stage::before { background: radial-gradient(circle, rgba(59, 130, 246, .45), transparent 68%); } .phone { position: relative; z-index: 1; width: min(300px, 76vw); /* No aspect-ratio here on purpose. 393x852 is the iPhone SCREEN, and the bezel sits outside it, so the body's height has to be the screen's height plus the bezel. Fixing a ratio on the body instead only lands correctly at one particular width — at every other size the fixed padding eats a different share of it and the screen comes out too narrow, which crops the sides off a real screenshot. The ratio therefore lives on .phone-screen and this element simply wraps it. */ /* Every dimension is a share of the frame's own size, so the bezel, the corner and the notch keep their relationship whether the phone renders at 300px in the hero or 232px in the carousel. Fixed pixels only look right at one size; at any other the bezel reads as too thick and the notch as too big, which is what makes a mockup feel cheap. The bezel is NOT padding: a percentage padding resolves against the containing block's width, not the element's own, so it drifts as soon as the phone sits in a wider column. .phone-screen is positioned instead, with insets that do resolve against this box. This ratio is derived, not guessed: with a bezel of 3.7% of the outer width, an inner screen of 393x852 makes the outer body 1 : 2.0815. Radii are width%/height% pairs so corners stay circular. */ aspect-ratio: 0.48042; border-radius: 17.3% / 8.31%; background: linear-gradient(160deg, #2b3145 0%, #10131d 28%, #070910 62%, #262b3c 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 90px -34px rgba(0, 0, 0, .95), inset 0 0 0 2px rgba(0, 0, 0, .55); transition: transform .8s var(--ease-out); } .phone-tilt { transform: rotateY(-13deg) rotateX(5deg) rotateZ(1.2deg); } .phone-tilt:hover { transform: rotateY(-5deg) rotateX(2deg); } .phone-screen { /* Inset from the frame rather than padded into it. Percentages on `inset` resolve against .phone itself, so the bezel stays 3.7% of the frame width at any size and the screen lands at exactly 393:852. Horizontal insets are a share of width, vertical ones a share of height — hence the two numbers. */ position: absolute; inset: 1.7776% 3.7%; /* ~55pt corner on a 393pt-wide screen, as a width%/height% pair so it stays circular instead of stretching with the tall box. */ border-radius: 15.1% / 7%; overflow: hidden; background: #f2f2f7; display: flex; flex-direction: column; } /* A frame holding a real screenshot gets a dark screen, so a sub-pixel rounding gap reads as bezel rather than as a white band. */ .phone-screen:has(.phone-shot) { background: #0b0d16; } /* Apple's Dynamic Island measures 125x37pt on a 393x852pt screen and sits about 11pt below the top edge. Expressed as a share of the screen those are the numbers below, so the island scales with the frame and lands in the gap the app's own top bar leaves for it — a fixed height collides with it. */ .phone-notch { position: absolute; top: 1.3%; left: 50%; transform: translateX(-50%); width: 31.8%; aspect-ratio: 125 / 37; border-radius: 999px; background: #05070c; z-index: 20; } .phone-glare { position: absolute; inset: 0; z-index: 21; pointer-events: none; /* Matches .phone-screen's radius pair so the sheen never bleeds past the rounded corner at small sizes. */ border-radius: 15.1% / 7%; background: linear-gradient(128deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .04) 22%, transparent 44%); } /* Warry UI recreation — light iOS surface inside the frame */ .ui { font-family: var(--font-body); color: #0f172a; flex: 1; display: flex; flex-direction: column; background: #f2f2f7; overflow: hidden; } .ui-status { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px 4px; font-size: 11px; font-weight: 700; color: #0f172a; letter-spacing: -.01em; } .ui-status-icons { display: flex; gap: 4px; align-items: center; } .ui-status-icons i { display: block; width: 3px; border-radius: 1px; background: #0f172a; } .ui-status-icons i:nth-child(1) { height: 4px; } .ui-status-icons i:nth-child(2) { height: 6px; } .ui-status-icons i:nth-child(3) { height: 8px; } .ui-status-icons i:nth-child(4) { height: 10px; } .ui-battery { width: 18px; height: 9px; border: 1.2px solid #0f172a; border-radius: 3px; padding: 1px; margin-left: 3px; } .ui-battery span { display: block; height: 100%; width: 72%; background: #0f172a; border-radius: 1px; } .ui-body { flex: 1; padding: 12px 15px 0; overflow: hidden; } .ui-header { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; } .ui-header .ui-logo { width: 30px; height: 30px; flex-shrink: 0; } .ui-header .ui-app-name { font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; line-height: 1; font-family: var(--font-display); } .ui-header p { font-size: 9.5px; color: #64748b; font-weight: 500; margin-top: 3px; line-height: 1; } .ui-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .ui-card { background: #fff; border: 1px solid #eef1f6; border-radius: 15px; padding: 11px; position: relative; overflow: hidden; min-height: 78px; display: flex; flex-direction: column; justify-content: space-between; } .ui-card::after { content: ''; position: absolute; top: -14px; right: -14px; width: 52px; height: 52px; border-bottom-left-radius: 100%; opacity: .5; } .ui-card.blue::after { background: #eff6ff; } .ui-card.green::after { background: #ecfdf5; } .ui-card-label { font-size: 8.5px; font-weight: 700; color: #64748b; letter-spacing: .04em; position: relative; z-index: 1; } .ui-card-icon { width: 13px; height: 13px; margin-top: 5px; position: relative; z-index: 1; } .ui-card-value { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.035em; color: #0f172a; position: relative; z-index: 1; line-height: 1; } .ui-card-value.ok { color: #059669; } .ui-panel { margin-top: 10px; background: #fff; border: 1px solid #eef1f6; border-radius: 15px; padding: 12px; } .ui-panel-title { font-size: 10.5px; font-weight: 700; color: #0f172a; margin-bottom: 9px; font-family: var(--font-display); letter-spacing: -.01em; } .ui-donut { display: grid; place-items: center; padding: 2px 0 8px; } .ui-donut svg { width: 96px; height: 96px; } .ui-legend { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .ui-legend span { display: inline-flex; align-items: center; gap: 3.5px; font-size: 7.6px; font-weight: 600; color: #475569; background: #f8fafc; border: 1px solid #eef1f6; border-radius: 5px; padding: 2.5px 5px; } .ui-legend i { width: 5px; height: 5px; border-radius: 50%; display: block; } .ui-nav { position: relative; margin-top: auto; background: #fff; border-top: 1px solid #e6e9ef; display: flex; align-items: flex-end; justify-content: space-between; padding: 7px 16px 15px; height: 62px; } .ui-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 42px; color: #b4bcca; } .ui-nav-item.active { color: #2563eb; } .ui-nav-item svg { width: 17px; height: 17px; } .ui-nav-item span { font-size: 7.4px; font-weight: 600; letter-spacing: -.01em; } .ui-fab { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 47px; height: 47px; border-radius: 50%; background: #2563eb; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 22px -8px rgba(37, 99, 235, .8); border: 4px solid #f2f2f7; } .ui-fab svg { width: 21px; height: 21px; } /* --- Add-item screen ------------------------------------------------------- A faithful, scaled recreation of pages/AddItem.tsx: its own white top bar (the tab bar is hidden on that route), a photo tile, then the form card. Scale factor vs. the real 393pt screen is ~0.68. */ .ui-topbar { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; background: #fff; border-bottom: 1px solid #e6e9ef; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); flex-shrink: 0; } .ui-topbar .ui-app-name { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: -.02em; color: #0f172a; } .ui-topbar .ui-back { position: absolute; left: 8px; width: 22px; height: 22px; display: grid; place-items: center; color: #475569; } .ui-topbar .ui-back svg { width: 16px; height: 16px; } .ui-scroll { flex: 1; overflow: hidden; background: #f9fafb; padding: 12px 14px 0; } .ui-photo { width: 76px; height: 76px; margin: 0 auto 11px; border-radius: 16px; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .1); background: linear-gradient(160deg, #e2e8f0 0%, #f8fafc 55%, #cbd5e1 100%); display: grid; place-items: center; color: #94a3b8; overflow: hidden; } .ui-photo svg { width: 40px; height: 40px; } .ui-formcard { background: #fff; border: 1px solid #eef1f6; border-radius: 16px; padding: 12px; display: grid; gap: 10px; } .ui-label { display: block; font-size: 8px; font-weight: 800; color: #64748b; letter-spacing: .01em; margin: 0 0 3px 2px; text-transform: uppercase; } .ui-label span { color: #ef4444; } .ui-control { height: 30px; padding: 0 9px; border-radius: 9px; border: 1px solid #e5e7eb; background: #f8fafc; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; } .ui-control > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ui-control.lg { font-size: 11px; height: 32px; } .ui-control.ghost { color: #94a3b8; font-weight: 500; } .ui-control svg { width: 11px; height: 11px; color: #94a3b8; flex-shrink: 0; margin-left: auto; } .ui-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ui-price { display: flex; gap: 6px; } .ui-price .ui-control:first-child { flex: 1; } .ui-cur { width: 52px; height: 30px; border-radius: 9px; border: 1px solid #e5e7eb; background: #f1f5f9; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #475569; flex-shrink: 0; } .ui-doccard { margin-top: 10px; background: #fff; border: 1px solid #eef1f6; border-radius: 16px; padding: 11px 12px; } .ui-dochead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ui-dochead .ui-label { margin: 0; } .ui-docadd { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 7px; border: 1px solid #dbeafe; background: #eff6ff; color: #2563eb; font-size: 8.5px; font-weight: 700; } .ui-docadd svg { width: 9px; height: 9px; } .ui-docrow { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: 10px; border: 1px solid #eef1f6; background: #f8fafc; font-size: 9px; font-weight: 600; color: #334155; } .ui-docrow + .ui-docrow { margin-top: 5px; } .ui-docrow i { width: 22px; height: 22px; border-radius: 7px; border: 1px solid #e5e7eb; background: #fff; display: grid; place-items: center; color: #3b82f6; flex-shrink: 0; } .ui-docrow i svg { width: 11px; height: 11px; } .ui-savebtn { margin-top: 12px; height: 36px; border-radius: 13px; background: #2563eb; color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: -.01em; box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .8); } .ui-savebtn svg { width: 14px; height: 14px; } /* --- Real screenshots inside the phone frame ------------------------------- The supplied screenshots are 500x1086, a ratio of 0.4604; .phone is 393/852 = 0.4613. Close enough that `cover` crops nothing visible, so a game screenshot drops straight into the same frame the Warry mockups use. */ /*