/* ============================================================ DAGAZ — DESIGN TOKENS · v2.0 (3B Rune — Daybreak) Approved 2026-07-10 · implement as-is Fonts (load in ): ============================================================ */ :root { /* ---- color ---- */ --dz-ink: #17150F; /* text, emphasis surfaces */ --dz-bone: #F5F1E8; /* default field */ --dz-daybreak: #C9781F; /* THE accent: mark crossing, key CTAs, indices. Scarce on purpose */ --dz-daybreak-text: #A76112; /* accent text on bone (plain daybreak fails small-text contrast) */ --dz-daybreak-soft: #DA9E4F; /* accent labels on ink */ --dz-umber: #3A362B; /* secondary text on bone */ --dz-umber-soft: #7A7261; /* muted mono labels on bone */ --dz-haze: #E9E2D2; /* panels, placeholders */ --dz-card: #FAF7EF; /* elevated cards on bone */ --dz-open: #1A7A4A; /* functional ONLY: WhatsApp, "open now", positive deltas */ --dz-line: rgba(23,21,15,.13); /* hairline on bone */ --dz-line-inv: rgba(245,241,232,.16); /* hairline on ink */ /* ---- type ---- */ --dz-font-display: 'Archivo', sans-serif; /* wdth 115–125 · 700 · ALWAYS uppercase */ --dz-font-body: 'Archivo', sans-serif; /* wdth 100 · 400/500 · sentence case */ --dz-font-mono: 'IBM Plex Mono', monospace; /* labels, indices, ALL numbers */ --dz-font-arabic: 'Noto Kufi Arabic', sans-serif; /* 500–700 */ /* display scale (desktop) */ --dz-d0: 700 96px/0.98 var(--dz-font-display); /* hero, wdth 122 */ --dz-d1: 700 76px/1.02 var(--dz-font-display); /* page titles, wdth 120 */ --dz-d2: 700 52px/1.06 var(--dz-font-display); /* section titles, wdth 118 */ --dz-d3: 700 26px/1.2 var(--dz-font-display); /* card titles, wdth 115 */ --dz-body: 400 17px/1.64 var(--dz-font-body); --dz-label: 500 11px/1 var(--dz-font-mono); /* letter-spacing .16–.2em, uppercase */ /* ---- space (base 4) ---- */ --dz-s1: 8px; --dz-s2: 16px; --dz-s3: 24px; --dz-s4: 40px; --dz-s5: 64px; --dz-s6: 96px; --dz-s7: 160px; /* ---- geometry ---- */ --dz-radius: 0; /* squared is the default posture */ --dz-radius-chip: 4px; /* small chips only */ --dz-radius-icon: 14px; /* app icon tile: r = w/4.5 */ --dz-content-max: 1320px; /* site container (guide artifacts use 1160) */ --dz-gutter: 48px; /* ---- motion ---- */ --dz-ease: cubic-bezier(.16,1,.3,1); /* everything eases out, expensive */ --dz-ease-draw: cubic-bezier(.7,0,.2,1); --dz-dur: 200ms; /* hovers */ --dz-dur-reveal: 1000ms; /* scroll reveals */ --dz-dur-enter: 900ms; /* hero entrance */ /* ---- shadow (cards only) ---- */ --dz-shadow-card: 0 18px 40px -26px rgba(23,21,15,.5); } /* ---- mark construction ---- Square canvas. Stroke = H/11. Crossing (diagonals, corner to corner): var(--dz-daybreak) — drawn FIRST. Stems (verticals at margins): ink on light ground, bone on dark — drawn OVER. Counters always stay the background color. Never fill, rotate, outline, or recolor. */ /* Dagaz production — layout chrome, interactions, responsive, a11y */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--dz-ink); color: var(--dz-bone); font: var(--dz-body); font-family: var(--dz-font-body); font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--dz-daybreak-text); } a:hover { color: #8a4f0e; } ::selection { background: var(--dz-daybreak); color: var(--dz-ink); } button { font: inherit; } [hidden] { display: none !important; } /* Language: hide inactive */ html[data-lang="en"] [data-lang="ar"] { display: none !important; } html[data-lang="ar"] [data-lang="en"] { display: none !important; } html[data-lang="ar"] { --lang-en-color: rgba(245,241,232,.55); --lang-ar-color: #DA9E4F; } html[data-lang="en"] { --lang-en-color: #DA9E4F; --lang-ar-color: rgba(245,241,232,.55); } /* Keyframes from reference */ @keyframes dzUp { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } } @keyframes dzDraw { to { stroke-dashoffset: 0; } } @keyframes dzMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes dzFloat { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } } @keyframes dzBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes dzBeforeMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Sticky WA */ .dz-sticky-wa, #dz-sticky-wa { transition: opacity .4s ease, transform .5s var(--dz-ease); } .dz-sticky-wa.is-on, #dz-sticky-wa.is-on { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } /* FAQ */ .dz-faq-btn:focus-visible { outline: 2px solid var(--dz-daybreak); outline-offset: 2px; } /* Flip demo row — no transitions on mode-driven styles */ #dz-vs-row, [data-vs-row] { transition: none !important; } #dz-vs-row *, [data-vs-row] * { /* allow inner non-mode transitions only where intentional */ } /* maps stage: driven by [hidden] attr + JS */ /* VS modes — [hidden] is source of truth */ #dz-vs-demo [data-vs][hidden] { display: none !important; } /* Mobile nav sheet */ .dz-nav-toggle { display: none; background: none; border: 1px solid rgba(245,241,232,.28); color: var(--dz-bone); width: 44px; height: 44px; cursor: pointer; font: 500 11px/1 var(--dz-font-mono); letter-spacing: .12em; } #dz-phone-screen [data-g-stage][hidden], #dz-phone-screen [data-g-pins][hidden], #dz-phone-screen [data-g-topbar][hidden], #dz-phone-screen [data-g-sug][hidden], #dz-phone-screen [data-g-rip][hidden] { display: none !important; } #dz-vs-demo [data-vs][hidden] { display: none !important; } /* ============================================================ RESPONSIVE SYSTEM — single source of truth Breakpoints: 900 (tablet/mobile), 600 (small phone) ============================================================ */ html { overflow-x: clip; } body { overflow-x: clip; max-width: 100vw; } /* ---------- ≤900px : mobile + tablet ---------- */ @media (max-width: 900px) { /* Global containment */ main, main > div, body > div { max-width: 100vw; box-sizing: border-box; } main { overflow-x: clip; } /* Containers: kill 48px desktop gutters */ [style*="max-width:1320px"], [style*="max-width: 1320px"] { max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* ---- NAV ROW (must stay one line) ---- */ body > div:first-of-type { position: sticky !important; top: 0 !important; z-index: 50 !important; } body > div:first-of-type > div { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; padding: 0 12px !important; gap: 8px !important; overflow: visible !important; box-sizing: border-box !important; } body > div:first-of-type > div > a:first-child { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 8px !important; } body > div:first-of-type > div > a:first-child span { font-size: 16px !important; } /* keep lang + menu on the right */ body > div:first-of-type > div > div:not(#dz-nav-links) { margin-left: auto !important; } .dz-nav-toggle { display: grid !important; margin-left: 0 !important; place-items: center !important; width: 44px !important; height: 44px !important; flex: 0 0 44px !important; margin-left: auto !important; background: transparent !important; border: 1px solid rgba(245,241,232,.28) !important; color: #F5F1E8 !important; font: 600 10px/1 "IBM Plex Mono", monospace !important; letter-spacing: .1em !important; cursor: pointer !important; z-index: 70 !important; } #dz-nav-links { display: none !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 60px !important; background: rgba(23,21,15,.98) !important; backdrop-filter: blur(14px); flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 8px 16px 16px !important; border-bottom: 1px solid rgba(245,241,232,.14) !important; z-index: 80 !important; } #dz-nav-links.is-open { display: flex !important; } #dz-nav-links a { padding: 14px 4px !important; min-height: 48px !important; border-bottom: 1px solid rgba(245,241,232,.1) !important; font-size: 15px !important; color: #F5F1E8 !important; } /* right cluster: lang + (optional) CTA */ body > div:first-of-type > div > div:last-child { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important; margin-left: 0 !important; } /* hide nav amber CTA on mobile — MENU + sticky WA cover contact */ body > div:first-of-type a[href="/contact"][style*="background"], body > div:first-of-type a[href*="contact"][style*="background:#C9781F"], body > div:first-of-type a[href*="contact"][style*="background: #C9781F"], body > div:first-of-type a[data-action="nav-contact"][style*="background"], body > div:first-of-type a[style*="background:#C9781F"], body > div:first-of-type a[style*="background: #C9781F"] { display: none !important; } body > div:first-of-type > div > div:last-child a { font-size: 11px !important; white-space: nowrap !important; } /* when toggle has margin-left auto, right cluster should come after toggle */ body > div:first-of-type > div { /* logo | spacer? | toggle | lang */ } /* ---- TYPE ---- */ main h1 { font-size: clamp(34px, 9vw, 44px) !important; line-height: 1.02 !important; } main h2 { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.1 !important; } /* ---- STACK key side-by-side sections only (NOT marquees) ---- */ main [style*="align-items:center"][style*="gap:80px"], main [style*="align-items: center"][style*="gap:80px"], main [style*="align-items:flex-start"][style*="gap:72px"], main [style*="align-items:flex-start"][style*="gap:80px"], main [style*="align-items:flex-end"][style*="justify-content:space-between"] { flex-direction: column !important; align-items: stretch !important; gap: 28px !important; flex-wrap: nowrap !important; } /* marquees must never wrap */ main [style*="dzMarquee"], main [style*="width:max-content"], main [style*="width: max-content"], main [style*="animation:dzMarquee"] { flex-wrap: nowrap !important; flex-direction: row !important; display: flex !important; } main [style*="animation:dzMarquee"] > div, main [style*="dzMarquee"] > div { flex-wrap: nowrap !important; flex-direction: row !important; display: flex !important; } /* ---- GRIDS → 1 COL (except SEO/AEO comparison table) ---- */ main [style*="grid-template-columns"]:not(.dz-seo-aeo) { grid-template-columns: 1fr !important; gap: 16px !important; } /* 2-col stats ok */ main [style*="grid-template-columns:1fr 1fr"]:not(.dz-seo-aeo), main [style*="grid-template-columns: 1fr 1fr"]:not(.dz-seo-aeo) { grid-template-columns: 1fr 1fr !important; } /* ---- FIXED WIDTHS → FULL ---- */ /* don't squash marquee tracks */ main [style*="width:max-content"], main [style*="width: max-content"] { width: max-content !important; max-width: none !important; } main [style*="400px"], main [style*="440px"], main [style*="460px"], main [style*="480px"], main [style*="520px"], main [style*="560px"], main [style*="620px"], main [style*="720px"], main [style*="880px"], main [style*="width:360px"], main [style*="width: 360px"], main [style*="width:380px"], main [style*="width: 380px"], main [style*="width:384px"], main [style*="width: 384px"], main [style*="max-width:380px"], main [style*="max-width:460px"], main [style*="max-width: 380px"], main [style*="max-width: 460px"] { width: 100% !important; max-width: 100% !important; flex-shrink: 1 !important; box-sizing: border-box !important; } /* min-width 0 for flex children */ main [style*="flex:1"], main [style*="flex: 1"] { min-width: 0 !important; } /* ---- HERO ---- */ main a[style*="background:#C9781F"], main a[style*="background: #C9781F"] { width: 100% !important; justify-content: center !important; min-height: 48px !important; box-sizing: border-box !important; } #dz-hero-rune { opacity: 0.35 !important; right: -40% !important; width: 70vw !important; pointer-events: none; } #dz-hero-rune svg { width: 70vw !important; height: auto !important; max-width: 280px !important; } /* ---- PHONE MOCK ---- */ #dz-phone { width: 100% !important; max-width: 300px !important; margin: 0 auto !important; overflow: hidden !important; } #dz-phone > div:first-child { transform: scale(0.68) !important; transform-origin: top center !important; margin-bottom: -220px !important; } #dz-phone-screen, #dz-phone .ios-device-screen { /* keep internal 384 design space; outer scale handles size */ } /* ---- BEFORE/AFTER SLIDER ---- */ #dz-ba { height: 360px !important; overflow: hidden !important; } #dz-ba [style*="width:880px"], #dz-ba [style*="width: 880px"] { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* ---- AEO / FAQ sticky ---- */ #dz-aeo { width: 100% !important; max-width: 100% !important; } main [style*="position:sticky"], main [style*="position: sticky"] { position: relative !important; top: auto !important; } /* ---- DECORATIVE ABSOLUTE SVGs ---- */ main svg[style*="position:absolute"], main svg[style*="position: absolute"] { max-width: 40vw !important; height: auto !important; opacity: 0.08 !important; } /* ---- FORMS ---- */ main input, main textarea, main select { max-width: 100% !important; box-sizing: border-box !important; font-size: 16px !important; min-height: 48px !important; } main textarea { min-height: 120px !important; } main #brief-submit, main a[data-action="brief-submit"] { width: 100% !important; min-height: 48px !important; justify-content: center !important; } /* ---- NOW RAP spans ---- */ main [style*="white-space:nowrap"], main [style*="white-space: nowrap"] { white-space: normal !important; } /* ---- WORK CARDS grid ---- */ main [style*="repeat(2"], main [style*="repeat(4"], main [style*="repeat(3"], main [style*="repeat(5"] { grid-template-columns: 1fr !important; } /* ---- PADDING SECTIONS ---- */ main [style*="padding:110px"], main [style*="padding: 110px"], main [style*="padding:104px"], main [style*="padding: 104px"], main [style*="padding:96px"], main [style*="padding: 96px"], main [style*="padding:92px"], main [style*="padding: 92px"], main [style*="padding:120px"], main [style*="padding: 120px"] { padding-top: 56px !important; padding-bottom: 56px !important; } /* ---- FOOTER ---- */ body > div [style*="justify-content:space-between"] { flex-wrap: wrap !important; gap: 20px !important; } body > div [style*="gap:72px"], body > div [style*="gap: 72px"], body > div [style*="gap:64px"], body > div [style*="gap: 64px"], body > div [style*="gap:40px"], body > div [style*="gap: 40px"] { gap: 16px !important; flex-wrap: wrap !important; } /* ---- STICKY WA ---- */ #dz-sticky-wa { right: 12px !important; bottom: 12px !important; left: auto !important; max-width: calc(100vw - 24px) !important; } #dz-sticky-wa > a { max-width: 100%; } /* Font display numbers that explode */ main [style*="104px"] { font-size: 56px !important; } main [style*="font:600 46px"], main [style*="font: 600 46px"] { font-size: 32px !important; } } /* Work featured case: only wide desktop rows with large gaps */ main [style*="display:flex"][style*="align-items:center"][style*="gap:48px"], main [style*="display:flex"][style*="align-items:center"][style*="gap:56px"], main [style*="display:flex"][style*="align-items:center"][style*="gap:64px"][style*="justify-content"] { flex-direction: column !important; } /* black case showcase phone */ main [style*="width:384px"], main [style*="width: 384px"], main [style*="height:812px"] { width: min(280px, 100%) !important; height: auto !important; max-width: 280px !important; aspect-ratio: 384 / 812; margin-inline: auto !important; } /* ---------- 601–900 tablet tweaks ---------- */ @media (min-width: 601px) and (max-width: 900px) { main h1 { font-size: 48px !important; } #dz-phone > div:first-child { transform: scale(0.78) !important; margin-bottom: -160px !important; } /* show compact nav CTA on tablet */ body > div:first-of-type a[style*="background:#C9781F"], body > div:first-of-type a[style*="background: #C9781F"] { display: inline-flex !important; padding: 10px 12px !important; font-size: 10px !important; } } /* ---------- ≤600px : small phones ---------- */ @media (max-width: 600px) { main h1 { font-size: 32px !important; } body > div:first-of-type a[style*="background:#C9781F"] { padding: 10px 10px !important; font-size: 9px !important; } /* hide secondary nav CTA label on tiny? keep */ #dz-phone > div:first-child { transform: scale(0.62) !important; margin-bottom: -260px !important; } main [style*="grid-template-columns:1fr 1fr"], main [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; /* keep 2-col stats */ } } /* ---- SEO vs AEO comparison table (row-based — cannot scramble) ---- */ .dz-seo-aeo-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; position: relative; } .dz-seo-aeo { display: flex; flex-direction: column; width: 100%; min-width: 720px; } /* Each row is its own 3-col grid — flat cell list cannot reflow wrong */ .dz-seo-aeo-row { display: grid; grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1fr); width: 100%; } .dz-seo-aeo-label { background: #F1EBDD; border-top: 1px solid rgba(23, 21, 15, .16); padding: 20px 24px; display: flex; align-items: center; gap: 10px; } .dz-seo-aeo-label.is-head { border-top: 0; background: #F1EBDD; } .dz-seo-aeo-label.is-top { align-items: flex-start; padding-top: 26px; } .dz-seo-aeo-num { font: 600 11px/1 "IBM Plex Mono", monospace; color: #A76112; flex-shrink: 0; } .dz-seo-aeo-lab { font: 600 10.5px/1.5 "IBM Plex Mono", monospace; letter-spacing: .12em; color: #17150F; } .dz-seo-aeo-seo { background: #FAF7EF; border-top: 1px solid rgba(23, 21, 15, .14); padding: 20px 34px; font: 400 15px/1.6 "Archivo", sans-serif; color: #3A362B; display: flex; align-items: center; } .dz-seo-aeo-aeo { background: #17150F; border-top: 1px solid rgba(245, 241, 232, .12); padding: 20px 34px; font: 400 15px/1.6 "Archivo", sans-serif; color: rgba(245, 241, 232, .85); display: flex; align-items: center; } .dz-seo-aeo-seo.is-head, .dz-seo-aeo-aeo.is-head { border-top: 0; padding: 28px 34px 24px; display: block; align-items: stretch; } .dz-seo-aeo-aeo.is-head { text-align: right; } .dz-seo-aeo-seo.is-pad-b, .dz-seo-aeo-aeo.is-pad-b { padding-bottom: 26px; } .dz-seo-aeo-title { font: 700 34px/1 "Archivo", sans-serif; font-stretch: 120%; letter-spacing: .01em; text-transform: uppercase; color: #17150F; } .dz-seo-aeo-title.is-light { color: #F5F1E8; } .dz-seo-aeo-sub { margin-top: 10px; font: 500 10px/1.6 "IBM Plex Mono", monospace; letter-spacing: .14em; color: #7A7261; } .dz-seo-aeo-sub.is-light { color: rgba(245, 241, 232, .5); } .dz-seo-aeo-sub-em { color: #A76112; } .dz-seo-aeo-sub-em.is-aeo { color: #DA9E4F; } .dz-seo-aeo-hl { color: #DA9E4F; } /* Demo row: label | demo spanning 2 cols */ .dz-seo-aeo-demo-row { grid-template-columns: 230px minmax(0, 1fr); } .dz-seo-aeo-demo { border-top: 1px solid rgba(23, 21, 15, .14); padding: 30px 34px 34px; background: #FAF7EF; } .dz-seo-aeo-demo-intro { text-align: center; font: 400 15px/1.5 "Archivo", sans-serif; color: #3A362B; } .dz-seo-aeo-demo-intro b { color: #17150F; } .dz-seo-aeo-demo-toggles { display: flex; justify-content: center; margin-top: 18px; } .dz-seo-aeo-demo-cap { margin-top: 18px; text-align: center; font: 500 10.5px/1.6 "IBM Plex Mono", monospace; letter-spacing: .12em; color: #7A7261; } .dz-seo-aeo-foot { background: #E9E2D2; border-top: 1px solid rgba(23, 21, 15, .16); padding: 20px 34px; display: flex; align-items: center; justify-content: center; gap: 16px; } .dz-seo-aeo-foot-rule { width: 26px; height: 1px; background: #C9781F; flex-shrink: 0; } .dz-seo-aeo-foot-txt { font: 400 14.5px/1.5 "Archivo", sans-serif; color: #3A362B; text-align: center; } .dz-seo-aeo-foot-txt b { color: #17150F; } .dz-vs-badge { position: absolute; left: calc(230px + (100% - 230px) / 2); top: 52px; transform: translate(-50%, -50%); width: 46px; height: 46px; background: #C9781F; display: grid; place-items: center; font: 700 13px/1 "IBM Plex Mono", monospace; color: #17150F; box-shadow: 0 14px 28px -12px rgba(23, 21, 15, .5); z-index: 2; pointer-events: none; } @media (max-width: 900px) { .dz-seo-aeo { min-width: 640px; } .dz-seo-aeo-row { grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); } .dz-seo-aeo-demo-row { grid-template-columns: 160px minmax(0, 1fr); } .dz-seo-aeo-wrap { margin-inline: -20px; padding-inline: 20px; } .dz-seo-aeo-wrap::after { content: "← scroll →"; display: block; text-align: center; font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; color: #7A7261; padding: 10px 0 0; } .dz-vs-badge { left: calc(160px + (100% - 160px) / 2); } .dz-seo-aeo-label, .dz-seo-aeo-seo, .dz-seo-aeo-aeo, .dz-seo-aeo-demo { padding-left: 16px; padding-right: 16px; } } @media (max-width: 600px) { .dz-seo-aeo { min-width: 560px; } .dz-seo-aeo-row { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); } .dz-seo-aeo-demo-row { grid-template-columns: 120px minmax(0, 1fr); } .dz-vs-badge { left: calc(120px + (100% - 120px) / 2); width: 40px; height: 40px; font-size: 11px; } .dz-seo-aeo-title { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [style*="dzMarquee"], [style*="dzFloat"], [style*="dzBlink"], [style*="dzDraw"], [style*="animation:dzUp"], [style*="animation: dzUp"] { animation: none !important; } /* never leave reveal/up-anim elements stuck at opacity 0 */ [data-rv], [style*="animation:dzUp"], [style*="animation: dzUp"] { opacity: 1 !important; transform: none !important; } #dz-hero-rune svg line { stroke-dashoffset: 0 !important; } } a:focus-visible, button:focus-visible, [data-action]:focus-visible { outline: 2px solid var(--dz-daybreak); outline-offset: 3px; } .dz-skip { position: absolute; left: -9999px; top: 0; background: var(--dz-daybreak); color: var(--dz-ink); padding: 10px 16px; z-index: 100; font: 600 12px/1 var(--dz-font-mono); } .dz-skip:focus { left: 12px; top: 12px; }