/* ============================================================ iBOrbit – Colors & Type tokens Single source of truth for color, type, spacing, radii, shadow. Import this in any artifact before writing scoped styles. ============================================================ */ :root { /* ---- Color: surfaces ------------------------------------- */ --bg: #fcfbf8; /* warm off-white page */ --panel: #ffffff; /* card / surface white */ --panel-soft: #faf8ff; /* purple-tinted soft surface */ --bg-dark: #07080b; /* near-black for dark CTAs */ --bg-darker: #010101; /* gradient endpoint for black btn */ /* ---- Color: ink / text ----------------------------------- */ --ink: #070912; /* primary text */ --ink-2: #1d2232; /* secondary text on light */ --muted: #454b64; /* body muted */ --soft: #74788b; /* tertiary captions */ --hairline-ink: #11131d; /* heading-on-white emphasis */ /* ---- Color: brand purple (PRIMARY) ----------------------- */ --purple: #6845f5; /* canonical brand purple */ --purple-2: #7c63ff; /* hover / gradient top */ --purple-3: #4f34dc; /* press / gradient bottom */ --purple-soft: #f1ecff; /* tinted pill background */ --purple-haze: rgba(104, 69, 245, .13); --purple-glow: 0 18px 56px rgba(104, 69, 245, .18); /* ---- Color: small accents (proof / status) --------------- */ --gold: #d8a037; /* gold dot, achievement accent */ --gold-soft: #f6e7c2; --green: #69a531; /* green grade badge, "verified" */ --green-soft: #f2f9ed; --red: #e84545; /* "before" / loss / negative chip */ --red-soft: #ffeaea; --blue-deep: #063f96; /* transcript header / IB-document blue */ /* ---- Color: lines / dividers ----------------------------- */ --line: rgba(26, 22, 12, .105); --line-strong: rgba(26, 22, 12, .16); --line-purple: rgba(104, 69, 245, .12); /* ---- Type: families -------------------------------------- */ /* The product currently ships system-sans only. */ --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; --font-serif: ui-serif, "Charter", "Iowan Old Style", "Source Serif Pro", Georgia, serif; /* reserved – not used in product */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- Type: weights (the system uses VERY heavy display) -- */ --w-regular: 400; --w-medium: 500; --w-semi: 650; --w-bold: 780; --w-extra: 850; --w-heavy: 900; --w-black: 950; /* h1/h2 use this in product */ /* ---- Type: sizing scale ---------------------------------- */ --t-eyebrow: 12px; --t-caption: 12.5px; --t-tag: 13px; --t-body-sm: 14.5px; --t-body: 16px; --t-body-lg: 18px; --t-h4: 22px; --t-h3: 28px; --t-h2: 44px; --t-h2-lg: 56px; /* hero / big section heads */ --t-h1: 56px; /* ---- Type: tracking (negative, tight by default) --------- */ --tr-tight: -.045em; /* display headings */ --tr-snug: -.025em; /* sub-display, h3 */ --tr-body: -.012em; --tr-eyebrow: .38em; /* uppercase eyebrow */ /* ---- Type: leading --------------------------------------- */ --lh-display: .94; --lh-tight: 1.08; --lh-snug: 1.22; --lh-body: 1.55; /* ---- Radii ----------------------------------------------- */ --r-xs: 7px; /* tag chip */ --r-sm: 11px; /* label pill */ --r-md: 12px; /* buttons */ --r-lg: 17px; /* float cards */ --r-xl: 20px; /* main cards */ --r-2xl: 22px; /* hero video / proof strip */ --r-pill: 999px; /* ---- Spacing scale (loose 4-step) ------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 42px; --s-9: 58px; --s-10: 72px; /* ---- Shadow / elevation system --------------------------- */ --shadow-flat: 0 1px 0 rgba(31,24,16,.02); --shadow-soft: 0 16px 44px rgba(88, 63, 26, .055), inset 0 1px 0 rgba(255,255,255,.88); --shadow: 0 22px 58px rgba(28, 22, 12, .075), 0 2px 8px rgba(28, 22, 12, .045); --shadow-strong: 0 30px 90px rgba(31, 24, 16, .17), 0 5px 18px rgba(31, 24, 16, .08); --shadow-card: 0 18px 50px rgba(31,24,16,.06), inset 0 1px 0 rgba(255,255,255,.9); --shadow-float: 0 26px 70px rgba(31, 24, 16, .15), 0 7px 20px rgba(31, 24, 16, .065), inset 0 1px 0 rgba(255,255,255,.92); /* ---- Page background paint (subtle radial wash) ---------- */ --bg-paint: radial-gradient(circle at 12% 8%, rgba(114,84,246,.035), transparent 27%), radial-gradient(circle at 82% 14%, rgba(104,69,245,.032), transparent 31%), radial-gradient(circle at 56% 98%, rgba(217,187,135,.105), transparent 35%), var(--bg); /* ---- Page background paint: orbit dots (decorative) ------ */ --bg-orbit-dots: radial-gradient(circle, rgba(104,69,245,.11) 0 1.4px, transparent 1.6px), radial-gradient(circle, rgba(216,160,55,.11) 0 1px, transparent 1.2px); } /* ============================================================ Semantic primitives Wrap with .iborbit (or apply to html/body) to opt in. ============================================================ */ .iborbit, .iborbit-root { color: var(--ink); background: var(--bg-paint); font-family: var(--font-sans); font-feature-settings: "kern" 1, "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } /* Display heads — tight, heavy, slightly negative tracked */ .iborbit-h1, .iborbit h1 { font-size: var(--t-h1); font-weight: var(--w-black); letter-spacing: var(--tr-tight); line-height: var(--lh-display); margin: 0; } .iborbit-h2, .iborbit h2 { font-size: var(--t-h2); font-weight: var(--w-heavy); letter-spacing: var(--tr-tight); line-height: 1.03; margin: 0; } .iborbit-h3, .iborbit h3 { font-size: var(--t-h3); font-weight: var(--w-extra); letter-spacing: var(--tr-snug); line-height: var(--lh-tight); margin: 0; } .iborbit-h4, .iborbit h4 { font-size: var(--t-h4); font-weight: var(--w-extra); letter-spacing: var(--tr-snug); line-height: 1.15; margin: 0; } /* Body text */ .iborbit-body, .iborbit p { font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); color: var(--muted); margin: 0; } .iborbit-body-lg { font-size: var(--t-body-lg); line-height: 1.55; color: var(--ink-2); } .iborbit-body-sm { font-size: var(--t-body-sm); line-height: 1.5; } .iborbit-caption { font-size: var(--t-caption); color: var(--soft); line-height: 1.35; } /* Eyebrow / over-line (the recurring purple uppercase mark) */ .iborbit-eyebrow { color: var(--purple); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); font-size: var(--t-eyebrow); font-weight: var(--w-heavy); line-height: 1; } /* Mono — used very sparingly (timestamps, score chips) */ .iborbit-mono { font-family: var(--font-mono); font-size: var(--t-tag); } /* Brand color word helpers used throughout product copy */ .iborbit .purple { color: var(--purple); } .iborbit .greyword { color: #6f7480; } /* Scribble underline — appears under emphasized words */ .iborbit .scribble { position: relative; display: inline-block; } .iborbit .scribble::after { content: ""; position: absolute; left: 2%; right: -2%; bottom: -.145em; height: .16em; border-bottom: 4px solid var(--purple); border-radius: 50%; transform: rotate(-1.8deg); filter: drop-shadow(0 6px 8px rgba(104,69,245,.16)); }