/* * Recall 9 — Design Tokens * All colors live here. HTML uses var(--name) via Tailwind arbitrary values. * Dark mode: toggle .dark on — vars swap automatically, no dark: prefix needed. */ @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800;900&display=swap'); /* ─── Satoshi — self-hosted ─────────────────────────────── */ @font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi/Satoshi-Variable.woff2') format('woff2'), url('../fonts/Satoshi/Satoshi-Variable.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ─── Light mode (default) ─────────────────────────────── */ :root { /* Brand */ --primary: #FF751F; --primary-hover: #E8621A; --nav: #290F00; --green: #289947; --blue: #1B73E8; /* Backgrounds */ --bg: #f6f5f4; --bg-muted: #F6F5F4; --bg-alt: #EFECE8; --bg-card: #FFFFFF; --bg-hover: #F2F0EC; --bg-overlay: #1A1A1A; --bg-icon-btn: #1A1A1A; --bg-pro-card: #1A1A1A; --bg-primary-10: rgba(255, 117, 31, 0.10); --bg-white: #FFFFFF; /* Section text tokens */ --tx-section: #737373; --tx-label: #757575; --tx-body: #4A4A4A; --tx-on-dark: #D9D9D9; --tx-cta-sub: #C6C6C6; /* Text (opacity baked in — handles both modes in one class) */ --tx: #1A1A1A; --tx-07: rgba( 26, 26, 26, 0.07); --tx-30: rgba( 26, 26, 26, 0.30); --tx-40: rgba( 26, 26, 26, 0.40); --tx-50: rgba( 26, 26, 26, 0.50); --tx-60: rgba( 26, 26, 26, 0.60); --tx-70: rgba( 26, 26, 26, 0.70); /* Borders */ --bd: rgba( 26, 26, 26, 0.10); --bd-5: rgba( 26, 26, 26, 0.05); --bd-20: rgba( 26, 26, 26, 0.20); } /* ─── Dark mode ────────────────────────────────────────── */ .dark { --bg: #111111; --bg-muted: #111111; --bg-alt: #1A1A1A; --bg-card: rgba(255, 255, 255, 0.05); --bg-hover: rgba(255, 255, 255, 0.05); --bg-overlay: rgba(255, 255, 255, 0.10); --bg-icon-btn: #FFFFFF; --bg-pro-card: rgba(255, 255, 255, 0.05); --bg-primary-10: rgba(255, 117, 31, 0.20); /* Section text tokens — dark mode swaps */ --tx-section: rgba(255, 255, 255, 0.50); --tx-label: rgba(255, 255, 255, 0.50); --tx-body: rgba(255, 255, 255, 0.60); --tx-on-dark: #D9D9D9; --tx-cta-sub: #C6C6C6; --tx: #FFFFFF; --tx-07: rgba(255, 255, 255, 0.06); --tx-30: rgba(255, 255, 255, 0.30); --tx-40: rgba(255, 255, 255, 0.40); --tx-50: rgba(255, 255, 255, 0.50); --tx-60: rgba(255, 255, 255, 0.50); --tx-70: rgba(255, 255, 255, 0.60); --bd: rgba(255, 255, 255, 0.10); --bd-5: rgba(255, 255, 255, 0.10); --bd-20: rgba(255, 255, 255, 0.20); } /* ─── Global ───────────────────────────────────────────── */ * { font-family: 'Satoshi', sans-serif; } body { background: var(--bg); color: var(--tx); } /* Hero headings only use League Spartan */ .font-spartan { font-family: 'League Spartan', sans-serif; } /* ─── Components ───────────────────────────────────────── */ .btn-primary { background: var(--primary); color: #fff; font-weight: 600; padding: 0.625rem 1.5rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 150ms; border: none; cursor: pointer; text-decoration: none; } .btn-primary:hover { background: var(--primary-hover); } .btn-primary:active { transform: scale(0.95); } .btn-outline { background: transparent; color: var(--tx); font-weight: 600; padding: 0.625rem 1.5rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 150ms; border: 1px solid var(--bd-20); cursor: pointer; text-decoration: none; } .btn-outline:hover { border-color: var(--primary); } .card { background: var(--bg-card); border-radius: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border: 1px solid var(--bd-5); } .wrap { max-width: 1400px; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } } @media (min-width: 1024px) { .wrap { padding-inline: 2rem; } } .tag { /* font-size:1rem; font-weight: 700; text-transform: uppercase; */ letter-spacing: 0.1em; color: var(--tx-40); text-align: center; display: block; } /* Standard section heading = 33px max */ .h2 { font-size: 2rem; font-weight: 700; color: var(--tx); } /* CTA card */ .cta-card { background-color: #111111; } .dark .cta-card { background-color: #000000; } .text-dark-brown{ color: #290f00; } .wrap{ max-width: 1400px; margin-left: auto; margin-right: auto; } #typewriter { /* font-weight: bold; */ } .cursor { display: inline-block; width: 2px; height: 1.1em; background-color: currentColor; margin-left: 2px; border-radius: 1px; animation: macBlink 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes macBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }