/* Generated by scripts/fetch-fonts.ts — do not edit. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/inter-normal-latin-ext-a28eb6d3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/inter-normal-latin-c9407645.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/inter-normal-latin-ext-a28eb6d3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/inter-normal-latin-c9407645.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/inter-normal-latin-ext-a28eb6d3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/inter-normal-latin-c9407645.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/inter-normal-latin-ext-a28eb6d3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/inter-normal-latin-c9407645.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(/static/fonts/inter-normal-latin-ext-a28eb6d3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(/static/fonts/inter-normal-latin-c9407645.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/jetbrains-mono-normal-latin-ext-9c38cb2d.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/jetbrains-mono-normal-latin-2c32b9b3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/jetbrains-mono-normal-latin-ext-9c38cb2d.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/jetbrains-mono-normal-latin-2c32b9b3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/jetbrains-mono-normal-latin-ext-9c38cb2d.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/jetbrains-mono-normal-latin-2c32b9b3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/nunito-normal-latin-ext-511ce967.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/nunito-normal-latin-20fc9b6f.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url(/static/fonts/nunito-normal-latin-ext-511ce967.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url(/static/fonts/nunito-normal-latin-20fc9b6f.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/static/fonts/source-serif-4-italic-latin-ext-6731b049.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/static/fonts/source-serif-4-italic-latin-ad17ab41.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 600; font-display: swap; src: url(/static/fonts/source-serif-4-italic-latin-ext-6731b049.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 600; font-display: swap; src: url(/static/fonts/source-serif-4-italic-latin-ad17ab41.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/source-serif-4-normal-latin-ext-1ed39fb3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/source-serif-4-normal-latin-286e05e5.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/source-serif-4-normal-latin-ext-1ed39fb3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/source-serif-4-normal-latin-286e05e5.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 900; font-display: swap; src: url(/static/fonts/source-serif-4-normal-latin-ext-1ed39fb3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 900; font-display: swap; src: url(/static/fonts/source-serif-4-normal-latin-286e05e5.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Workbench'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/workbench-normal-latin-b20b75b3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Sage Ape Marketing Site — local overrides on top of sageape-tokens.css */ /* ============================================================ Sage Ape Design System — colors & type Source of truth: manki-ios/Utilities/MankiTheme.swift + .colorset JSON components (sRGB, 0-1 float components). ============================================================ */ /* ---------- Web fonts ---------- Sage Ape's iOS theme uses system fonts with three "designs": - .default (SF Pro on Apple) → web fallback: Inter - .serif (New York on Apple) → web fallback: Source Serif 4 - .monospaced (SF Mono on Apple) → web fallback: JetBrains Mono Google Fonts links live in the of each HTML card. Local .ttf backups are in /fonts/. ---------------------------------- */ :root { /* -------- Brand accent (amber / orange) -------- */ /* AccentColor — light: rgb(255, 143, 0). dark: rgb(255, 179, 0) */ --sageape-amber: rgb(255, 143, 0); --sageape-amber-dark: rgb(255, 179, 0); --sageape-amber-text: rgb(140, 77, 0); /* amber text on light/neutral bg (e.g. progress %, SAGE APE eyebrow) */ --sageape-amber-text-dark: rgb(255, 179, 0); /* On amber surfaces (paywall banner, premium pill), use ink — never white. White on #FF8F00 = 2.4:1 (fails WCAG AA). Black on #FF8F00 = 9.4:1 (AAA). */ --sageape-on-amber: var(--sageape-black); --sageape-on-amber-muted: var(--sageape-black); /* on amber, "muted" still uses solid ink — opacity drops contrast below AA at small sizes. Differentiate via weight/size, not color. */ /* -------- Mono neutrals -------- */ /* Sage ApeBlack – 0.039 ≈ #0a0a0a */ --sageape-black: #0a0a0a; /* Sage ApeWhite – 0.98 ≈ #fafafa (light) / 0.941 ≈ #f0f0f0 (dark-mode white) */ --sageape-white: #fafafa; --sageape-white-dark: #f0f0f0; /* Gray ramp */ --sageape-gray-100: #f5f5f5; /* 0.961 — app background (light) */ --sageape-gray-100-dark:#1e1e1e; /* 0.118 — app background (dark) */ --sageape-gray-500: #757575; /* 0.459 — secondary text (light) */ --sageape-gray-500-dark:#9e9e9e; /* 0.620 — secondary text (dark) */ --sageape-gray-900: #212121; /* 0.129 — progress track (dark) */ /* Card surface / text (adaptive) */ --sageape-card-surface: #ffffff; /* light */ --sageape-card-surface-dark: #0a0a0a; --sageape-card-text: #141414; /* 0.078 — primary ink */ --sageape-card-text-dark: #f0f0f0; /* 0.941 */ --sageape-progress-track: #e5e5e5; /* 0.898 */ --sageape-progress-track-dark: #212121; /* -------- Semantic (caught / missed) -------- */ /* Caught — green: light #2E7D32, dark #4CAF50 */ --sageape-caught: rgb(46, 125, 50); --sageape-caught-dark: rgb(76, 175, 80); /* Missed — red: light #D32F2F, dark #EF5350 */ --sageape-missed: rgb(211, 47, 47); --sageape-missed-dark: rgb(239, 83, 80); /* -------- Type families -------- */ --sageape-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif; --sageape-font-serif: "Source Serif 4", "New York", Georgia, "Times New Roman", serif; --sageape-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sageape-font-rounded: "Nunito", -apple-system, "SF Pro Rounded", system-ui, sans-serif; /* for stats */ /* -------- Type scale (mapped from MankiTheme.swift dynamic type sizes) -------- */ --sageape-t-screen-title: 34px; /* .largeTitle / black weight */ --sageape-t-section-label: 13px; /* .footnote / heavy, tracked 3px */ --sageape-t-card-label: 11px; /* .caption2 / monospaced heavy, tracked 2.5 */ --sageape-t-card-body: 22px; /* .title2 / semibold */ --sageape-t-deck-title: 17px; /* .headline */ --sageape-t-button: 17px; /* .body / heavy */ --sageape-t-counter: 15px; /* .subheadline / monospaced bold */ --sageape-t-stats: 28px; /* .title / rounded black */ --sageape-t-onboarding-headline: 28px; /* .title / serif black */ --sageape-t-onboarding-body: 20px; /* .title3 / serif semibold */ --sageape-t-body: 17px; --sageape-t-caption: 12px; --sageape-t-caption2: 11px; /* -------- Radii -------- */ --sageape-r-card-lg: 24px; /* flashcard */ --sageape-r-card-md: 16px; /* deck row */ --sageape-r-button: 14px; /* primary buttons */ --sageape-r-button-sm: 10px; --sageape-r-stamp: 8px; --sageape-r-pill: 999px; --sageape-r-progress: 2px; /* -------- Elevation (shadows, LIGHT mode) -------- Sage Ape uses layered, soft drops — no inner shadows, no dramatic tints. Source: FlashcardView + DeckRowView */ --sageape-shadow-card-lg: 0 8px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04); --sageape-shadow-card-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03); --sageape-shadow-card-sm: 0 3px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03); /* -------- Spacing (SwiftUI common values used in Sage Ape) -------- */ --sageape-sp-1: 4px; --sageape-sp-2: 8px; --sageape-sp-3: 12px; --sageape-sp-4: 16px; --sageape-sp-5: 20px; --sageape-sp-6: 24px; --sageape-sp-8: 32px; --sageape-sp-10: 40px; /* -------- Tracking -------- */ --sageape-tr-section: 3px; /* "SAGE APE" eyebrow */ --sageape-tr-card: 2.5px; /* "QUESTION"/"ANSWER" label */ /* -------- Motion -------- Sage Ape leans on SwiftUI springs. Approximated CSS values below. Use them so web specimens echo the iOS feel. */ --sageape-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* pop */ --sageape-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --sageape-dur-fast: 180ms; /* press feedback */ --sageape-dur-med: 350ms; /* flip-in, fade */ --sageape-dur-slow: 500ms; /* card flip (response 0.5) */ /* -------- Layout -------- */ --sageape-readable-max: 600px; /* MankiTheme.readableMaxWidth on iPad */ --sageape-hit-target: 44px; /* iOS minimum */ /* -------- Semantic tokens (resolved for light mode) -------- */ --bg: var(--sageape-gray-100); --bg-elev: var(--sageape-card-surface); --fg: var(--sageape-card-text); --fg-muted: var(--sageape-gray-500); --fg-accent: var(--sageape-amber-text); --accent: var(--sageape-amber); --border: rgba(0,0,0,0.08); --border-accent: rgba(255,143,0,0.4); --success: var(--sageape-caught); --danger: var(--sageape-missed); } /* ---------- Dark mode overrides ---------- */ @media (prefers-color-scheme: dark) { :root { --bg: var(--sageape-gray-100-dark); --bg-elev: var(--sageape-card-surface-dark); --fg: var(--sageape-card-text-dark); --fg-muted: var(--sageape-gray-500-dark); --fg-accent: var(--sageape-amber-text-dark); --accent: var(--sageape-amber-dark); --border: rgba(255,255,255,0.1); --border-accent: var(--sageape-amber-dark); --success: var(--sageape-caught-dark); --danger: var(--sageape-missed-dark); --sageape-shadow-card-lg: 0 8px 20px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0); --sageape-shadow-card-md: 0 4px 12px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0); } } /* ---------- Semantic element resets (opt-in) ---------- Import this file, then add class="sageape" to a root element to inherit. -------------------------------------------------------- */ .sageape { font-family: var(--sageape-font-sans); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .sageape h1 { font-family: var(--sageape-font-sans); font-size: var(--sageape-t-screen-title); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .sageape h2 { font-family: var(--sageape-font-sans); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin: 0; } .sageape h3 { font-family: var(--sageape-font-sans); font-size: var(--sageape-t-deck-title); font-weight: 700; margin: 0; } .sageape p { font-family: var(--sageape-font-sans); font-size: var(--sageape-t-body); line-height: 1.45; margin: 0; } .sageape .eyebrow { font-family: var(--sageape-font-sans); font-size: var(--sageape-t-section-label); font-weight: 800; letter-spacing: var(--sageape-tr-section); text-transform: uppercase; color: var(--fg-muted); } .sageape .card-label { font-family: var(--sageape-font-mono); font-size: var(--sageape-t-card-label); font-weight: 800; letter-spacing: var(--sageape-tr-card); text-transform: uppercase; color: var(--fg-accent); } .sageape .counter { font-family: var(--sageape-font-mono); font-size: var(--sageape-t-counter); font-weight: 700; color: var(--fg-muted); font-variant-numeric: tabular-nums; } .sageape .stats { font-family: var(--sageape-font-rounded); font-size: var(--sageape-t-stats); font-weight: 900; font-variant-numeric: tabular-nums; } .sageape .serif-headline { font-family: var(--sageape-font-serif); font-size: var(--sageape-t-onboarding-headline); font-weight: 900; line-height: 1.2; } .sageape .serif-body { font-family: var(--sageape-font-serif); font-size: var(--sageape-t-onboarding-body); font-weight: 600; line-height: 1.35; } .sageape .explanation { font-family: var(--sageape-font-serif); font-size: 15px; font-style: italic; color: var(--fg-muted); line-height: 1.45; } :root { --site-bg: #0a0a0a; --site-fg: #f0f0f0; --site-muted: #8a8a8a; --site-accent: #FFB300; --site-accent-text: #FFB300; --site-line: rgba(255,255,255,0.10); --site-line-strong: rgba(255,255,255,0.22); --display-font: "Workbench", "Rubik Mono One", system-ui, sans-serif; --display-letter: 0.01em; } [data-theme="light"] { --site-bg: #f0ece2; --site-fg: #0a0a0a; --site-muted: #5a5550; --site-line: rgba(0,0,0,0.12); --site-line-strong: rgba(0,0,0,0.28); --site-accent-text: #8C4D00; } html, body { margin: 0; padding: 0; background: var(--site-bg); color: var(--site-fg); font-family: var(--sageape-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background-color 400ms ease, color 400ms ease; } * { box-sizing: border-box; } ::selection { background: var(--site-accent); color: #0a0a0a; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ============ Display type ============ */ .display { font-family: var(--display-font); font-weight: 400; letter-spacing: var(--display-letter); line-height: 0.92; text-transform: uppercase; font-feature-settings: "ss01" on; } .display-clean { font-family: var(--sageape-font-sans); font-weight: 900; letter-spacing: -0.025em; line-height: 0.95; text-transform: uppercase; } .eyebrow { font-family: var(--sageape-font-sans); font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--site-muted); } .eyebrow-amber { color: var(--site-accent-text); } .mono-label { font-family: var(--sageape-font-mono); font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; } /* ============ Layout ============ */ .section { position: relative; width: 100%; padding: 120px 40px; } .section-tight { padding: 80px 40px; } .container { max-width: 1280px; margin: 0 auto; } .divider-vertical { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--site-line-strong); } /* ============ Squiggle accent ============ */ .squiggle { position: absolute; pointer-events: none; color: var(--site-fg); opacity: 0.7; } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 14px; font-family: var(--sageape-font-sans); font-weight: 800; font-size: 16px; letter-spacing: 0.01em; border: none; cursor: pointer; transition: transform 180ms cubic-bezier(0.34, 1.3, 0.64, 1), background 200ms ease; white-space: nowrap; } .btn:active { transform: scale(0.96); } .btn-amber { background: var(--site-accent); color: #0a0a0a; } .btn-amber:hover { background: color-mix(in srgb, var(--site-accent) 90%, white 10%); } .btn-ghost { background: transparent; color: var(--site-fg); border: 1.5px solid var(--site-line-strong); } .btn-ghost:hover { border-color: var(--site-accent); color: var(--site-accent-text); } .btn-large { padding: 22px 36px; font-size: 18px; border-radius: 18px; } /* App store pill (stacked) */ .store-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 14px; background: #0a0a0a; border: 1.5px solid var(--site-line-strong); color: #f0f0f0; cursor: pointer; transition: border-color 200ms ease, transform 180ms ease; } .store-btn:hover { border-color: var(--site-accent); transform: translateY(-2px); } .store-btn .store-sub { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.7; } .store-btn .store-name { font-family: var(--sageape-font-sans); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin-top: 1px; } /* ============ Phone frame ============ */ .phone { width: 280px; aspect-ratio: 9 / 19.5; border-radius: 38px; background: #0a0a0a; border: 2px solid #1a1a1a; overflow: hidden; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05); } .phone-screen { position: absolute; inset: 6px; border-radius: 32px; background: #0a0a0a; overflow: hidden; } .phone-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 90px; height: 26px; background: #000; border-radius: 14px; z-index: 5; } .status-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 8px; font-family: var(--sageape-font-sans); font-size: 13px; font-weight: 600; color: #f0f0f0; } /* ============ Decoration helpers ============ */ .amber-tab { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--site-accent); } .dashed-divider { border-top: 1.5px dashed var(--site-line-strong); } /* Sticker tape effect for testimonials */ .tape { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 80px; height: 24px; background: rgba(255, 179, 0, 0.5); border: 1px dashed rgba(255, 179, 0, 0.8); } /* Marquee */ @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { display: flex; width: max-content; animation: scroll-x 40s linear infinite; gap: 60px; } /* Reveal animations */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.34, 1.3, 0.64, 1); } .reveal.in { opacity: 1; transform: translateY(0); } /* Marquee gradient mask edges */ .marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* Pinch grain background overlay */ .zine-grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* FAQ */ details.faq { border-top: 1.5px solid var(--site-line); padding: 28px 0; } details.faq:last-of-type { border-bottom: 1.5px solid var(--site-line); } details.faq summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; font-family: var(--display-font); font-size: 32px; color: var(--site-accent-text); transition: transform 250ms ease; } details.faq[open] summary::after { content: "–"; } details.faq p a { color: var(--site-accent-text); text-decoration: underline; text-underline-offset: 3px; } details.faq p { margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--site-muted); max-width: 720px; } /* ============ MOBILE ============ */ @media (max-width: 860px) { .section { padding: 72px 20px; } .section-tight { padding: 56px 20px; } /* Collapse any inline grid display to 1 column on mobile */ div[style*="display: grid"], div[style*="display:grid"] { grid-template-columns: 1fr !important; gap: 40px !important; } /* But keep auto-fill grids (deck cards, testimonials) flowing */ div[style*="auto-fill"], div[style*="auto-fit"] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; } /* Nav: hide secondary links on phones, keep mark + CTA */ nav a[href^="#"] { display: none !important; } /* Display sizes already use clamp() — just tighten leading */ .display { line-height: 0.95; } /* FAQ summary */ details.faq summary { font-size: 18px; } details.faq p { font-size: 15.5px; } /* Phone images in gallery — reduce widths */ .section img[alt*="Sage Ape on"] { max-width: 100% !important; } /* Footer wordmark */ .footer-mark { font-size: clamp(56px, 18vw, 120px) !important; } } @media (max-width: 480px) { .section { padding: 56px 16px; } .btn { padding: 14px 22px; font-size: 15px; } .btn-large { padding: 18px 26px; font-size: 16px; } .store-btn { padding: 12px 16px; } .store-btn .store-name { font-size: 16px; } details.faq summary { font-size: 16.5px; gap: 16px; } }