/** Shopify CDN: Minification failed Line 34:0 All "@import" rules must come first **/ /* ============================================================ Dates Dalah — shared tokens & utilities Load once in layout/theme.liquid ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600&display=swap'); :root { /* Monochrome scale — the whole brand lives here */ --dd-ink: #000000; --dd-ink-80: #1a1a1a; --dd-ink-55: #6b6b6b; --dd-ink-25: #d4d4d4; --dd-hairline: #e6e6e6; --dd-paper: #ffffff; --dd-paper-warm: #f6f5f3; /* Type */ --dd-display: 'Instrument Serif', 'Times New Roman', serif; --dd-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Rhythm */ --dd-gutter: 20px; --dd-max: 1440px; --dd-radius: 0px; /* squared corners = editorial */ --dd-ease: cubic-bezier(.22,.61,.36,1); } @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&family=Noto+Kufi+Arabic:wght@300;400;500;600&display=swap'); [dir="rtl"] { --dd-display: 'Noto Kufi Arabic', 'Instrument Serif', serif; --dd-body: 'Almarai', 'Inter Tight', sans-serif; } /* Arabic sits taller and needs no letter-spacing */ [dir="rtl"] .dd-eyebrow, [dir="rtl"] .dd-btn, [dir="rtl"] .dd-link, [dir="rtl"] .dd-card__add { letter-spacing: 0; } [dir="rtl"] .dd-h1, [dir="rtl"] .dd-h2, [dir="rtl"] .dd-h3 { line-height: 1.25; letter-spacing: 0; } [dir="rtl"] .dd-section--announcement .dd-ann__viewport { animation-direction: reverse; } @media (min-width: 750px) { :root { --dd-gutter: 40px; } } @media (min-width: 1200px) { :root { --dd-gutter: 64px; } } /* --- Layout helpers --- */ .dd-wrap { max-width: var(--dd-max); margin-inline: auto; padding-inline: var(--dd-gutter); } .dd-wrap--flush { padding-inline: 0; } .dd-section { position: relative; } /* --- Type utilities --- */ .dd-eyebrow { font-family: var(--dd-body); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--dd-ink-55); margin: 0 0 14px; } .dd-h1, .dd-h2, .dd-h3 { font-family: var(--dd-display); font-weight: 400; line-height: .98; letter-spacing: -0.01em; color: var(--dd-ink); margin: 0; } .dd-h1 { font-size: clamp(42px, 8.5vw, 108px); } .dd-h2 { font-size: clamp(32px, 5vw, 64px); } .dd-h3 { font-size: clamp(20px, 2.4vw, 30px); } .dd-h2 em, .dd-h1 em { font-style: italic; } .dd-body { font-family: var(--dd-body); font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--dd-ink-55); margin: 0; } @media (min-width: 750px) { .dd-body { font-size: 16px; } } /* --- Buttons --- */ .dd-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--dd-body); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 15px 30px; border: 1px solid var(--dd-ink); background: var(--dd-ink); color: var(--dd-paper); text-decoration: none; cursor: pointer; border-radius: var(--dd-radius); transition: background .35s var(--dd-ease), color .35s var(--dd-ease); } .dd-btn:hover { background: transparent; color: var(--dd-ink); } .dd-btn--ghost { background: transparent; color: var(--dd-ink); } .dd-btn--ghost:hover { background: var(--dd-ink); color: var(--dd-paper); } .dd-btn--invert { background: var(--dd-paper); color: var(--dd-ink); border-color: var(--dd-paper); } .dd-btn--invert:hover { background: transparent; color: var(--dd-paper); } /* Underline link */ .dd-link { font-family: var(--dd-body); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dd-ink); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--dd-ink); transition: opacity .3s var(--dd-ease); } .dd-link:hover { opacity: .55; } /* --- Media --- */ .dd-media { position: relative; overflow: hidden; background: var(--dd-paper-warm); } .dd-media img, .dd-media video { width: 100%; height: 100%; object-fit: cover; display: block; } .dd-media--zoom img { transition: transform 1.1s var(--dd-ease); } a:hover .dd-media--zoom img, .dd-media--zoom:hover img { transform: scale(1.045); } /* Duotone: forces any photo into the black & white system .dd-mono img, .dd-mono video { filter: grayscale(1) contrast(1.04); } */ /* --- Scroll reveal --- */ [data-dd-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--dd-ease), transform .9s var(--dd-ease); } [data-dd-reveal].is-in { opacity: 1; transform: none; } /* --- Slider primitives --- */ .dd-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .dd-track::-webkit-scrollbar { display: none; } .dd-track > * { scroll-snap-align: start; flex: 0 0 auto; } .dd-arrow { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--dd-ink); background: var(--dd-paper); color: var(--dd-ink); cursor: pointer; border-radius: 50%; transition: background .3s var(--dd-ease), color .3s var(--dd-ease), opacity .3s; } .dd-arrow:hover { background: var(--dd-ink); color: var(--dd-paper); } .dd-arrow[disabled] { opacity: .25; pointer-events: none; } /* --- Accessibility floor --- */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--dd-ink); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-dd-reveal] { opacity: 1; transform: none; } } /* --- RTL (Arabic store view) --- */ [dir="rtl"] .dd-track { direction: rtl; } [dir="rtl"] .dd-arrow svg { transform: scaleX(-1); } /* ============================================================ RTL — physical padding corrections Overrides section-level ID selectors, so !important is required. ============================================================ */ [dir="rtl"] .dd-section--hero .dd-hero__index-item { padding: 16px 0 16px 14px !important; } [dir="rtl"] .dd-section--story .dd-story__fact { padding: 22px 0 22px 16px !important; } [dir="rtl"] .dd-section--rev .dd-rev__card { padding: 30px 0 30px 28px !important; } [dir="rtl"] .dd-section--news .dd-news__submit { padding: 14px 20px 14px 0 !important; } [dir="rtl"] .dd-section--announcement .dd-ann__viewport { animation-direction: reverse; }