/* ============================================================ TOSEEF.ME - shared site styles One file used by every page. Each page can set its own accent colour with: ============================================================ */ :root { --ink: #0E1726; --ink-soft: #2A3647; --paper: #F4F6FA; --paper-2: #FFFFFF; --blue: #1B5299; --blue-deep:#123A6B; --amber: #C8841E; --muted: #5B6675; --line: #D8DEE9; --line-soft:#E7EBF2; --accent: #1B5299; /* overridden per page */ --maxw: 1080px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .mono { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ---------- header / nav ---------- */ header { position: sticky; top: 0; z-index: 50; background: rgba(244,246,250,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); } .bar { display: flex; align-items: center; justify-content: space-between; height: 64px; } .mark { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); } .mark span { color: var(--accent); } nav { display: flex; gap: 22px; } nav a { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); transition: color .2s ease; white-space: nowrap; } nav a:hover, nav a.active { color: var(--accent); } @media (max-width: 720px) { nav { gap: 14px; } nav a { font-size: 10.5px; letter-spacing: 0.04em; } } @media (max-width: 480px) { body { font-size: 16px; } .bar { height: 56px; } } /* ---------- section frame ---------- */ section { padding: 60px 0; border-top: 1px solid var(--line-soft); } .sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 36px; } .sec-head .num { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--accent); font-weight: 600; } .sec-head h2 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.02em; color: var(--ink); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0.06em; padding: 13px 22px; border-radius: 4px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { filter: brightness(0.92); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(18,58,107,0.22); } .btn-ghost { border: 1px solid var(--line); color: var(--ink); background: var(--paper-2); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } /* ---------- footer ---------- */ footer { padding: 38px 0 52px; border-top: 1px solid var(--line-soft); } .foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; } .foot nav a { color: var(--muted); } /* ---------- accessibility + motion ---------- */ a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .reveal { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; } .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s} @keyframes rise { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } html { scroll-behavior: auto; } }