/* ============================================================ timefor.ai ยท Design Tokens + Core Components Light / public marketing system. Include once, before your page styles: Fonts (add to ): Geist + Geist Mono (Google Fonts) ============================================================ */ :root { /* ---- NEUTRALS (warm, never cold gray) ---- */ --paper: #FBFAF7; /* page background */ --paper-2: #F4F1EA; /* raised section band */ --paper-3: #ECE8DE; /* sunken */ --surface: #FFFFFF; /* cards */ --ink: #15141A; /* brand black: text + dots */ --ink-2: #44424D; /* body text */ --ink-3: #76747F; /* muted / captions */ --ink-4: #A5A3AD; /* faint / placeholder */ --line: #E7E2D6; /* hairline border */ --line-2: #D8D2C2; /* stronger border */ /* ---- ACCENTS ---- */ --ember: #FF5A36; /* PRIMARY action: one per view */ --ember-2: #FF7553; /* hover */ --ember-dim: rgba(255,90,54,0.12); --iris: #5B53F0; /* AI / digital emphasis */ --iris-dim: rgba(91,83,240,0.12); --jade: #0FAE8E; /* positive / trust */ --jade-dim: rgba(15,174,142,0.12); /* ---- PASTEL SURFACES (section rhythm + tags) ---- */ --peach: #FFE7DA; --butter: #FFF1C9; --blush: #FFE0E7; --mint: #DCF3E6; --sky: #DBEAFB; --lilac: #E9E2FB; /* ---- ELEVATION ---- */ --sh-sm: 0 1px 2px rgba(21,20,26,0.06); --sh-md: 0 8px 28px -10px rgba(21,20,26,0.16); --sh-lg: 0 28px 70px -24px rgba(21,20,26,0.28); /* ---- RADIUS ---- */ --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px; /* ---- TYPE ---- */ --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- SPACE (8pt rhythm) ---- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --container: 1120px; } /* ---- BASE ---- */ * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; } .tf-mono { font-family: var(--mono); } .tf-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; } @media (max-width: 560px){ .tf-container { padding: 0 20px; } } /* ---- TYPE SCALE (utility classes) ---- */ .tf-display { font-size: clamp(40px,6.4vw,74px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; } .tf-h1 { font-size: clamp(34px,4.6vw,52px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; } .tf-h2 { font-size: clamp(26px,3.4vw,38px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; } .tf-h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; } .tf-lead { font-size: 19px; color: var(--ink-2); line-height: 1.5; } .tf-eyebrow { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ember); display: inline-flex; align-items: center; gap: 9px; } .tf-eyebrow::before { content: ''; width: 22px; height: 1.5px; background: currentColor; } /* ---- BUTTONS ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; height: 46px; font-size: 15px; font-weight: 600; border-radius: var(--r-pill); border: 1.5px solid transparent; white-space: nowrap; cursor: pointer; transition: all .18s ease; font-family: var(--sans); } .btn-ember { background: var(--ember); color: #fff; box-shadow: 0 8px 22px -6px rgba(255,90,54,0.5); } .btn-ember:hover { background: var(--ember-2); transform: translateY(-1px); box-shadow: 0 12px 30px -6px rgba(255,90,54,0.55); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #2c2a33; transform: translateY(-1px); } .btn-ghost { border-color: var(--line-2); color: var(--ink); background: transparent; } .btn-ghost:hover { background: var(--paper-2); border-color: var(--ink); } .btn-sm { height: 38px; padding: 0 15px; font-size: 13.5px; } .btn-lg { height: 54px; padding: 0 26px; font-size: 16px; } .btn-xl { height: 62px; padding: 0 32px; font-size: 17.5px; font-weight: 700; } /* ---- TAGS / PILLS ---- */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 13px; font-weight: 500; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-sm); } .pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); } .pill.peach { background: var(--peach); border-color:#ffcdb4; color:#9a3d1c; } .pill.mint { background: var(--mint); border-color:#b6e6c9; color:#15633f; } .pill.sky { background: var(--sky); border-color:#b9d6f4; color:#1e4f86; } .pill.lilac { background: var(--lilac); border-color:#cfc2f0; color:#4733a0; } .pill.butter{ background: var(--butter);border-color:#f3d98a; color:#7a5800; } /* ---- CARD ---- */ .card { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm); position: relative; overflow: hidden; } .card.feat { background: linear-gradient(140deg, var(--iris-dim), var(--surface) 62%); border-color:#cfc2f0; } .card .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ember-dim); color: var(--ember); margin-bottom: 16px; } .card.feat .ico { background: var(--iris-dim); color: var(--iris); } .card h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 7px; } .card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 0; } /* ---- STAT ---- */ .stat { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm); } .stat .big { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .stat .big .u { color: var(--ember); } .stat .lab { font-family: var(--mono); font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 8px; } /* ---- INPUT ---- */ .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: 13px; font-weight: 600; color: var(--ink-2); } .field input, .field .inp { height: 48px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--surface); padding: 0 16px; font-size: 15px; color: var(--ink); font-family: var(--sans); } .field input::placeholder { color: var(--ink-4); } .field input:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 4px var(--iris-dim); } /* ---- SECTION SHELL ---- */ .tf-section { padding: 88px 0; border-top: 1px solid var(--line); position: relative; } .tf-section.band { background: var(--paper-2); }