/* ============================================================ ARIELA DANAEI — Define. Design. Dominate. Palette: Near-Black #0D0D0D · Pure White #FFFFFF · Signal Red #E31E24 Type: Barlow Condensed (self-hosted) — Black 900 / Medium 500 / Regular 400 Rule: red appears sparingly — one accent per section. ============================================================ */ @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/barlow-condensed-regular.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/barlow-condensed-medium.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/barlow-condensed-black.woff2") format("woff2"); } :root { --black: #0D0D0D; --white: #FFFFFF; --red: #E31E24; --grey: #6b6b6b; --line: #e6e6e6; --line-dark: #2a2a2a; --maxw: 1200px; --pad: clamp(20px, 5vw, 80px); --font: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ---------- Cross-page fade transition ---------- */ /* Two layers, so every project page fades in on arrival: 1. Cross-document view transitions (Chrome 126+) — a true crossfade where supported. 2. A plain CSS fade-in on the project-page — the RELIABLE fallback that also runs over file:// and in browsers without view transitions. This is what guarantees Gazebo/Loaf/FE all fade in when opened from the home page. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; } @keyframes ad-page-in { from { opacity: 0; } to { opacity: 1; } } /* No fill-mode: the page defaults to fully visible, so if the animation never runs (throttled/background tab, odd browser) it fails VISIBLE, never blank. */ body.gz, body.lf, body.fe { animation: ad-page-in 0.45s ease; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } body.gz, body.lf, body.fe { animation: none; } } body { font-family: var(--font); background: var(--white); color: var(--black); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } .accent { color: var(--red); } /* ---------- Shared type ---------- */ .eyebrow { font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; font-size: 13px; color: var(--grey); margin-bottom: 22px; } .eyebrow--light { color: rgba(255,255,255,0.6); } .section__title { font-weight: 900; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; font-size: clamp(44px, 8vw, 104px); } .section__lead { max-width: 42ch; margin-top: 22px; color: var(--grey); font-size: clamp(18px, 2.2vw, 22px); } .section--dark .section__lead { color: rgba(255,255,255,0.7); } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--font); /*