/* ============================================================ Simple App — Design Tokens + Phone Shell Extracted 1:1 from flutter_jet_wallet / flutter_ui_kit: colors → lib/widgets/colors/simple_colors_light.dart + _dark.dart type → lib/widgets/typography/simple_typography.dart font → assets/fonts/Gilroy-*.otf Single source of truth for all prototypes. Pair with typography.css + components.css + icons.css. ============================================================ */ /* ---------- Real font: Gilroy (9 weights) ---------- */ @font-face { font-family:'Gilroy'; font-weight:100; font-display:swap; src:url(fonts/Gilroy-Thin.otf) format('opentype'); } @font-face { font-family:'Gilroy'; font-weight:200; font-display:swap; src:url(fonts/Gilroy-UltraLight.otf) format('opentype'); } @font-face { font-family:'Gilroy'; font-weight:300; font-display:swap; src:url(fonts/Gilroy-Light.otf) format('opentype'); } @font-face { font-family:'Gilroy'; font-weight:400; font-display:swap; src:url(fonts/Gilroy-Regular.otf) format('opentype'); } @font-face { font-family:'Gilroy'; font-weight:500; font-display:swap; src:url(fonts/Gilroy-Medium.otf) format('opentype'); } @font-face { font-family:'Gilroy'; font-weight:600; font-display:swap; src:url(fonts/Gilroy-SemiBold.otf) format('opentype'); } @font-face { font-family:'Gilroy'; font-weight:700; font-display:swap; src:url(fonts/Gilroy-Bold.otf) format('opentype'); } @font-face { font-family:'Gilroy'; font-weight:800; font-display:swap; src:url(fonts/Gilroy-ExtraBold.otf) format('opentype'); } @font-face { font-family:'Gilroy'; font-weight:900; font-display:swap; src:url(fonts/Gilroy-Black.otf) format('opentype'); } :root { /* Brand / violet */ --violet-dark: #6944E3; --violet: #9575F3; --violet-light: #CBB9FF; --violet-extralight: #EDE5FF; /* Accent / blue */ --blue-dark: #2238EA; --blue: #374DFB; --blue-light: #B2BBFF; --blue-extralight: #E4E7FF; /* Grays */ --gray-10: #777C85; --gray-8: #A8B0BA; --gray-6: #C0C4C9; --gray-4: #E0E4EA; --gray-2: #F1F4F8; --gray-1: #FFFFFF; --black: #000000; --white: #FFFFFF; --always-white: #FFFFFF; --always-black: #000000; --gray-alfa-12: rgba(0,28,76,.12); --black-alfa-52: rgba(0,0,0,.52); /* Status — red */ --red-dark: #D00832; --red: #F50537; --red-light: #FB9BAF; --red-extralight: #FEE3E9; /* Status — green */ --green-dark: #049813; --green: #0BCA1E; --green-light: #9DEAA5; --green-extralight: #E4F9E6; /* Status — yellow */ --yellow-dark: #FFAA00; --yellow: #F9C321; --yellow-light: #F9E29E; --yellow-extralight: #FDF5DD; /* Gradients */ --purple-gradient: linear-gradient(115deg, #CBB9FF 0%, #9575F3 100%); --brand-gradient: linear-gradient(115deg, #E0EBFA 0%, #ECE7FB 100%); --main-screen-gradient: linear-gradient(180deg, #9575F3 0%, #B29BF6 40%, #E0D6FB 80%, #FFFFFF 100%); --wallet-gradient: linear-gradient(0deg, #30CACE 0%, #93E3E5 40%, #DCF6F6 75%, #FFFFFF 100%); --account-gradient: linear-gradient(180deg, #55D689 0%, #82E0A8 35%, #C9F2D9 75%, #FFFFFF 100%); /* Radii */ --radius-card: 16px; --radius-pill: 999px; --radius-sheet: 24px; --radius-context: 12px; --radius-badge: 18px; --radius-linked: 12px; /* Spacing */ --pad-screen: 24px; /* Typography */ --font: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-header1: 56px; --fs-header2: 40px; --fs-header3: 32px; --fs-header4: 28px; --fs-header5: 24px; --fs-header6: 20px; --fs-button: 18px; --fs-subtitle1: 18px; --fs-subtitle2: 16px; --fs-body1: 16px; --fs-body2: 14px; --fs-caption: 12px; --fs-caption-sm: 10px; --fs-callout: 9px; --fs-amount: 18px; } /* ---------- Dark theme (opt-in: or .theme-dark) ---------- */ [data-theme="dark"], .theme-dark { --violet-dark: #BCA9F6; --violet: #9575F3; --violet-light: #3D2D6A; --violet-extralight: #291E47; --blue-dark: #A9B1F5; --blue: #5F70FF; --blue-light: #2D346B; --blue-extralight: #1B2150; --gray-10: #9699AB; --gray-8: #575D79; --gray-6: #3E445A; --gray-4: #313647; --gray-2: #232632; --gray-1: #191B23; --black: #FFFFFF; --white: #111319; --red-dark: #F5A9B9; --red: #FF3B64; --red-light: #6B2D39; --red-extralight: #4A0E1A; --green-dark: #A9F5B1; --green: #50D35D; --green-light: #2D6B33; --green-extralight: #0F3614; --yellow-dark: #F5E2A9; --yellow: #F9C936; --yellow-light: #675627; --yellow-extralight: #473709; --purple-gradient: linear-gradient(115deg, #3D2D6A 0%, #9575F3 100%); --brand-gradient: linear-gradient(115deg, #3D2D6A 0%, #33245C 100%); --main-screen-gradient: linear-gradient(180deg, #3D2D6A 0%, #111319 100%); } /* ---------- Base reset ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font); background: #e9ebf0; color: var(--black); -webkit-font-smoothing: antialiased; } /* ============================================================ iPhone shell — 390 × 844, notch-era frame ============================================================ */ .phone { position: relative; width: 390px; height: 844px; background: #000; border-radius: 55px; padding: 12px; box-shadow: 0 30px 80px rgba(20,20,40,.35), 0 0 0 2px #1c1c22; } .phone-screen { position: relative; width: 100%; height: 100%; background: var(--white); border-radius: 44px; overflow: hidden; display: flex; flex-direction: column; } .phone-island { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; background: #000; border-radius: 20px; z-index: 50; } .status-bar { height: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px 0 36px; font-size: 15px; font-weight: 700; z-index: 40; } .status-bar .icons { display: flex; gap: 7px; align-items: center; font-size: 13px; } .home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: #000; opacity: .9; z-index: 50; } .screen-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; } .screen-body::-webkit-scrollbar { display: none; }