/* ============================================================ portfolio.css — production stylesheet Covers every class used in portfolio.html Fonts loaded separately via Google Fonts in HTML ============================================================ */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; } /* ── Base ── */ html { scroll-behavior: smooth; /* .scroll-smooth */ } body { font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f8f7f4; color: #111110; transition: background-color 0.2s, color 0.2s; } /* ── Custom properties ── */ /* Defined on html so the fixed nav (outside body stacking context) always inherits the correct value when .dark is toggled on */ html { --nav-bg: rgba(248, 247, 244, 0.95); --nav-border: #e2e1dc; } html.dark { --nav-bg: rgba(17, 17, 16, 0.95); --nav-border: #2a2a27; } /* ── Dark mode base ── */ .dark { background-color: #111110; color: #f0efe9; } /* ════════════════════════════════════════ LAYOUT ════════════════════════════════════════ */ .fixed { position: fixed; } .top-0 { top: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .z-50 { z-index: 50; } .flex { display: flex; } .inline-block { display: inline-block; } .hidden { display: none; } .\!hidden { display: none !important; } .block { display: block; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-shrink-0 { flex-shrink: 0; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .grid { display: grid; } .grid-cols-\[120px_1fr\] { grid-template-columns: 120px 1fr; } .max-w-3xl { max-width: 48rem; } .max-w-lg { max-width: 32rem; } .max-w-sm { max-width: 24rem; } .mx-auto { margin-left: auto; margin-right: auto; } .min-w-0 { min-width: 0; } .overflow-hidden { overflow: hidden; } /* ── Gap ── */ .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-\[4\.5px\] { gap: 4.5px; } /* ════════════════════════════════════════ SPACING ════════════════════════════════════════ */ .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .pt-12 { padding-top: 3rem; } .pt-16 { padding-top: 4rem; } .pb-px { padding-bottom: 1px; } .pb-12 { padding-bottom: 3rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-1\.5 { margin-bottom: 0.375rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-7 { margin-bottom: 1.75rem; } .mt-0\.5 { margin-top: 0.125rem; } .mt-5 { margin-top: 1.25rem; } /* ════════════════════════════════════════ SIZING ════════════════════════════════════════ */ .h-7 { height: 1.75rem; } .h-12 { height: 3rem; } .h-1\.5 { height: 0.375rem; } .h-3\.5 { height: 0.875rem; } .w-7 { width: 1.75rem; } .w-1\.5 { width: 0.375rem; } .w-3\.5 { width: 0.875rem; } /* ════════════════════════════════════════ TYPOGRAPHY ════════════════════════════════════════ */ .font-sans { font-family: "DM Sans", sans-serif; } .font-mono { font-family: "DM Mono", monospace; } .font-light { font-weight: 300; } .italic { font-style: italic; } .uppercase { text-transform: uppercase; } .text-center { text-align: center; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-\[10px\] { font-size: 10px; } .leading-tight { line-height: 1.25; } .leading-snug { line-height: 1.375; } .leading-relaxed { line-height: 1.625; } .leading-loose { line-height: 2; } .tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.025em; } .tracking-widest { letter-spacing: 0.1em; } /* ════════════════════════════════════════ COLORS — text ════════════════════════════════════════ */ .text-stone-50 { color: #f8f7f4; } .text-stone-300 { color: #c8c7c1; } .text-stone-400 { color: #a8a8a3; } .text-stone-500 { color: #6b6b67; } .text-stone-600 { color: #4a4a47; } .text-stone-900 { color: #111110; } .dark .dark\:text-stone-100 { color: #f0efe9; } .dark .dark\:text-stone-300 { color: #c8c7c1; } .dark .dark\:text-stone-400 { color: #a8a8a3; } .dark .dark\:text-stone-500 { color: #6b6b67; } .dark .dark\:text-stone-600 { color: #4a4a47; } .dark .dark\:text-stone-900 { color: #111110; } /* ════════════════════════════════════════ COLORS — background ════════════════════════════════════════ */ .bg-stone-50 { background-color: #f8f7f4; } .bg-stone-200 { background-color: #e2e1dc; } .bg-stone-300 { background-color: #c8c7c1; } .bg-stone-900 { background-color: #111110; } .bg-emerald-500 { background-color: #10b981; } .dark .dark\:bg-stone-100 { background-color: #f0efe9; } .dark .dark\:bg-stone-600 { background-color: #4a4a47; } .dark .dark\:bg-stone-700 { background-color: #2a2a27; } .dark .dark\:bg-stone-900 { background-color: #111110; } /* ════════════════════════════════════════ COLORS — border ════════════════════════════════════════ */ .border { border-width: 1px; border-style: solid; } .border-b { border-bottom-width: 1px; border-bottom-style: solid; } .border-t { border-top-width: 1px; border-top-style: solid; } .border-transparent { border-color: transparent; } .border-stone-200 { border-color: #e2e1dc; } .dark .dark\:border-stone-700 { border-color: #2a2a27; } /* Divide */ .divide-y>*+* { border-top-width: 1px; border-top-style: solid; } .divide-stone-200>*+* { border-top-color: #e2e1dc; } .dark .dark\:divide-stone-700>*+* { border-top-color: #2a2a27; } /* ════════════════════════════════════════ BORDER RADIUS ════════════════════════════════════════ */ .rounded { border-radius: 0.25rem; } .rounded-sm { border-radius: 0.125rem; } .rounded-full { border-radius: 9999px; } /* ════════════════════════════════════════ TRANSITIONS ════════════════════════════════════════ */ .duration-200 { transition-duration: 0.2s; } .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; } /* ════════════════════════════════════════ EFFECTS ════════════════════════════════════════ */ .backdrop-blur-sm { backdrop-filter: blur(4px); } /* ════════════════════════════════════════ HOVER STATES ════════════════════════════════════════ */ .hover\:opacity-75:hover { opacity: 0.75; } .hover\:text-stone-700:hover { color: #2a2a27; } .hover\:text-stone-900:hover { color: #111110; } .hover\:bg-stone-100:hover { background-color: #f0efe9; } .hover\:bg-stone-200:hover { background-color: #e2e1dc; } .hover\:border-stone-400:hover { border-color: #a8a8a3; } .dark .dark\:hover\:text-stone-100:hover { color: #f0efe9; } .dark .dark\:hover\:text-stone-300:hover { color: #c8c7c1; } .dark .dark\:hover\:bg-stone-800:hover { background-color: #1a1a18; } /* Group hover */ .group:hover .group-hover\:text-stone-500 { color: #6b6b67; } .dark .group:hover .dark\:group-hover\:text-stone-400 { color: #a8a8a3; } /* ════════════════════════════════════════ NAV — sticky reveal on scroll ════════════════════════════════════════ */ #nav-bar { transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; } #nav-bar.scrolled { background: var(--nav-bg); border-bottom-color: var(--nav-border); box-shadow: 0 1px 0 0 var(--nav-border); } /* ════════════════════════════════════════ MOBILE MENU ════════════════════════════════════════ */ #mobile-menu { display: none; } #mobile-menu.open { display: block; } /* ════════════════════════════════════════ HAMBURGER ════════════════════════════════════════ */ #hamburger span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.2s, opacity 0.2s; transform-origin: center; } #hamburger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); } #hamburger.open span:nth-child(2) { opacity: 0; } #hamburger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* ════════════════════════════════════════ WORK CARD — arrow nudge ════════════════════════════════════════ */ .arrow-icon { transition: transform 0.15s; display: inline-block; } .work-card:hover .arrow-icon { transform: translate(2px, -2px); } /* ════════════════════════════════════════ AVAILABILITY DOT — pulse ════════════════════════════════════════ */ @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .pulse { animation: pulse-dot 2.5s ease-in-out infinite; } /* ════════════════════════════════════════ RESPONSIVE — sm: (640px+) ════════════════════════════════════════ */ @media (min-width: 640px) { /* Display */ .sm\:flex { display: flex; } .sm\:grid { display: grid; } .sm\:inline-block { display: inline-block; } .sm\:hidden { display: none; } /* Flex */ .sm\:flex-row { flex-direction: row; } .sm\:flex-wrap { flex-wrap: wrap; } /* Grid */ .sm\:grid-cols-\[120px_1fr\] { grid-template-columns: 120px 1fr; } /* Gap */ .sm\:gap-5 { gap: 1.25rem; } .sm\:gap-10 { gap: 2.5rem; } /* Padding */ .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; } .sm\:pt-20 { padding-top: 5rem; } .sm\:pb-16 { padding-bottom: 4rem; } /* Margin */ .sm\:mb-5 { margin-bottom: 1.25rem; } .sm\:mb-8 { margin-bottom: 2rem; } /* Typography */ .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } }