/* Main Stylesheet — Asal Dabbaghchian Portfolio */ /* design-tokens.css is linked directly in HTML — no @import needed */ /* ── Base ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { overflow-x: hidden; max-width: 100%; } html { scroll-behavior: smooth; scroll-padding-top: 4rem; color-scheme: light only; } body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-fg); background: var(--color-bg); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { line-height: 1.65; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } /* ── Eyebrow ─────────────────────────────────────────────────────────────── */ .eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.20em; color: var(--color-accent); margin-bottom: var(--space-3); } /* ── Section Spacing ─────────────────────────────────────────────────────── */ .section { padding: var(--space-16) 0; } @media (min-width: 768px) { .section { padding: var(--space-20) 0; } } .section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); } /* ── Scroll Reveal ───────────────────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); will-change: opacity, transform; } [data-reveal].revealed { opacity: 1; transform: translateY(0); } /* ── Letter-spacing guard — reduce wide tracking on very small text ──────── */ @media (max-width: 480px) { .eyebrow, .stat-strip-label, .measurement-label, .gallery-cat-number, .ugc-cat-number, .page-intro-eyebrow { letter-spacing: 0.12em; } } /* ── Selection ───────────────────────────────────────────────────────────── */ ::selection { background: rgba(201, 169, 138, 0.3); color: var(--color-fg); } /* ── Skip to Content ─────────────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--color-accent); color: var(--color-surface); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-md); z-index: 10000; transition: top var(--duration-fast) var(--ease-out); } .skip-link:focus { top: var(--space-4); } /* ── Scroll-to-top: raise above mobile tab bar ──────────────────────── */ @media (max-width: 768px) { .scroll-top-btn { bottom: calc(64px + 4rem + 10px + env(safe-area-inset-bottom)) !important; } } /* ── Print Styles ────────────────────────────────────────────────────── */ @media print { .desktop-nav, .mobile-nav, .page-intro, #prl, .scroll-top-btn, video, iframe, canvas { display: none !important; } body { background: white; color: black; font-size: 12pt; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } .section { padding: 1rem 0; page-break-inside: avoid; } }