/* ========================================================================== Razan Nasrallah — portfolio v3 Dark editorial. Type: Archivo · IBM Plex Sans Arabic · IBM Plex Mono. Accent: International Orange. Most layout is inline (as designed); this file holds tokens, keyframes, RTL handling, and the marquee. ========================================================================== */ /* -------------------------------------------------------------------------- Theme tokens — dark is default; [data-theme="light"] on flips them. Colours across the site reference these vars, so switching is instant. --------------------------------------------------------------------------- */ :root { --bg: #0B0B0C; --bg-rgb: 11, 11, 12; --panel: #131315; --panel-2: #0F0F10; --fg: #EDEAE3; --fg-2: #C9C4B8; --muted: #8E897D; --faint: #66615A; --line-rgb: 237, 234, 227; --accent: #FF5310; /* International Orange */ --on-accent: #0B0B0C; } :root[data-theme="light"] { --bg: #F4EFE6; --bg-rgb: 244, 239, 230; --panel: #FCFAF4; --panel-2: #ECE6DA; --fg: #1A1712; --fg-2: #524C40; --muted: #837C6E; --faint: #A8A090; --line-rgb: 26, 23, 18; --accent: #D93E08; /* darker orange for contrast on light */ --on-accent: #FFFFFF; } /* Elements that must stay a dark surface in light mode (e.g. the scoring chart): re-declare the dark values so their whole subtree renders dark. */ .dark-surface { --bg: #0B0B0C; --bg-rgb: 11, 11, 12; --panel: #131315; --panel-2: #0F0F10; --fg: #EDEAE3; --fg-2: #C9C4B8; --muted: #8E897D; --faint: #66615A; --line-rgb: 237, 234, 227; --accent: #FF5310; --on-accent: #0B0B0C; } html, body { margin: 0; padding: 0; background: var(--bg); } html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* smooth cross-fade when the theme flips */ [data-root], .site-header, .rz-marquee, .rz-tag, [data-preloader] { transition: background-color .4s ease, color .4s ease, border-color .4s ease; } ::selection { background: var(--accent); color: var(--on-accent); } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } @keyframes rz-blink { 0%, 100% { opacity: 1; } 50% { opacity: .1; } } @keyframes rz-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- Marquee — calm bilingual divider band --------------------------------------------------------------------------- */ .rz-marquee { border-top: 1px solid rgba(var(--line-rgb), .12); border-bottom: 1px solid rgba(var(--line-rgb), .12); padding: 22px 0; overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .rz-marquee__track { display: flex; direction: ltr; /* always LTR — even when the page is RTL, so the two sequences line up and never gap */ width: max-content; animation: rz-marquee 70s linear infinite; } .rz-marquee:hover .rz-marquee__track { animation-play-state: paused; } .rz-marquee__seq { flex: 0 0 auto; /* never shrink — hold full natural width */ display: flex; align-items: center; gap: 40px; padding-right: 40px; white-space: nowrap; font-weight: 800; font-stretch: 118%; text-transform: uppercase; letter-spacing: -.015em; font-size: clamp(28px, 4vw, 60px); line-height: 1; } .rz-m-solid { color: var(--fg-2); } .rz-m-outline { color: transparent; -webkit-text-stroke: 1px rgba(var(--line-rgb), .34); } .rz-m-solid[lang="ar"] { font-family: 'IBM Plex Sans Arabic', sans-serif; text-transform: none; letter-spacing: 0; color: var(--fg); } .rz-m-star { color: var(--accent); font-size: .48em; } @media (prefers-reduced-motion: reduce) { .rz-marquee__track { animation: none; transform: none; } } /* -------------------------------------------------------------------------- Index links — outlined type that fills on hover --------------------------------------------------------------------------- */ .idx-link { color: transparent; -webkit-text-stroke: 1.5px rgba(var(--line-rgb), .55); transition: color .3s ease; } .idx-link:hover { color: var(--fg); -webkit-text-stroke: 1.5px transparent; } .idx-link .idx-ar { color: transparent; -webkit-text-stroke: 1.2px rgba(var(--line-rgb), .55); transition: color .3s ease; } .idx-link:hover .idx-ar { color: var(--fg); -webkit-text-stroke: 1.2px transparent; } /* -------------------------------------------------------------------------- Arabic mode (html[lang="ar"], toggled by js/i18n.js) --------------------------------------------------------------------------- */ html[lang="ar"] [data-i18n] { letter-spacing: 0 !important; font-family: 'IBM Plex Sans Arabic', 'Archivo', sans-serif !important; } /* Arabic headings need real line-height — the Latin design uses .84–.95, which makes Arabic's tall letters and diacritics collide between lines. */ html[lang="ar"] h1 [data-hero-line], html[lang="ar"] h2[data-i18n], html[lang="ar"] h3[data-i18n] { line-height: 1.18 !important; max-width: 24ch !important; } html[lang="ar"] h2 span, html[lang="ar"] .big-quote { line-height: 1.2 !important; } /* Hero headline in Arabic: one wide line («رزان نصرالله.») */ html[lang="ar"] [data-hero-line] { font-weight: 700; font-size: clamp(56px, 13vw, 220px) !important; /* fits the longer name on one line */ line-height: 1.08 !important; } html[lang="ar"] [data-hero-line]:empty { display: none; } /* The Latin outline watermark moves to the upper-left in RTL */ html[lang="ar"] [data-hero-ar] { right: auto !important; left: min(4vw, 56px) !important; top: 11vh !important; font-size: clamp(56px, 8vw, 150px) !important; -webkit-text-stroke: 1.5px rgba(var(--line-rgb), 0.34) !important; } @media (max-height: 950px) { html[lang="ar"] [data-hero-ar] { display: none !important; } } /* Decorative hero watermark: hide on short windows so it never collides */ @media (max-height: 780px) { [data-hero-ar] { display: none; } } /* Header — transparent over the hero, frosted background fades in on scroll */ .site-header { border-bottom: 1px solid transparent; transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease; } .site-header.is-scrolled { background: rgba(var(--bg-rgb), .72); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border-bottom-color: rgba(var(--line-rgb), .1); box-shadow: 0 8px 30px rgba(0, 0, 0, .28); } /* Tag pills */ .rz-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; border: 1px solid rgba(var(--line-rgb), .22); border-radius: 999px; padding: 7px 14px; color: var(--fg-2); white-space: nowrap; } /* Custom cursor only exists on fine pointers; hide the dots on touch */ @media (pointer: coarse) { [data-cursor-dot], [data-cursor-ring] { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================================== Responsive layer — tablet & mobile (most sizing is inline clamp(); these overrides need !important) ========================================================================== */ /* never allow a horizontal scrollbar */ html, body { overflow-x: hidden; } img, canvas, svg, table { max-width: 100%; } /* ---- ≤1024px : tame the giant decorative section numerals (01 / 02) ---- */ @media (max-width: 1024px) { [data-numeral] { font-size: clamp(150px, 30vw, 320px) !important; opacity: .65; } } /* ---- ≤720px : tablets & large phones ---- */ @media (max-width: 720px) { section h3[data-i18n] { font-size: clamp(34px, 8.5vw, 80px) !important; } #contact h2 { font-size: clamp(46px, 12vw, 110px) !important; } #hitch, #jadara, #contact { padding-top: 13vh !important; } /* project fact strips a little tighter */ #hitch [data-reveal-kids], #jadara [data-reveal-kids] { gap: 20px !important; } } /* ---- ≤560px : phones ---- */ @media (max-width: 560px) { /* header — compact so logo + nav fit one row */ header { padding: 13px 16px !important; gap: 8px !important; } header a[href="#top"] { font-size: 10px !important; letter-spacing: .05em !important; gap: 6px !important; } header a[href="#top"] span[lang="ar"] { display: none; } /* hide Arabic name on small screens */ header nav { gap: 13px !important; font-size: 10px !important; letter-spacing: .04em !important; } header nav a[href="#contact"] { display: none; } /* contact still reachable via the footer */ header nav button[data-lang-toggle] { padding: 5px 11px !important; font-size: 12px !important; } /* hero */ #top { padding-top: 84px !important; padding-bottom: 9vh !important; } #top h1 { font-size: clamp(34px, 13vw, 110px) !important; line-height: .92 !important; } html[lang="ar"] #top [data-hero-line] { font-size: clamp(40px, 14vw, 120px) !important; } /* stats: keep three across but a touch smaller */ #top [data-hero-fade] > div > div:first-child { font-size: clamp(26px, 8vw, 40px) !important; } /* index project rows — drop the tiny 01/02, give the title room */ .idx-link { grid-template-columns: 1fr auto !important; gap: 12px !important; padding: 4vh 0 !important; } .idx-link > span:first-child { display: none; } .idx-link > span:nth-child(2) > span:first-child { font-size: clamp(40px, 13vw, 72px) !important; } /* project word-marks */ #hitch h2, #jadara h2 span:first-child { font-size: clamp(58px, 19vw, 120px) !important; } #jadara h2 span:last-child { font-size: clamp(42px, 14vw, 90px) !important; } /* project opener leads */ #hitch p[data-i18n], #jadara p[data-i18n] { font-size: 16px !important; } /* contact links wrap comfortably */ #contact a[href^="mailto"] { padding: 16px 24px !important; } } /* ---- ≤400px : small phones ---- */ @media (max-width: 400px) { header nav { gap: 11px !important; font-size: 9.5px !important; } html[lang="ar"] #top [data-hero-line] { font-size: clamp(36px, 13.5vw, 90px) !important; } }