/* =================================================================== WeBelle — Redesigned editorial homepage Light + Dark mode via [data-theme] attribute on =================================================================== */ :root, [data-theme='light'] { /* Brand colors — unchanged */ --base: #30bd9b; --base-deep: #1e9678; --warm: #d94f6f; --warm-deep: #b73a57; /* Light mode palette */ --ink: #1d1e26; --ink-2: #4a4b58; --ink-3: #797a8c; --ink-4: #a8a9b5; --line: #e6e7eb; --line-2: #d6d8de; --bg: #fbfaf7; --bg-2: #f3f1eb; --bg-3: #e8e5dc; --bg-dark: #1d1e26; /* Stats section colors */ --stats-bg: #1d1e26; --stats-text: #fbfaf7; /* Card surface for testimonials/pricing */ --card-bg: #fbfaf7; /* CTA banner */ --cta-bg: #1d1e26; --cta-text: #fbfaf7; /* Logo filter — Logo is dark in original, so no filter needed in light mode */ --logo-filter: none; } [data-theme='dark'] { --base: #30bd9b; --base-deep: #4dd4b1; --warm: #e87189; --warm-deep: #d94f6f; --ink: #f4f3ef; --ink-2: #c4c5cc; --ink-3: #8a8b97; --ink-4: #5a5b67; --line: #2a2b34; --line-2: #383942; --bg: #0f1014; --bg-2: #16171c; --bg-3: #1d1e26; --bg-dark: #0a0b0f; /* Stats section inverts to cream-on-dark-deeper in dark mode */ --stats-bg: #16171c; --stats-text: #f4f3ef; --card-bg: #16171c; --cta-bg: #16171c; --cta-text: #f4f3ef; /* Logo is dark text — invert it for dark mode */ --logo-filter: invert(1) brightness(1.1); } /* ============== BASE ============== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter Tight', system-ui, sans-serif; background: var(--bg); color: var(--ink); font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.3s ease, color 0.3s ease; } .container { max-width: 1340px; margin: 0 auto; padding: 0 32px; } /* Font shortcuts */ .font-display { font-family: 'Fraunces', serif; } .font-mono { font-family: 'JetBrains Mono', monospace; } /* ============== ANNOUNCEMENT ============== */ .announce { background: var(--bg-dark); color: var(--bg); padding: 11px 0; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.3s ease; } [data-theme='dark'] .announce { background: #06070a; color: var(--ink); } .announce a { color: var(--base); text-decoration: none; border-bottom: 1px solid currentColor; margin-left: 10px; } .announce span { color: var(--ink-4); margin: 0 8px; } /* ============== NAV ============== */ nav { padding: 22px 0; position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background 0.3s ease, border-color 0.3s ease; } .nav-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .navbar-brand { display: flex; align-items: center; text-decoration: none; } .navbar-brand img { max-height: 28px; width: auto; display: block; filter: var(--logo-filter); transition: filter 0.3s ease; } .nav-links { display: flex; gap: 32px; align-items: center; font-size: 14px; } .nav-links a { color: var(--ink-2); text-decoration: none; transition: color 0.2s; font-weight: 400; } .nav-links a:hover { color: var(--ink); } /* Phone number in nav */ .nav-phone { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-2); letter-spacing: 0.04em; text-decoration: none; transition: color 0.2s; } .nav-phone:hover { color: var(--ink); } .nav-phone i { font-size: 14px; color: var(--base); } /* Get a quote CTA — text always stays light for visibility */ .nav-cta { background: var(--ink); color: #fbfaf7 !important; /* Always cream-white, regardless of theme */ padding: 11px 22px; border-radius: 99px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; letter-spacing: 0.02em; } .nav-cta:hover { background: var(--warm); color: #fbfaf7 !important; transform: translateY(-1px); } [data-theme='dark'] .nav-cta { background: var(--base); color: var(--bg-dark) !important; } [data-theme='dark'] .nav-cta:hover { background: var(--warm); color: #fbfaf7 !important; } /* Theme toggle button */ .theme-toggle { width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 16px; } .theme-toggle:hover { border-color: var(--ink); background: var(--bg-2); } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: inline; } [data-theme='dark'] .theme-toggle .sun { display: inline; } [data-theme='dark'] .theme-toggle .moon { display: none; } /* ============== HERO ============== */ .hero { padding: 100px 0 140px; position: relative; border-bottom: 1px solid var(--line); } .hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.32em; color: var(--base-deep); text-transform: uppercase; margin-bottom: 40px; display: flex; align-items: center; gap: 14px; } .hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--base); } h1 { font-family: 'Fraunces', serif; font-size: clamp(60px, 9vw, 144px); font-weight: 300; line-height: 0.92; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 40px; max-width: 1100px; } h1 em { font-style: italic; font-weight: 400; color: var(--warm); } .hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-top: 64px; } .hero-sub { font-size: 19px; line-height: 1.7; color: var(--ink-2); max-width: 520px; font-weight: 300; } .hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .btn-primary { background: var(--ink); color: var(--bg); padding: 18px 38px; border: none; font-family: 'Inter Tight', sans-serif; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border-radius: 99px; transition: all 0.3s ease; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; } .btn-primary:hover { background: var(--warm); transform: translateY(-2px); color: var(--bg); } .btn-primary i { font-size: 16px; transition: transform 0.3s; } .btn-primary:hover i { transform: translateX(4px); } .btn-link { color: var(--ink); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 4px; transition: all 0.2s; } .btn-link:hover { color: var(--warm); border-bottom-color: var(--warm); } .hero-rotate { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; color: var(--ink-3); font-size: 14px; } .rotate-track { display: inline-block; height: 24px; overflow: hidden; position: relative; } .rotate-track span { display: block; height: 24px; line-height: 24px; color: var(--ink); font-weight: 500; animation: rotateWords 12s infinite; } @keyframes rotateWords { 0%, 16.66% { transform: translateY(0); } 20%, 36.66% { transform: translateY(-24px); } 40%, 56.66% { transform: translateY(-48px); } 60%, 76.66% { transform: translateY(-72px); } 80%, 96.66% { transform: translateY(-96px); } 100% { transform: translateY(-120px); } } /* ============== MARQUEE (faster animation) ============== */ .marquee { padding: 0; border-bottom: 1px solid var(--line); overflow: hidden; background: var(--bg); } .marquee-track { display: flex; gap: 0; animation: scroll 22s linear infinite; /* was 40s — now faster */ white-space: nowrap; padding: 32px 0; } .marquee-item { font-family: 'Fraunces', serif; font-size: clamp(40px, 6vw, 80px); font-weight: 300; letter-spacing: -0.025em; color: var(--ink); display: flex; align-items: center; padding: 0 40px; } .marquee-item em { font-style: italic; color: var(--warm); margin-left: 0.2em; } .marquee-dot { width: 12px; height: 12px; background: var(--base); border-radius: 50%; margin: 0 32px; flex-shrink: 0; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ============== SERVICES ============== */ .services { padding: 140px 0 120px; } .section-head { margin-bottom: 96px; max-width: 980px; } .section-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.32em; color: var(--base-deep); text-transform: uppercase; margin-bottom: 24px; display: flex; align-items: center; gap: 14px; } .section-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--base); } .section-title { font-family: 'Fraunces', serif; font-size: clamp(44px, 6vw, 80px); font-weight: 300; letter-spacing: -0.025em; line-height: 1; color: var(--ink); } .section-title em { font-style: italic; color: var(--warm); font-weight: 400; } .section-lead { font-size: 18px; color: var(--ink-2); line-height: 1.7; max-width: 560px; margin-top: 28px; font-weight: 300; } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); } .service { padding: 48px 40px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.3s ease; position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; text-decoration: none; color: inherit; } .service:nth-child(odd) { border-right: 1px solid var(--line); } .service:hover { background: var(--bg-2); } .service-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-4); letter-spacing: 0.1em; } .service-content { flex: 1; } .service-name { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 400; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 8px; line-height: 1.1; } .service-name em { font-style: italic; color: var(--warm); } .service-desc { font-size: 14px; color: var(--ink-3); line-height: 1.6; max-width: 440px; font-weight: 300; } .service-arrow { width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: all 0.3s ease; font-size: 16px; } .service:hover .service-arrow { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: rotate(-45deg); } .service-badge { position: absolute; top: 24px; right: 24px; font-family: 'JetBrains Mono', monospace; font-size: 9px; background: var(--warm); color: #fbfaf7; padding: 5px 10px; border-radius: 99px; letter-spacing: 0.15em; text-transform: uppercase; } /* ============== STATS ============== */ .stats { background: var(--stats-bg); color: var(--stats-text); padding: 90px 0; transition: background 0.3s ease; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; } .stat-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--ink-4); text-transform: uppercase; margin-bottom: 14px; } [data-theme='dark'] .stat-label { color: var(--ink-3); } .stat-num { font-family: 'Fraunces', serif; font-size: 64px; font-weight: 300; letter-spacing: -0.03em; color: var(--stats-text); line-height: 1; } .stat-num em { font-style: italic; color: var(--base); font-weight: 400; } .stat-desc { font-size: 13px; color: var(--ink-4); margin-top: 14px; line-height: 1.6; max-width: 200px; font-weight: 300; } [data-theme='dark'] .stat-desc { color: var(--ink-3); } /* ============== PROCESS ============== */ .process { padding: 140px 0; background: var(--bg-2); transition: background 0.3s ease; } .process-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 96px; } .process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .process-step { background: var(--bg-2); padding: 56px 40px; position: relative; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; } .step-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--base-deep); letter-spacing: 0.12em; margin-bottom: 24px; } .step-title { font-family: 'Fraunces', serif; font-size: 36px; font-weight: 400; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 18px; line-height: 1.1; } .step-desc { font-size: 14px; color: var(--ink-3); line-height: 1.7; font-weight: 300; } .step-illus { font-family: 'Fraunces', serif; font-size: 120px; font-weight: 300; line-height: 1; color: var(--bg-3); text-align: right; margin-top: auto; letter-spacing: -0.04em; } /* ============== PRICING ============== */ .pricing { padding: 140px 0; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 80px; } .price-card { border: 1px solid var(--line); border-radius: 18px; padding: 48px 40px; background: var(--card-bg); position: relative; transition: all 0.3s ease; display: flex; flex-direction: column; } .price-card.featured { background: var(--ink); color: var(--bg); border-color: var(--ink); } [data-theme='dark'] .price-card.featured { background: var(--bg-3); border-color: var(--bg-3); } .price-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(29, 30, 38, 0.06); } .price-card.featured:hover { box-shadow: 0 30px 60px rgba(29, 30, 38, 0.3); } .price-tier { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 24px; } .price-card.featured .price-tier { color: var(--base); } .price-name { font-family: 'Fraunces', serif; font-size: 48px; font-weight: 300; letter-spacing: -0.025em; line-height: 1; margin-bottom: 18px; color: var(--ink); } .price-card.featured .price-name { color: var(--bg); } [data-theme='dark'] .price-card.featured .price-name { color: var(--ink); } .price-name em { font-style: italic; color: var(--warm); } .price-card.featured .price-name em { color: var(--base); } .price-desc { font-size: 14px; color: var(--ink-3); line-height: 1.65; margin-bottom: 32px; font-weight: 300; } .price-card.featured .price-desc { color: var(--ink-4); } [data-theme='dark'] .price-card.featured .price-desc { color: var(--ink-3); } .price-features { list-style: none; padding: 0; margin-bottom: 36px; flex: 1; } .price-features li { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; } .price-card.featured .price-features li { color: var(--bg); } [data-theme='dark'] .price-card.featured .price-features li { color: var(--ink); } .price-features li i { color: var(--base); font-size: 16px; margin-top: 2px; flex-shrink: 0; } .price-quote { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; margin-bottom: 24px; letter-spacing: -0.01em; color: var(--ink); } .price-card.featured .price-quote { color: var(--bg); } [data-theme='dark'] .price-card.featured .price-quote { color: var(--ink); } .price-quote em { font-style: italic; color: var(--warm); } .price-cta { background: var(--ink); color: var(--bg); padding: 14px 28px; border-radius: 99px; text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; transition: all 0.2s; display: block; } .price-card.featured .price-cta { background: var(--base); color: var(--ink); } .price-cta:hover { background: var(--warm); color: #fbfaf7; } .price-card.featured .price-cta:hover { background: var(--bg); color: var(--ink); } [data-theme='dark'] .price-card.featured .price-cta:hover { background: var(--ink); color: var(--bg); } .price-popular { position: absolute; top: -12px; left: 40px; background: var(--warm); color: #fbfaf7; padding: 6px 16px; border-radius: 99px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; } .pricing-note { text-align: center; margin-top: 48px; font-size: 14px; color: var(--ink-3); font-weight: 300; } .pricing-note a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 500; } /* ============== TESTIMONIALS ============== */ .testimonials { padding: 140px 0; background: var(--bg-2); transition: background 0.3s ease; } .test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 80px; } .test-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 18px; padding: 40px 36px; display: flex; flex-direction: column; gap: 24px; } .test-quote { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 300; line-height: 1.4; color: var(--ink); letter-spacing: -0.01em; flex: 1; } .test-quote::before { content: '"'; font-family: 'Fraunces', serif; font-size: 64px; color: var(--base); line-height: 0.5; display: block; margin-bottom: 14px; font-weight: 300; } .test-author { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); } .test-name { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .test-stars { color: var(--warm); font-size: 12px; letter-spacing: 2px; } /* ============== CLIENTS ============== */ .clients { padding: 100px 0; border-top: 1px solid var(--line); } .clients-head { text-align: center; margin-bottom: 60px; } .clients-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.32em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 14px; } .clients-title { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; } .clients-title em { font-style: italic; color: var(--warm); } .client-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .client-cell { aspect-ratio: 1.4; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); transition: background 0.3s; padding: 24px; } .client-cell:last-child { border-right: none; } .client-cell:hover { background: var(--bg-2); } .client-cell a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; } .client-cell img { max-width: 100%; max-height: 60%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) opacity(0.55); transition: filter 0.3s; } [data-theme='dark'] .client-cell img { filter: grayscale(1) opacity(0.45) invert(0.85); } .client-cell:hover img { filter: none; } .client-cell img.empa-dark-fix { filter: grayscale(1) opacity(0.55) invert(0.6); } [data-theme='dark'] .client-cell img.empa-dark-fix { filter: grayscale(1) opacity(0.7); } .client-cell:hover img.empa-dark-fix { filter: invert(0.6); } [data-theme='dark'] .client-cell:hover img.empa-dark-fix { filter: none; } /* ============== FAQ ============== */ .faq { padding: 140px 0; } .faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } .faq-item { border-top: 1px solid var(--line); padding: 32px 0; cursor: pointer; } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .faq-q-text { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; } .faq-toggle { width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s; color: var(--ink); font-size: 18px; } .faq-item.open .faq-toggle { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, margin-top 0.4s ease; color: var(--ink-2); font-size: 15px; line-height: 1.75; font-weight: 300; padding-right: 60px; } .faq-item.open .faq-a { max-height: 300px; margin-top: 18px; } /* ============== CTA BANNER ============== */ .cta-banner { margin: 0 32px 80px; background: var(--cta-bg); color: var(--cta-text); border-radius: 24px; padding: 90px 60px; text-align: center; position: relative; overflow: hidden; transition: background 0.3s ease; } .cta-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 200px; background: radial-gradient(circle at center, var(--warm), transparent 70%); opacity: 0.4; border-radius: 50%; transform: translate(-30%, -30%); } .cta-banner::after { content: ''; position: absolute; bottom: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle at center, var(--base), transparent 70%); opacity: 0.3; border-radius: 50%; transform: translate(30%, 30%); } .cta-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.32em; color: var(--base); text-transform: uppercase; margin-bottom: 24px; position: relative; z-index: 2; } .cta-title { font-family: 'Fraunces', serif; font-size: clamp(40px, 5.5vw, 72px); font-weight: 300; letter-spacing: -0.025em; line-height: 1; color: var(--cta-text); margin-bottom: 40px; position: relative; z-index: 2; } .cta-title em { font-style: italic; color: var(--warm); font-weight: 400; } .cta-btn { background: var(--bg); color: var(--ink); padding: 20px 44px; border-radius: 99px; text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; transition: all 0.3s; position: relative; z-index: 2; } .cta-btn:hover { background: var(--base); transform: translateY(-2px); } .cta-btn i { transition: transform 0.3s; } .cta-btn:hover i { transform: translateX(4px); } /* ============== FOOTER ============== */ footer { border-top: 1px solid var(--line); padding: 80px 0 40px; background: var(--bg); transition: background 0.3s ease; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 80px; margin-bottom: 80px; } .footer-brand img { max-height: 32px; width: auto; display: block; margin-bottom: 24px; filter: var(--logo-filter); transition: filter 0.3s ease; } .footer-tag { font-size: 15px; color: var(--ink-3); line-height: 1.75; max-width: 340px; margin-bottom: 32px; font-weight: 300; } .footer-contact { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-2); letter-spacing: 0.05em; margin-bottom: 6px; } .footer-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; } .footer-contact a:hover { border-bottom-color: currentColor; } .footer-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 24px; color: var(--ink); font-weight: 500; } .footer-col a { display: block; color: var(--ink-2); text-decoration: none; font-size: 14px; margin-bottom: 12px; transition: color 0.2s; font-weight: 300; } .footer-col a:hover { color: var(--warm); } .footer-bottom { border-top: 1px solid var(--line); padding-top: 32px; display: flex; justify-content: space-between; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; } .footer-socials { display: flex; gap: 24px; } .footer-socials a { color: var(--ink-2); font-size: 16px; transition: color 0.2s; text-decoration: none; } .footer-socials a:hover { color: var(--warm); } /* ============== RESPONSIVE ============== */ @media (max-width: 1100px) { .nav-phone { display: none; } } @media (max-width: 1000px) { .hero-bottom { grid-template-columns: 1fr; gap: 48px; } .services-grid { grid-template-columns: 1fr; } .service:nth-child(odd) { border-right: none; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; } .process-head { grid-template-columns: 1fr; gap: 32px; } .process-steps { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; gap: 18px; } .test-grid { grid-template-columns: 1fr; gap: 16px; } .client-row { grid-template-columns: repeat(4, 1fr); } .client-cell:nth-child(4) { border-right: none; } .client-cell:nth-child(5), .client-cell:nth-child(6), .client-cell:nth-child(7) { border-top: 1px solid var(--line); } .faq-grid { grid-template-columns: 1fr; gap: 48px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-bottom { flex-direction: column; gap: 14px; text-align: center; } .cta-banner { padding: 60px 32px; margin: 0 20px 60px; } } @media (max-width: 540px) { .container { padding: 0 20px; } .nav-links { gap: 12px; } .nav-links a:not(.nav-cta):not(.theme-toggle) { display: none; } .hero { padding: 60px 0 80px; } .services { padding: 90px 0 70px; } .service { grid-template-columns: auto 1fr; padding: 32px 24px; gap: 18px; } .service-arrow { grid-column: 2; justify-self: end; margin-top: 14px; } .service-name { font-size: 24px; } .stats-grid { grid-template-columns: 1fr; gap: 36px; } .price-card { padding: 36px 28px; } .test-quote { font-size: 18px; } .client-row { grid-template-columns: repeat(2, 1fr); } .client-cell:nth-child(3), .client-cell:nth-child(5), .client-cell:nth-child(7) { border-right: none; } .footer-grid { grid-template-columns: 1fr; gap: 40px; } .cta-banner { padding: 50px 24px; } } /* =================================================================== RTL / ARABIC OVERRIDES Applied when is set. Loads Arabic typography (Reem Kufi + Tajawal) and adjusts directional UI elements: arrows, borders, ticker, alignment. =================================================================== */ /* Arabic typography */ @import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700&display=swap'); [dir='rtl'] body { font-family: 'Tajawal', 'Inter Tight', system-ui, sans-serif; line-height: 1.7; } /* Arabic display font for everything that uses Fraunces */ [dir='rtl'] .font-display, [dir='rtl'] h1, [dir='rtl'] .section-title, [dir='rtl'] .service-name, [dir='rtl'] .step-title, [dir='rtl'] .price-name, [dir='rtl'] .price-quote, [dir='rtl'] .marquee-item, [dir='rtl'] .test-quote, [dir='rtl'] .clients-title, [dir='rtl'] .faq-q-text, [dir='rtl'] .cta-title, [dir='rtl'] .footer-tag, [dir='rtl'] .step-illus { font-family: 'Reem Kufi', serif; } /* Arabic doesn't use italic — convert italic emphasis to weight instead */ [dir='rtl'] h1 em, [dir='rtl'] .section-title em, [dir='rtl'] .service-name em, [dir='rtl'] .price-name em, [dir='rtl'] .price-quote em, [dir='rtl'] .marquee-item em, [dir='rtl'] .clients-title em, [dir='rtl'] .faq-q-text em, [dir='rtl'] .cta-title em, [dir='rtl'] .step-title em { font-style: normal; font-weight: 700; color: var(--warm); } /* Larger weight for Arabic body to compensate for visual weight difference */ [dir='rtl'] h1 { font-weight: 600; line-height: 1.05; letter-spacing: 0; } [dir='rtl'] .section-title { font-weight: 600; line-height: 1.15; letter-spacing: 0; } [dir='rtl'] .service-name { font-weight: 600; line-height: 1.2; } [dir='rtl'] .step-title { font-weight: 600; } [dir='rtl'] .price-name { font-weight: 600; line-height: 1.15; } [dir='rtl'] .test-quote { font-weight: 500; line-height: 1.5; } [dir='rtl'] .faq-q-text { font-weight: 600; line-height: 1.3; } [dir='rtl'] .cta-title { font-weight: 600; line-height: 1.15; } /* Eyebrow labels in Arabic — drop the mono font and uppercase */ [dir='rtl'] .hero-eyebrow, [dir='rtl'] .section-eyebrow, [dir='rtl'] .stat-label, [dir='rtl'] .step-num, [dir='rtl'] .price-tier, [dir='rtl'] .clients-eyebrow, [dir='rtl'] .cta-eyebrow, [dir='rtl'] .announce, [dir='rtl'] .service-num, [dir='rtl'] .price-popular, [dir='rtl'] .service-badge, [dir='rtl'] .test-name, [dir='rtl'] .footer-col h4, [dir='rtl'] .footer-bottom, [dir='rtl'] .footer-contact { font-family: 'Tajawal', sans-serif; letter-spacing: 0; text-transform: none; font-size: 13px; } [dir='rtl'] .hero-eyebrow, [dir='rtl'] .section-eyebrow, [dir='rtl'] .cta-eyebrow { font-size: 14px; font-weight: 500; } [dir='rtl'] .clients-eyebrow, [dir='rtl'] .stat-label, [dir='rtl'] .price-tier { font-size: 13px; font-weight: 500; } [dir='rtl'] .step-num { font-size: 14px; font-weight: 500; } [dir='rtl'] .test-name { font-size: 14px; font-weight: 700; } [dir='rtl'] .footer-col h4 { font-size: 13px; font-weight: 700; } [dir='rtl'] .footer-bottom { font-size: 13px; } [dir='rtl'] .footer-contact { font-size: 13px; } /* Numbers should stay LTR — Arabic-Indic numerals chosen via lang attr but keep paragraph alignment correct */ [dir='rtl'] .stat-num, [dir='rtl'] .step-illus { direction: ltr; text-align: right; } /* Sizes a touch larger for Arabic body since Arabic letterforms need more space */ [dir='rtl'] .hero-sub { font-size: 20px; line-height: 1.85; } [dir='rtl'] .section-lead { font-size: 18px; line-height: 1.85; } [dir='rtl'] .service-desc { font-size: 15px; line-height: 1.75; } [dir='rtl'] .step-desc { font-size: 15px; line-height: 1.8; } [dir='rtl'] .price-desc { font-size: 15px; line-height: 1.8; } [dir='rtl'] .price-features li { font-size: 15px; line-height: 1.6; } [dir='rtl'] .faq-a { font-size: 16px; line-height: 1.95; padding-right: 0; padding-left: 60px; } [dir='rtl'] .footer-tag { font-size: 16px; line-height: 1.85; font-family: 'Tajawal', sans-serif; } [dir='rtl'] .footer-col a { font-size: 15px; } [dir='rtl'] .stat-desc { font-size: 14px; line-height: 1.7; max-width: 220px; } [dir='rtl'] .marquee-item { font-weight: 500; } /* Button text size for Arabic */ [dir='rtl'] .btn-primary { font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; } [dir='rtl'] .btn-link { font-size: 13px; letter-spacing: 0.05em; text-transform: none; font-family: 'JetBrains Mono', monospace; } [dir='rtl'] .nav-cta { font-size: 14px; font-weight: 500; } [dir='rtl'] .cta-btn { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; } [dir='rtl'] .price-cta { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; } /* Flip arrows to point in the correct visual direction for RTL */ [dir='rtl'] .btn-primary i, [dir='rtl'] .nav-cta i, [dir='rtl'] .cta-btn i, [dir='rtl'] .nav-phone i { transform: scaleX(-1); } [dir='rtl'] .btn-primary:hover i { transform: scaleX(-1) translateX(-4px); } [dir='rtl'] .cta-btn:hover i { transform: scaleX(-1) translateX(-4px); } /* Service card arrow — flip for RTL */ [dir='rtl'] .service-arrow i { transform: scaleX(-1); } [dir='rtl'] .service:hover .service-arrow { transform: rotate(45deg); } /* Border direction swaps */ [dir='rtl'] .service:nth-child(odd) { border-right: none; border-left: 1px solid var(--line); } [dir='rtl'] .client-cell { border-right: none; border-left: 1px solid var(--line); } [dir='rtl'] .client-cell:last-child { border-left: none; } /* Ticker direction reverse */ [dir='rtl'] .marquee-track { animation: scroll-rtl 22s linear infinite; } @keyframes scroll-rtl { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Service badge — move to left in RTL */ [dir='rtl'] .service-badge { right: auto; left: 24px; } /* Pricing popular badge — move to right in RTL */ [dir='rtl'] .price-popular { left: auto; right: 40px; } /* Select dropdowns in Arabic — arrow positions */ [dir='rtl'] .step-illus { text-align: left; } /* Eyebrow line direction */ [dir='rtl'] .hero-eyebrow::before, [dir='rtl'] .section-eyebrow::before { /* line stays on the start of the text (right side in RTL) */ } /* Hero rotate alignment */ [dir='rtl'] .rotate-track span { font-weight: 700; } /* CTA banner gradient blobs — keep them positioned but mirror */ [dir='rtl'] .cta-banner::before { left: auto; right: 0; transform: translate(30%, -30%); } [dir='rtl'] .cta-banner::after { right: auto; left: 0; transform: translate(-30%, 30%); } /* Footer brand logo in RTL — flex direction stays the same since logo is image-based */ /* Mobile RTL fixes */ @media (max-width: 540px) { [dir='rtl'] .service-arrow { justify-self: start; } [dir='rtl'] .client-cell:nth-child(3), [dir='rtl'] .client-cell:nth-child(5), [dir='rtl'] .client-cell:nth-child(7) { border-right: none; border-left: none; } } /* =================================================================== ABOUT PAGE COMPONENTS =================================================================== */ /* ============== PAGE HERO (reused on other inner pages) ============== */ .page-hero { padding: 90px 0 80px; border-bottom: 1px solid var(--line); } .page-hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.32em; color: var(--base-deep); text-transform: uppercase; margin-bottom: 32px; display: flex; align-items: center; gap: 14px; } .page-hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--base); } .page-hero-title { font-family: 'Fraunces', serif; font-size: clamp(52px, 7.4vw, 116px); font-weight: 300; line-height: 0.95; letter-spacing: -0.035em; color: var(--ink); margin-bottom: 64px; max-width: 1100px; } .page-hero-title em { font-style: italic; font-weight: 400; color: var(--warm); } .page-hero-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; border-top: 1px solid var(--line); padding-top: 36px; } .meta-item { display: flex; flex-direction: column; gap: 8px; } .meta-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--ink-3); text-transform: uppercase; } .meta-value { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; } /* ============== STUDIO STORY ============== */ .studio-story { padding: 120px 0; } .story-grid { display: grid; grid-template-columns: 1fr 2.2fr; gap: 80px; align-items: start; } .story-side { position: sticky; top: 120px; } .story-lead { font-family: 'Fraunces', serif; font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 40px; } .story-lead em { font-style: italic; color: var(--warm); font-weight: 400; } .story-body { font-size: 17px; line-height: 1.8; color: var(--ink-2); font-weight: 300; margin-bottom: 20px; max-width: 680px; } .story-body:last-child { margin-bottom: 0; } /* ============== FOUNDER'S NOTE ============== */ .founders-note { padding: 120px 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.3s ease; } .note-head { max-width: 980px; margin-bottom: 64px; } .note-head .section-title { margin-top: 24px; } .note-body { max-width: 760px; } .note-para { font-family: 'Fraunces', serif; font-size: clamp(20px, 2vw, 26px); font-weight: 300; line-height: 1.55; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 28px; } .note-para em { font-style: italic; color: var(--warm); font-weight: 400; } .note-sign { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); } .sign-name { font-family: 'Fraunces', serif; font-style: italic; font-size: 34px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 4px; } .sign-role { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; color: var(--ink-3); text-transform: uppercase; } /* ============== PRINCIPLES ============== */ .principles { padding: 140px 0; } .principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); margin-top: 24px; } .principle { padding: 56px 40px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; transition: background 0.3s ease; } .principle:nth-child(odd) { border-right: 1px solid var(--line); } .principle:hover { background: var(--bg-2); } .principle-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-4); letter-spacing: 0.1em; padding-top: 6px; } .principle-name { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 400; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 14px; line-height: 1.2; } .principle-name em { font-style: italic; color: var(--warm); } .principle-desc { font-size: 15px; color: var(--ink-3); line-height: 1.75; font-weight: 300; max-width: 480px; } /* ============== CAPABILITIES ============== */ .capabilities { padding: 140px 0; background: var(--bg-2); transition: background 0.3s ease; } .cap-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 64px; } .cap-head .section-title { margin-top: 24px; } .cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); } .cap-item { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 28px 32px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: all 0.25s ease; } .cap-item:nth-child(odd) { border-right: 1px solid var(--line); } .cap-item:hover { background: var(--bg); padding-left: 40px; } [dir='rtl'] .cap-item:hover { padding-left: 32px; padding-right: 40px; } .cap-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-4); letter-spacing: 0.1em; } .cap-name { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); } .cap-arrow { font-size: 18px; color: var(--ink-3); transition: all 0.25s ease; } .cap-item:hover .cap-arrow { color: var(--warm); transform: rotate(-45deg); } .cap-footer { margin-top: 56px; display: flex; justify-content: center; } /* ============== CURRENTLY WORKING ON ============== */ .now-building { padding: 140px 0; } .now-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; } .now-side { position: sticky; top: 120px; } .now-side .section-title { margin-top: 24px; margin-bottom: 24px; } .now-list { border-top: 1px solid var(--line); } .now-item { display: grid; grid-template-columns: auto 1fr; gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--line); align-items: start; } .now-marker { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 300; color: var(--base); line-height: 1; padding-top: 4px; } .now-content { display: flex; flex-direction: column; gap: 8px; } .now-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--ink-3); text-transform: uppercase; } .now-text { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 300; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); max-width: 560px; } /* ============== ACTIVE NAV STATE ============== */ .nav-links a.active { color: var(--ink); font-weight: 500; } .nav-links a.active::after { content: ''; display: block; width: 16px; height: 1px; background: var(--warm); margin-top: 4px; margin-left: auto; margin-right: auto; } /* ============== RESPONSIVE — ABOUT PAGE ============== */ @media (max-width: 1000px) { .page-hero { padding: 60px 0 56px; } .page-hero-meta { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } .story-grid { grid-template-columns: 1fr; gap: 32px; } .story-side { position: static; } .principles-grid { grid-template-columns: 1fr; } .principle:nth-child(odd) { border-right: none; } [dir='rtl'] .principle:nth-child(odd) { border-left: none; } .cap-head { grid-template-columns: 1fr; gap: 24px; } .cap-grid { grid-template-columns: 1fr; } .cap-item:nth-child(odd) { border-right: none; } [dir='rtl'] .cap-item:nth-child(odd) { border-left: none; } .now-grid { grid-template-columns: 1fr; gap: 48px; } .now-side { position: static; } } @media (max-width: 540px) { .studio-story { padding: 80px 0; } .founders-note { padding: 80px 0; } .principles { padding: 80px 0; } .principle { padding: 36px 24px; grid-template-columns: 1fr; gap: 16px; } .capabilities { padding: 80px 0; } .cap-item { padding: 24px; } .cap-name { font-size: 18px; } .now-building { padding: 80px 0; } .now-text { font-size: 17px; } .note-para { font-size: 19px; } .sign-name { font-size: 28px; } .page-hero-meta { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .meta-value { font-size: 18px; } } /* ============== RTL OVERRIDES — ABOUT PAGE ============== */ /* Page hero eyebrow line stays at start side via flex-direction inheritance */ /* Principle borders flip */ [dir='rtl'] .principle:nth-child(odd) { border-right: none; border-left: 1px solid var(--line); } /* Capabilities item borders flip */ [dir='rtl'] .cap-item:nth-child(odd) { border-right: none; border-left: 1px solid var(--line); } [dir='rtl'] .cap-item .cap-arrow { transform: scaleX(-1); } [dir='rtl'] .cap-item:hover .cap-arrow { transform: scaleX(-1) rotate(45deg); } /* Arabic typography for new about-page elements */ [dir='rtl'] .page-hero-title, [dir='rtl'] .story-lead, [dir='rtl'] .note-para, [dir='rtl'] .sign-name, [dir='rtl'] .principle-name, [dir='rtl'] .cap-name, [dir='rtl'] .now-text, [dir='rtl'] .meta-value { font-family: 'Reem Kufi', serif; } /* Italic emphasis becomes weight emphasis in Arabic */ [dir='rtl'] .page-hero-title em, [dir='rtl'] .story-lead em, [dir='rtl'] .note-para em, [dir='rtl'] .principle-name em { font-style: normal; font-weight: 700; color: var(--warm); } /* Arabic weight adjustments */ [dir='rtl'] .page-hero-title { font-weight: 600; line-height: 1.1; letter-spacing: 0; } [dir='rtl'] .story-lead { font-weight: 500; line-height: 1.5; } [dir='rtl'] .note-para { font-weight: 400; line-height: 1.7; } [dir='rtl'] .principle-name { font-weight: 600; line-height: 1.35; } [dir='rtl'] .cap-name { font-weight: 600; } [dir='rtl'] .now-text { font-weight: 500; line-height: 1.6; } /* Sign-name in Arabic — use Reem Kufi with weight, no italic */ [dir='rtl'] .sign-name { font-style: normal; font-weight: 700; font-size: 30px; } /* Mono labels in Arabic become Tajawal */ [dir='rtl'] .meta-label, [dir='rtl'] .sign-role, [dir='rtl'] .principle-num, [dir='rtl'] .cap-num, [dir='rtl'] .now-label, [dir='rtl'] .page-hero-eyebrow { font-family: 'Tajawal', sans-serif; letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 13px; } [dir='rtl'] .page-hero-eyebrow { font-size: 14px; } /* Body text in Arabic */ [dir='rtl'] .story-body { font-size: 18px; line-height: 1.95; font-family: 'Tajawal', sans-serif; } [dir='rtl'] .principle-desc { font-size: 16px; line-height: 1.85; font-family: 'Tajawal', sans-serif; } /* Numbers in Arabic stay readable — keep direction */ [dir='rtl'] .principle-num, [dir='rtl'] .cap-num { direction: rtl; } /* now-marker arrow flip */ [dir='rtl'] .now-marker { transform: scaleX(-1); display: inline-block; } /* =================================================================== SERVICES PAGE COMPONENTS =================================================================== */ /* ============== SERVICES INTRO ============== */ .services-intro { padding: 120px 0; } .intro-grid { display: grid; grid-template-columns: 1fr 2.2fr; gap: 80px; align-items: start; } .intro-side { position: sticky; top: 120px; } .intro-lead { font-family: 'Fraunces', serif; font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 56px; } .intro-lead em { font-style: italic; color: var(--warm); font-weight: 400; } .intro-points { display: grid; gap: 36px; border-top: 1px solid var(--line); padding-top: 40px; } .intro-point { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; } .intro-point-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--base-deep); letter-spacing: 0.12em; padding-top: 6px; } .intro-point-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; line-height: 1.3; } .intro-point-desc { font-size: 15px; color: var(--ink-3); line-height: 1.7; font-weight: 300; max-width: 540px; } /* ============== SERVICES DETAIL GRID ============== */ .services-detail { padding: 60px 0 140px; background: var(--bg-2); transition: background 0.3s ease; } .services-detail .container { border-top: 1px solid var(--line); } .service-detail { display: grid; grid-template-columns: 220px 1fr; gap: 60px; padding: 64px 0; border-bottom: 1px solid var(--line); position: relative; align-items: start; } .sd-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 24px; grid-column: 1; grid-row: 1; } .sd-icon { grid-column: 1; grid-row: 2; width: 80px; height: 80px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--ink); background: var(--bg); transition: all 0.3s ease; } .service-detail:hover .sd-icon { background: var(--ink); color: var(--bg); border-color: var(--ink); } .sd-body { grid-column: 2; grid-row: 1 / span 2; } .sd-name { font-family: 'Fraunces', serif; font-size: clamp(36px, 4.4vw, 56px); font-weight: 300; letter-spacing: -0.025em; line-height: 1; color: var(--ink); margin-bottom: 20px; } .sd-name em { font-style: italic; color: var(--warm); font-weight: 400; } .sd-lead { font-size: 18px; line-height: 1.7; color: var(--ink-2); font-weight: 300; margin-bottom: 32px; max-width: 640px; } .sd-deliverables { list-style: none; padding: 0; margin: 0 0 36px; display: grid; gap: 14px; max-width: 640px; } .sd-deliverables li { font-size: 15px; color: var(--ink-2); line-height: 1.6; display: flex; align-items: flex-start; gap: 12px; font-weight: 300; } .sd-deliverables li i { color: var(--base); font-size: 18px; margin-top: 1px; flex-shrink: 0; } .sd-link { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 6px; transition: all 0.2s; } .sd-link:hover { color: var(--warm); border-bottom-color: var(--warm); gap: 14px; } .sd-link i { font-size: 16px; } .service-detail.popular .sd-icon { background: var(--warm); color: #fbfaf7; border-color: var(--warm); } .service-detail.popular:hover .sd-icon { background: var(--ink); color: var(--bg); border-color: var(--ink); } .sd-badge { position: absolute; top: 64px; right: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; background: var(--warm); color: #fbfaf7; padding: 6px 14px; border-radius: 99px; letter-spacing: 0.16em; text-transform: uppercase; } /* ============== BUNDLE HINT ============== */ .bundle-hint { padding: 140px 0; } .bundle-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } .bundle-side { position: sticky; top: 120px; } .bundle-side .section-title { margin-top: 24px; margin-bottom: 24px; } .bundle-list { display: grid; gap: 0; border-top: 1px solid var(--line); } .bundle-item { padding: 32px 0; border-bottom: 1px solid var(--line); display: grid; gap: 12px; } .bundle-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--base-deep); } .bundle-text { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 300; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); max-width: 560px; } .bundle-cta { padding-top: 36px; display: flex; justify-content: flex-start; } /* ============== RESPONSIVE — SERVICES PAGE ============== */ @media (max-width: 1000px) { .intro-grid { grid-template-columns: 1fr; gap: 32px; } .intro-side { position: static; } .service-detail { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; } .sd-num { grid-column: 1; grid-row: 1; margin-bottom: 0; } .sd-icon { grid-column: 1; grid-row: 2; width: 64px; height: 64px; font-size: 26px; } .sd-body { grid-column: 1; grid-row: 3; } .sd-badge { top: 48px; } .bundle-grid { grid-template-columns: 1fr; gap: 48px; } .bundle-side { position: static; } } @media (max-width: 540px) { .services-intro { padding: 80px 0; } .services-detail { padding: 40px 0 80px; } .service-detail { padding: 40px 0; gap: 24px; } .bundle-hint { padding: 80px 0; } .bundle-text { font-size: 19px; } .intro-point { gap: 16px; } .sd-deliverables li { font-size: 14px; } } /* ============== RTL OVERRIDES — SERVICES PAGE ============== */ [dir='rtl'] .sd-badge { right: auto; left: 0; } [dir='rtl'] .sd-link i { transform: scaleX(-1); } [dir='rtl'] .sd-link:hover i { transform: scaleX(-1); } /* Arabic typography for services-page elements */ [dir='rtl'] .intro-lead, [dir='rtl'] .intro-point-title, [dir='rtl'] .sd-name, [dir='rtl'] .bundle-text { font-family: 'Reem Kufi', serif; } /* Italic emphasis becomes weight emphasis in Arabic */ [dir='rtl'] .intro-lead em, [dir='rtl'] .sd-name em { font-style: normal; font-weight: 700; color: var(--warm); } /* Arabic weight adjustments */ [dir='rtl'] .intro-lead { font-weight: 500; line-height: 1.5; letter-spacing: 0; } [dir='rtl'] .intro-point-title { font-weight: 600; line-height: 1.35; } [dir='rtl'] .sd-name { font-weight: 600; line-height: 1.15; letter-spacing: 0; } [dir='rtl'] .bundle-text { font-weight: 500; line-height: 1.55; } /* Mono labels become Tajawal in Arabic */ [dir='rtl'] .sd-num, [dir='rtl'] .intro-point-num, [dir='rtl'] .sd-badge, [dir='rtl'] .bundle-tag, [dir='rtl'] .sd-link { font-family: 'Tajawal', sans-serif; letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 13px; } [dir='rtl'] .sd-link { font-size: 13px; font-weight: 700; } [dir='rtl'] .sd-badge { font-size: 11px; font-weight: 700; } /* Body text in Arabic — Tajawal for readability */ [dir='rtl'] .intro-point-desc, [dir='rtl'] .sd-lead, [dir='rtl'] .sd-deliverables li { font-family: 'Tajawal', sans-serif; } [dir='rtl'] .sd-lead { font-size: 19px; line-height: 1.85; } [dir='rtl'] .sd-deliverables li { font-size: 16px; line-height: 1.7; } [dir='rtl'] .intro-point-desc { font-size: 16px; line-height: 1.85; } /* =================================================================== CASES PAGE COMPONENTS =================================================================== */ /* ============== CASES INTRO ============== */ .cases-intro { padding: 100px 0 60px; } .cases-intro-grid { display: grid; grid-template-columns: 1fr 2.2fr; gap: 80px; align-items: start; } .cases-intro-lead { font-family: 'Fraunces', serif; font-size: clamp(26px, 3.2vw, 40px); font-weight: 300; line-height: 1.3; letter-spacing: -0.018em; color: var(--ink); max-width: 880px; } .cases-intro-lead em { font-style: italic; color: var(--warm); font-weight: 400; } /* ============== FILTER BAR ============== */ .cases-gallery { padding: 40px 0 140px; } .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px; padding-bottom: 36px; border-bottom: 1px solid var(--line); } .filter-chip { background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); padding: 11px 20px; border-radius: 99px; font-family: 'Inter Tight', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; } .filter-chip:hover { border-color: var(--ink); color: var(--ink); background: var(--bg-2); } .filter-chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); } [data-theme='dark'] .filter-chip.is-active { background: var(--base); color: var(--bg-dark); border-color: var(--base); } .chip-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; opacity: 0.6; } /* ============== CASES GRID ============== */ .cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 32px; } .case-card { display: block; transition: opacity 0.3s ease; } .case-link { display: block; text-decoration: none; color: inherit; } .case-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 24px; transition: all 0.3s ease; } .case-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s ease; } .case-link:hover .case-image { border-color: var(--ink-3); } .case-link:hover .case-image img { transform: scale(1.03); } .case-external { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--ink); transition: all 0.3s ease; z-index: 2; } .case-link:hover .case-external { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: rotate(-45deg); } .case-meta { display: flex; flex-direction: column; gap: 12px; } .case-top { display: flex; align-items: center; gap: 14px; } .case-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-4); letter-spacing: 0.16em; } .case-industry { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--base-deep); letter-spacing: 0.16em; text-transform: uppercase; padding-left: 14px; border-left: 1px solid var(--line-2); } [dir='rtl'] .case-industry { padding-left: 0; padding-right: 14px; border-left: none; border-right: 1px solid var(--line-2); } .case-name { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.1; color: var(--ink); margin: 4px 0 6px; } .case-desc { font-size: 15px; color: var(--ink-2); line-height: 1.65; font-weight: 300; max-width: 560px; } .case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .case-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--bg); transition: all 0.2s; } .case-link:hover .case-tag { border-color: var(--ink-3); } /* ============== EMPTY STATE ============== */ .cases-empty { padding: 80px 24px; text-align: center; border: 1px dashed var(--line-2); border-radius: 14px; background: var(--bg-2); } .cases-empty p { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 300; color: var(--ink-2); line-height: 1.5; max-width: 540px; margin: 0 auto; } .cases-empty a { color: var(--warm); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ============== RESPONSIVE ============== */ @media (max-width: 1000px) { .cases-intro-grid { grid-template-columns: 1fr; gap: 32px; } .cases-grid { grid-template-columns: 1fr; gap: 40px; } .filter-bar { margin-bottom: 40px; padding-bottom: 24px; } } @media (max-width: 540px) { .cases-intro { padding: 60px 0 40px; } .cases-gallery { padding: 20px 0 80px; } .filter-chip { padding: 9px 16px; font-size: 12px; } .case-image { border-radius: 10px; } .case-external { width: 34px; height: 34px; top: 12px; right: 12px; font-size: 16px; } .case-name { font-size: 24px; } .case-tag { font-size: 9px; padding: 4px 9px; } } /* ============== RTL OVERRIDES — CASES PAGE ============== */ [dir='rtl'] .case-external { right: auto; left: 16px; } @media (max-width: 540px) { [dir='rtl'] .case-external { left: 12px; } } [dir='rtl'] .case-external i { transform: scaleX(-1); } [dir='rtl'] .case-link:hover .case-external { transform: rotate(45deg); } [dir='rtl'] .case-link:hover .case-external i { transform: scaleX(-1); } /* Arabic typography for cases-page elements */ [dir='rtl'] .cases-intro-lead, [dir='rtl'] .case-name, [dir='rtl'] .cases-empty p { font-family: 'Reem Kufi', serif; } /* Italic emphasis becomes weight emphasis in Arabic */ [dir='rtl'] .cases-intro-lead em { font-style: normal; font-weight: 700; color: var(--warm); } /* Arabic weight adjustments */ [dir='rtl'] .cases-intro-lead { font-weight: 500; line-height: 1.6; letter-spacing: 0; } [dir='rtl'] .case-name { font-weight: 600; line-height: 1.25; } [dir='rtl'] .cases-empty p { font-weight: 500; line-height: 1.65; } /* Mono labels become Tajawal in Arabic */ [dir='rtl'] .case-num, [dir='rtl'] .case-industry, [dir='rtl'] .case-tag, [dir='rtl'] .chip-count { font-family: 'Tajawal', sans-serif; letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 11px; } [dir='rtl'] .case-industry { font-size: 12px; font-weight: 700; } [dir='rtl'] .case-tag { font-size: 11px; font-weight: 600; } /* Filter chips in Arabic */ [dir='rtl'] .filter-chip { font-family: 'Tajawal', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; } /* Body text in Arabic */ [dir='rtl'] .case-desc { font-family: 'Tajawal', sans-serif; font-size: 16px; line-height: 1.8; } /* =================================================================== CONTACT PAGE COMPONENTS =================================================================== */ /* ============== CONTACT MAIN (FORM + DETAILS) ============== */ .contact-main { padding: 100px 0 120px; } .contact-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 80px; align-items: start; } /* ============== FORM WRAPPER ============== */ .contact-form-wrap { min-width: 0; } .contact-form-title { font-family: 'Fraunces', serif; font-size: clamp(40px, 5vw, 64px); font-weight: 300; line-height: 1; letter-spacing: -0.025em; color: var(--ink); margin: 24px 0 24px; } .contact-form-title em { font-style: italic; color: var(--warm); font-weight: 400; } .contact-form-lead { font-size: 17px; line-height: 1.7; color: var(--ink-2); font-weight: 300; max-width: 620px; margin-bottom: 56px; } /* ============== FORM ============== */ .webelle-form { display: grid; gap: 28px; } .hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .form-row { display: grid; gap: 24px; } .form-row-two { grid-template-columns: 1fr 1fr; } .form-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .form-field label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 6px; } .req { color: var(--warm); font-size: 13px; } .opt { color: var(--ink-4); font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 11px; } .form-field input[type='text'], .form-field input[type='email'], .form-field input[type='tel'], .form-field textarea, .form-field select { font-family: 'Inter Tight', sans-serif; font-size: 16px; font-weight: 400; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 14px 0; outline: none; width: 100%; transition: border-color 0.2s ease; -webkit-appearance: none; appearance: none; } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-4); font-weight: 300; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-bottom-color: var(--warm); } .form-field textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .select-wrap { position: relative; } .select-wrap select { padding-right: 32px; cursor: pointer; } .select-wrap i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--ink-3); pointer-events: none; } .form-foot { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); } .form-privacy { font-size: 13px; color: var(--ink-3); line-height: 1.55; font-weight: 300; max-width: 460px; margin: 0; } .form-submit { background: var(--ink); color: var(--bg); padding: 18px 38px; border: none; font-family: 'Inter Tight', sans-serif; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border-radius: 99px; font-weight: 500; display: inline-flex; align-items: center; gap: 12px; transition: all 0.3s ease; } .form-submit:hover { background: var(--warm); transform: translateY(-2px); } .form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .form-submit i { font-size: 16px; transition: transform 0.3s; } .form-submit:hover i { transform: translateX(4px); } .form-results { padding: 20px 24px; border-radius: 12px; font-size: 15px; line-height: 1.6; font-weight: 300; } .form-results strong { font-weight: 500; display: inline; } .form-results-success { background: color-mix(in srgb, var(--base) 12%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--base) 35%, transparent); } .form-results-error { background: color-mix(in srgb, var(--warm) 10%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warm) 35%, transparent); } /* ============== CONTACT SIDE (STUDIO DETAILS) ============== */ .contact-side { position: sticky; top: 120px; } .contact-side-inner { display: grid; gap: 32px; padding: 36px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; transition: background 0.3s ease; } .contact-block { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .contact-block:last-child { padding-bottom: 0; border-bottom: none; } .contact-block-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .contact-block-link { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 400; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: all 0.2s; width: max-content; max-width: 100%; word-break: break-word; line-height: 1.3; } .contact-block-link:hover { color: var(--warm); border-bottom-color: var(--warm); } .contact-block-text { font-size: 15px; color: var(--ink-2); line-height: 1.65; font-weight: 300; margin: 0; } .contact-block-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .contact-block-text a:hover { color: var(--warm); } .contact-socials { display: flex; gap: 14px; margin-top: 4px; } .contact-socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 16px; text-decoration: none; transition: all 0.2s; } .contact-socials a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .contact-careers { background: transparent; } /* ============== WHAT TO EXPECT ============== */ .what-to-expect { padding: 120px 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.3s ease; } .expect-head { max-width: 720px; margin-bottom: 64px; } .expect-head .section-title { margin-top: 24px; } .expect-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); } .expect-step { padding: 48px 32px 48px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; position: relative; } .expect-step:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--line); } [dir='rtl'] .expect-step { padding: 48px 0 48px 32px; } [dir='rtl'] .expect-step:not(:last-child)::after { right: auto; left: 0; } .expect-step:not(:first-child) { padding-left: 32px; } [dir='rtl'] .expect-step:not(:first-child) { padding-left: 0; padding-right: 32px; } .expect-num { font-family: 'Fraunces', serif; font-style: italic; font-size: 32px; font-weight: 400; color: var(--warm); line-height: 1; padding-top: 4px; } .expect-title { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); margin-bottom: 12px; } .expect-desc { font-size: 15px; color: var(--ink-3); line-height: 1.7; font-weight: 300; } /* ============== CONTACT FAQ ============== */ .contact-faq { padding: 140px 0; } .contact-faq .section-title { margin-top: 24px; } .contact-faq .section-lead { margin-top: 24px; } /* ============== RESPONSIVE ============== */ @media (max-width: 1100px) { .contact-grid { grid-template-columns: 1fr; gap: 56px; } .contact-side { position: static; } .expect-steps { grid-template-columns: 1fr; } .expect-step { padding: 32px 0 !important; } .expect-step:not(:last-child)::after { display: none; } } @media (max-width: 700px) { .contact-main { padding: 60px 0 80px; } .form-row-two { grid-template-columns: 1fr; } .form-foot { grid-template-columns: 1fr; gap: 24px; } .form-submit { width: 100%; justify-content: center; padding: 16px 28px; } .contact-side-inner { padding: 28px 24px; } .what-to-expect { padding: 80px 0; } .contact-faq { padding: 80px 0; } .contact-block-link { font-size: 16px; } } /* ============== RTL OVERRIDES — CONTACT PAGE ============== */ /* Select chevron position */ [dir='rtl'] .select-wrap select { padding-right: 0; padding-left: 32px; } [dir='rtl'] .select-wrap i { right: auto; left: 0; } /* Form labels — Tajawal for Arabic */ [dir='rtl'] .form-field label, [dir='rtl'] .contact-block-label { font-family: 'Tajawal', sans-serif; letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 500; } [dir='rtl'] .opt { font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 400; } /* Form inputs — keep Tajawal so Arabic text renders well */ [dir='rtl'] .form-field input[type='text'], [dir='rtl'] .form-field textarea, [dir='rtl'] .form-field select { font-family: 'Tajawal', sans-serif; font-size: 17px; } /* Email/phone inputs stay LTR via inline dir attribute */ [dir='rtl'] .form-field input[type='email'], [dir='rtl'] .form-field input[type='tel'] { font-family: 'Inter Tight', sans-serif; } /* Submit button arrow flip */ [dir='rtl'] .form-submit i { transform: scaleX(-1); } [dir='rtl'] .form-submit:hover i { transform: scaleX(-1) translateX(-4px); } /* Submit button — Arabic styling */ [dir='rtl'] .form-submit { font-family: 'Tajawal', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; } /* Privacy text */ [dir='rtl'] .form-privacy { font-family: 'Tajawal', sans-serif; font-size: 14px; line-height: 1.7; } /* Contact form title + lead */ [dir='rtl'] .contact-form-title, [dir='rtl'] .contact-block-link, [dir='rtl'] .expect-title { font-family: 'Reem Kufi', serif; } [dir='rtl'] .contact-form-title em, [dir='rtl'] .expect-title em { font-style: normal; font-weight: 700; color: var(--warm); } [dir='rtl'] .contact-form-title { font-weight: 600; line-height: 1.1; letter-spacing: 0; } [dir='rtl'] .expect-title { font-weight: 600; line-height: 1.35; } /* Lead/body text */ [dir='rtl'] .contact-form-lead, [dir='rtl'] .contact-block-text, [dir='rtl'] .expect-desc { font-family: 'Tajawal', sans-serif; } [dir='rtl'] .contact-form-lead { font-size: 18px; line-height: 1.85; } [dir='rtl'] .contact-block-text { font-size: 16px; line-height: 1.8; } [dir='rtl'] .expect-desc { font-size: 16px; line-height: 1.85; } /* Contact block link (email/phone) — Arabic weight */ [dir='rtl'] .contact-block-link { font-weight: 600; } /* Expect num — keep italic look via warm color and weight */ [dir='rtl'] .expect-num { font-style: normal; font-weight: 700; font-family: 'Tajawal', sans-serif; font-size: 28px; } /* Form results — Arabic typography */ [dir='rtl'] .form-results { font-family: 'Tajawal', sans-serif; font-size: 16px; line-height: 1.75; } /* req asterisk */ [dir='rtl'] .req { font-family: 'Inter Tight', sans-serif; }