/* ========================================================================== SIP Telephony — From Zero to Hero Shared design system. Apple-inspired, dense, data-forward. No build step. Drop this file in via . ========================================================================== */ :root { /* Color palette */ --fg: #1d1d1f; --muted: #86868b; --light: #aeaeb2; --border: #d2d2d7; --border-light: #e8e8ed; --bg: #ffffff; --bg-alt: #f5f5f7; --bg-elev: #fbfbfd; --freya: #5856d6; --freya-dark: #3634a3; --freya-bg: #f3f2fc; --green: #248a3d; --green-bg: #f0f8f2; --amber: #b25000; --amber-bg: #fef6ee; --red: #d70015; --red-bg: #fef1f2; --blue: #0066cc; --blue-bg: #eaf3fc; /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Fira Mono", Menlo, monospace; /* Layout */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --max-w: 1180px; --shadow-soft: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); /* Spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); } body { font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--freya); text-decoration: none; } a:hover { color: var(--freya-dark); } /* ===== top nav ===== */ .topnav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border-light); } .topnav .inner { max-width: var(--max-w); margin: 0 auto; padding: 10px 24px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .topnav .brand { font-weight: 600; font-size: 14px; color: var(--fg); display: flex; align-items: center; gap: 8px; } .topnav .brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--freya); } .topnav nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; } .topnav nav a { font-size: 12px; padding: 4px 10px; border-radius: 20px; color: var(--muted); letter-spacing: 0.01em; transition: all 120ms; } .topnav nav a:hover { color: var(--fg); background: var(--bg-alt); } .topnav nav a.active { color: var(--bg); background: var(--freya); } .topnav .meta { font-size: 11px; color: var(--light); font-family: var(--font-mono); } /* ===== hero (used on landing page) ===== */ .hero { max-width: var(--max-w); margin: 0 auto; padding: 64px 24px 32px; } .hero h1 { font-size: 56px; line-height: 1.05; margin: 0 0 18px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(180deg, #1d1d1f 0%, #4a4a4f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero .lede { font-size: 22px; line-height: 1.45; color: var(--muted); max-width: 760px; margin: 0 0 28px; font-weight: 400; } .hero .pills { display: flex; gap: 8px; flex-wrap: wrap; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--freya-bg); color: var(--freya); } .pill.muted { background: var(--bg-alt); color: var(--muted); } .pill.green { background: var(--green-bg); color: var(--green); } .pill.amber { background: var(--amber-bg); color: var(--amber); } .pill.red { background: var(--red-bg); color: var(--red); } /* ===== part header (used on each part page) ===== */ .parthead { max-width: var(--max-w); margin: 0 auto; padding: 48px 24px 16px; } .parthead .eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--freya); font-weight: 600; margin-bottom: 12px; } .parthead h1 { font-size: 40px; line-height: 1.1; margin: 0 0 12px; font-weight: 700; letter-spacing: -0.02em; } .parthead .lede { font-size: 18px; color: var(--muted); max-width: 720px; margin: 0; } .parthead .meta-row { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } /* ===== content layout ===== */ .container { max-width: var(--max-w); margin: 0 auto; padding: 24px 24px 96px; } section.step { border-top: 1px solid var(--border-light); padding: 28px 0; display: grid; grid-template-columns: 88px 1fr; gap: 24px; } section.step:first-of-type { border-top: 0; } section.step .num { font-family: var(--font-mono); font-size: 13px; color: var(--light); padding-top: 4px; } section.step .num strong { display: block; font-size: 24px; font-weight: 600; color: var(--freya); font-family: var(--font-sans); letter-spacing: -0.02em; } section.step h2 { font-size: 22px; line-height: 1.25; margin: 0 0 12px; font-weight: 600; letter-spacing: -0.01em; } section.step p { margin: 0 0 12px; } section.step ul, section.step ol { padding-left: 22px; margin: 0 0 12px; } section.step li { margin-bottom: 4px; } /* tighter body when needed */ .tight p, .tight li { margin-bottom: 6px; } /* ===== inline elements ===== */ code, .mono { font-family: var(--font-mono); font-size: 0.92em; } p code, li code, td code { background: var(--bg-alt); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-light); } /* code block */ pre.block { background: #0d0e12; color: #e7e9f0; padding: 16px 18px; border-radius: var(--radius); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; margin: 12px 0; border: 1px solid #1c1f28; } pre.block .c { color: #6c7080; } /* comment */ pre.block .s { color: #a3e3a8; } /* string */ pre.block .k { color: #8ab4ff; } /* keyword */ pre.block .n { color: #f3c98a; } /* number */ pre.block .err { color: #ff8a8a; } pre.block .ok { color: #7be3a4; } /* terminal with prompt */ pre.term { background: #0d0e12; color: #e7e9f0; padding: 14px 16px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 13px; line-height: 1.55; margin: 12px 0; overflow-x: auto; } pre.term .prompt { color: var(--freya); user-select: none; } pre.term .out { color: #a8acba; } /* try-this callout */ .try { border: 1px solid var(--border-light); border-left: 3px solid var(--freya); background: var(--bg-elev); padding: 14px 16px; border-radius: 6px; margin: 12px 0; } .try .label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--freya); margin-bottom: 6px; } /* checkpoint callout */ .checkpoint { border: 1px solid var(--amber); background: var(--amber-bg); padding: 14px 16px; border-radius: 6px; margin: 24px 0; } .checkpoint .label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; } .checkpoint details summary { cursor: pointer; font-weight: 500; color: var(--amber); font-size: 13px; margin-top: 8px; } .checkpoint details[open] summary { margin-bottom: 6px; } /* ===== tables ===== */ table.data { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; } table.data th, table.data td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-light); vertical-align: top; } table.data th { font-weight: 600; color: var(--muted); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--border); } table.data tbody tr:hover { background: var(--bg-alt); } table.data td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); } /* ===== cards ===== */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 16px 0; } .card { border: 1px solid var(--border-light); border-radius: var(--radius); padding: 16px 18px; background: var(--bg); transition: border-color 120ms, transform 120ms; } .card:hover { border-color: var(--border); } .card a:hover { text-decoration: none; } .card h3 { font-size: 16px; margin: 0 0 6px; font-weight: 600; } .card p { font-size: 13px; color: var(--muted); margin: 0; } .card .top-stripe { height: 3px; margin: -16px -18px 12px; border-radius: var(--radius) var(--radius) 0 0; background: var(--freya); } /* ===== buttons ===== */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; transition: all 120ms; } .btn:hover { background: var(--bg-alt); border-color: var(--light); } .btn.primary { background: var(--freya); color: white; border-color: var(--freya); } .btn.primary:hover { background: var(--freya-dark); border-color: var(--freya-dark); } .btn.ghost { background: transparent; } .btn.sm { padding: 4px 10px; font-size: 12px; } /* ===== part footer / prev-next ===== */ .partfoot { max-width: var(--max-w); margin: 0 auto; padding: 32px 24px 80px; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--border-light); } .partfoot a { display: flex; flex-direction: column; padding: 14px 18px; border: 1px solid var(--border-light); border-radius: var(--radius); flex: 1; transition: border-color 120ms; } .partfoot a:hover { border-color: var(--freya); } .partfoot a span { font-size: 11px; color: var(--muted); } .partfoot a strong { font-size: 16px; color: var(--fg); margin-top: 2px; } .partfoot a.next { text-align: right; } /* ===== generic interactive demo wrapper ===== */ .demo { border: 1px solid var(--border-light); border-radius: var(--radius); padding: 18px; margin: 16px 0; background: var(--bg-elev); } .demo .demo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .demo .demo-title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--fg); } .demo .demo-controls { display: flex; gap: 6px; } .demo .demo-stage { min-height: 80px; } .demo .demo-caption { font-size: 12px; color: var(--muted); margin-top: 10px; } /* SVG diagrams */ svg.diagram { width: 100%; height: auto; display: block; } /* scroll reveal (lib.js adds .visible) */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity 360ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* responsive */ @media (max-width: 720px) { .hero h1 { font-size: 36px; } .hero .lede { font-size: 17px; } .parthead h1 { font-size: 28px; } section.step { grid-template-columns: 1fr; gap: 8px; } section.step .num strong { font-size: 16px; display: inline; margin-right: 6px; } }