/* ============================================================ MAST 13 — Masterclass in Arthroplasty Surgery Design tokens, base resets, and shared primitives. Loaded after Bootstrap so these declarations win on equal specificity (body, h1-h4, .btn, etc). ============================================================ */ :root { /* ---- Brand color (sampled from poster) ---- */ --bronze: #B75A33; /* primary accent — badge & date circles */ --bronze-700: #97431f; --bronze-300: #d68a64; --bronze-100: #f3e0d6; /* warm "glowing joint" motif from the poster x-ray */ --amber: #ff9d42; --amber-hot: #ffd9a8; /* ---- Steel blue-grays = the poster's neutral undertones ---- */ --ink: #16212c; /* near-black slate, blue undertone */ --ink-2: #293744; --steel-900: #3b4f63; --steel-700: #50647c; --steel-500: #7993ae; --steel-400: #94a8c0; --steel-300: #b3c2d4; --steel-200: #d3dde8; --steel-100: #e7eef4; /* ---- Surfaces ---- */ --paper: #ffffff; --paper-2: #f3f6f9; /* cool off-white */ --paper-warm: #f8f5f2; /* faint warm panel */ /* ---- Type ---- */ --sans: "Figtree", system-ui, -apple-system, sans-serif; --serif: "Roboto Serif", Georgia, "Times New Roman", serif; /* ---- Layout ---- */ --maxw: 1280px; --gutter: clamp(20px, 5vw, 88px); --radius: 4px; /* single source of truth for the accent — change once, recolors site */ --accent: var(--bronze); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 18px; line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ---- Reusable type roles ---- */ .eyebrow { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(0.95rem, 1.4vw, 1.2rem); color: var(--accent); letter-spacing: 0; } .index-num { font-family: var(--serif); font-weight: 300; font-variant-numeric: tabular-nums; color: var(--accent); } .shell { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); width: 100%; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em; padding: 0.95em 1.6em; border-radius: var(--radius); border: 1px solid transparent; transition: all .22s ease; white-space: nowrap; } .btn--solid { background: var(--accent); color: #fff; } .btn--solid:hover { background: var(--bronze-700); transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(151,67,31,.7); color: #fff; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--steel-300); } .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; } .btn--light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); } .btn--light:hover { background: #fff; color: var(--ink); } .btn .arr { transition: transform .22s ease; } .btn:hover .arr { transform: translateX(4px); } /* ============================================================ SCROLL REVEAL (progressive enhancement) Elements start hidden ONLY when JS adds .reveal-armed to , so the page is fully visible if JS is disabled. ============================================================ */ .reveal-armed .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .reveal-armed .reveal.in { opacity: 1; transform: none; } /* ---- Respect reduced-motion: no entrance motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal-armed .reveal { opacity: 1 !important; transform: none !important; transition: none; } }