/* Shared styles for every page. Linked from after the Tailwind CDN. */ html { scroll-behavior: smooth; } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Decorative elements (angled marquee, ribbon SVGs) bleed past the viewport by design; clip the x-axis so they never cause horizontal panning */ main { overflow-x: clip; } /* Punch-card dot grid, as on the guidelines cover */ .dots-punch { background-image: radial-gradient(circle, rgba(24,69,160,0.13) 1.1px, transparent 1.1px); background-size: 30px 30px; } .dots-sky { background-image: radial-gradient(circle, rgba(24,69,160,0.17) 1.1px, transparent 1.1px); background-size: 30px 30px; } /* Grain overlay for paper depth */ .grain::before { content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } /* Underline that grows on hover: transform only */ .link-grow { position: relative; } .link-grow::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: 99px; background: #EF7E60; transform: scaleX(0); transform-origin: left; transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); } .link-grow:hover::after, .link-grow:focus-visible::after { transform: scaleX(1); } /* Angled scrolling marquee: transform-only animation (homepage) */ .marquee { overflow: hidden; } .marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; } @keyframes marquee { to { transform: translateX(-50%); } } /* Buttons: lift on hover, press on active (transform only) */ .btn { transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1); will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(1px) scale(0.99); } /* Cards that tilt/lift slightly */ .lift { transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1); } .lift:hover { transform: translateY(-4px); } /* Focus visibility everywhere */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #EF7E60; outline-offset: 3px; border-radius: 6px; } /* Coral marker underline swipe (like the brand cover) */ .marker { position: relative; white-space: nowrap; } .marker > svg { position: absolute; left: -2%; right: -2%; bottom: -0.12em; width: 104%; height: 0.32em; z-index: -1; } /* Code window: dark editor panel for prompt/skill content on resource pages. Capped height; the window scrolls internally so the page below stays reachable. */ .code-window { background: #0F1B33; color: #FDFAF3; } .code-scroll { max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(253, 250, 243, 0.28) transparent; } .code-scroll::-webkit-scrollbar { width: 12px; } .code-scroll::-webkit-scrollbar-track { background: transparent; } .code-scroll::-webkit-scrollbar-thumb { background: rgba(253, 250, 243, 0.22); border-radius: 99px; border: 4px solid transparent; background-clip: content-box; } .code-scroll::-webkit-scrollbar-thumb:hover { background: rgba(253, 250, 243, 0.35); border: 4px solid transparent; background-clip: content-box; } /* One row per logical line: muted number gutter, wrapped text gets no number */ .code-line { display: grid; grid-template-columns: 2.6em 1fr; column-gap: 0.9em; } .code-line-n { text-align: right; color: rgba(253, 250, 243, 0.35); user-select: none; -webkit-user-select: none; } .code-line-t { white-space: pre-wrap; overflow-wrap: break-word; min-width: 0; } /* Mobile menu panel: transform/opacity only, visibility for a11y */ .mobile-menu { opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.2s ease, visibility 0s linear 0.25s; } .mobile-menu.open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.2s ease; } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } html { scroll-behavior: auto; } .mobile-menu { transition: none; } }