/* ============================================================ Dar Al Qias — Design Tokens · v8 + v10 نظام ألوان دار القياس للاستشارات المهنية (المرجع الرسمي) Source of truth: color-system.html ------------------------------------------------------------ Layer 1 BRAND — the six identity colours, verbatim Layer 2 RAMPS — 10 / 25 / 50 / 75 / 100 / 125 per hue Layer 3 GRADIENTS — four approved gradients, 135° fixed Layer 4 SEMANTIC — the roles the stylesheets actually use Layer 5 FORM — radius, depth, glass, type, motion (v8) ------------------------------------------------------------ Rule: no colour literal (hex / rgb / hsl) is written outside this file. Every other file reaches for a role below, and alpha variants are mixed from a role with color-mix(). The single exception to the palette is WhatsApp's own green, kept here so the button reads as WhatsApp at a glance. ============================================================ */ :root{ /* ===== 1 · BRAND ========================================= */ /* core — the two logo colours */ --dq-petrol:#02385A; /* بترولي داكن — Petrol Navy AAA on white 12.24:1 */ --dq-gray:#8E8E8E; /* رمادي الشعار — Logo Gray */ /* supporting */ --dq-blue:#113A70; /* أزرق مؤسسي — Corporate Blue AAA on white 11.27:1 */ --dq-accent:#0B70F2; /* أزرق مضيء — Signal Blue AA on white 4.55:1 */ --dq-teal:#3F89A6; /* أزرق فيروزي — Steel Teal */ --dq-clay:#A77969; /* طيني دافئ — Clay */ /* neutrals */ --dq-ink:#1B2331; /* نص أساسي AAA on surface 14.46:1 */ --dq-surface:#F4F5F7; /* رمادي فاتح جداً */ --dq-border:#E3E5E9; /* حدود */ --dq-canvas:#FFFFFF; /* أبيض */ /* ===== 2 · RAMPS ========================================= */ --petrol-10:#E6EBEE; --petrol-25:#C0CDD6; --petrol-50:#809CAC; --petrol-75:#416A83; --petrol-100:#02385A; --petrol-125:#022E4A; --blue-10:#E7EBF1; --blue-25:#C4CEDB; --blue-50:#889CB8; --blue-75:#4C6B94; --blue-100:#113A70; --blue-125:#0E305C; --accent-10:#E7F1FE; --accent-25:#C2DBFC; --accent-50:#85B8F8; --accent-75:#4894F5; --accent-100:#0B70F2; --accent-125:#095CC6; --teal-10:#ECF3F6; --teal-25:#CFE2E9; --teal-50:#9FC4D2; --teal-75:#6FA6BC; --teal-100:#3F89A6; --teal-125:#347088; --clay-10:#F6F2F0; --clay-25:#E9DEDA; --clay-50:#D3BCB4; --clay-75:#BD9A8E; --clay-100:#A77969; --clay-125:#896356; /* the deepest plate — end stop of the official depth gradient */ --petrol-deep:#01243A; --petrol-night:#03080F; /* the film's night: an off-black in the petrol hue */ /* ===== 3 · GRADIENTS ===================================== */ --grad-cover:linear-gradient(135deg,#02385A 0%,#113A70 55%,#0B70F2 100%); --grad-depth:linear-gradient(135deg,#02385A 0%,#01243A 100%); --grad-accent:linear-gradient(135deg,#0B70F2 0%,#3F89A6 100%); --grad-light:linear-gradient(180deg,#FFFFFF 0%,#F4F5F7 60%,#E3E5E9 100%); /* ===== 4 · SEMANTIC ROLES =============================== */ /* grounds */ --ground:var(--blue-10); /* page ground — the tinted tone that alternates with white sheets */ --sheet:var(--dq-canvas); /* rounded white sheets and cards */ --sheet-2:var(--petrol-10); /* tinted sheet */ --wash:var(--accent-10); /* blue wash — icon tiles, chips */ --night:var(--petrol-deep); /* hero plate, CTA, footer */ --night-2:var(--petrol-deep); /* deepest plate (official grad-depth end) */ --plate:var(--dq-petrol); /* petrol plate */ /* text on light — ratios on white / on the tinted ground (--blue-10) */ --ink:var(--dq-petrol); /* headings 12.24 / 10.23 AAA */ --ink-2:var(--dq-ink); /* body 15.77 / 13.18 AAA */ --mut:#5C626E; /* muted 6.13 / 5.12 AA */ /* the second tone of a two-tone heading — petrol 75 from the official ramp: the quiet half of the petrol/grey pair in the logo, and it clears AA on white (5.81:1) and on the tinted ground (4.86:1) */ --tone-2:var(--petrol-75); /* text on the night plates */ --on-night:#FFFFFF; /* 15.4:1 AAA */ --on-night-2:var(--petrol-25); /* secondary 9.85:1 AAA */ --on-night-3:var(--petrol-50); /* fine print 5.53:1 AA */ --on-night-tone:var(--accent-50); /* second tone on night 8.1:1 */ /* the single accent — signal blue */ --accent:var(--dq-accent); /* fills, icons, rules */ --accent-ink:var(--accent-125);/* accent TEXT on light 6.25:1 AA */ --accent-hover:var(--accent-125); --accent-2:var(--accent-50); /* accent on night 5.95:1 AA */ /* the rare warm touch — 5% budget */ --clay:var(--dq-clay); --clay-ink:var(--clay-125); /* lines */ --line:var(--dq-border); --line-night:color-mix(in srgb,var(--accent-50) 22%,transparent); /* WhatsApp — the one colour outside the brand palette. Text on it is night ink (8.0:1); the glyph on it stays white. */ --wa-green:#25D366; --wa-tint:#DBF7E6; /* WhatsApp icon tile */ --wa-ink:#128C4A; /* WhatsApp glyph on its tint 3.8:1 (icon) */ --field-edge:#7A8B9C; /* form field boundary 3.5:1 on white */ --field-hint:#6B7280; /* placeholder text 4.8:1 on white */ /* ===== 5 · FORM (v8) ===================================== */ /* type — Cairo carries display, body and data alike */ --f-disp:'Cairo','Segoe UI',system-ui,sans-serif; --f-body:'Cairo','Segoe UI',system-ui,sans-serif; --t-hero:clamp(46px,6.6vw,104px); --t-h2:clamp(32px,4.1vw,60px); --t-h3:clamp(19px,1.45vw,23px); --t-lead:clamp(17px,1.25vw,20px); --t-body:16px; --t-small:14px; --t-micro:12.5px; --t-stat:clamp(54px,6.4vw,96px); /* space */ --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px; --s7:48px;--s8:64px;--s9:96px;--s10:128px;--s11:192px; --gutter:clamp(16px,4vw,40px); --wrap:1240px; --section:clamp(72px,9vw,136px); --sbw:0px; /* classic-scrollbar width, measured in js/site.js */ /* radius — the references' soft, deep corners */ --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:28px; --r-xl:40px; --r-pill:999px; /* depth — petrol-tinted, never grey */ --shadow-1:0 1px 2px color-mix(in srgb,var(--dq-petrol) 6%,transparent), 0 10px 30px -14px color-mix(in srgb,var(--dq-petrol) 22%,transparent); --shadow-2:0 2px 6px color-mix(in srgb,var(--dq-petrol) 6%,transparent), 0 30px 60px -28px color-mix(in srgb,var(--dq-petrol) 38%,transparent); --shadow-glow:0 18px 50px -18px color-mix(in srgb,var(--dq-accent) 60%,transparent); /* glass — frosted panels on the night plate and over photography */ --glass-night:color-mix(in srgb,var(--dq-canvas) 8%,transparent); --glass-night-2:color-mix(in srgb,var(--dq-canvas) 14%,transparent); --glass-edge:color-mix(in srgb,var(--dq-canvas) 18%,transparent); --glass-light:color-mix(in srgb,var(--dq-canvas) 72%,transparent); --glass-light-edge:color-mix(in srgb,var(--dq-canvas) 90%,transparent); --glass-blur:blur(18px) saturate(150%); /* darker glass for captions laid over photographs of any brightness */ --glass-shade:color-mix(in srgb,var(--petrol-deep) 66%,transparent); /* veils over the night video — text side (right, RTL) stays darkest */ --veil-hero:linear-gradient(270deg, color-mix(in srgb,var(--petrol-deep) 88%,transparent) 0%, color-mix(in srgb,var(--petrol-deep) 55%,transparent) 45%, color-mix(in srgb,var(--petrol-deep) 8%,transparent) 100%); --veil-top:linear-gradient(180deg, color-mix(in srgb,var(--petrol-deep) 75%,transparent) 0%, transparent 22%); /* inner-page heroes on phones: text sits low, so the veil rises from the foot */ --veil-foot:linear-gradient(0deg, color-mix(in srgb,var(--petrol-deep) 92%,transparent) 0%, color-mix(in srgb,var(--petrol-deep) 60%,transparent) 55%, transparent 100%); /* grain — a fine white noise tile; laid on the night plates at a few percent it breaks the digital flatness and the banding of their glows */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* stacking — one scale for every layer above the page */ --z-sticky:40; /* services chip index */ --z-float:880; /* WhatsApp + back-to-top */ --z-nav:900; /* floating glass nav */ --z-progress:1001; /* reading progress hairline */ --z-intro:3000; /* logo intro / page curtain */ --z-skip:3100; /* skip link, above everything */ /* motion — one expressive, one mechanical, one springy */ --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,.05,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --dur-1:.18s; --dur-2:.32s; --dur-3:.6s; --dur-4:1.1s; } /* ============================================================ Layer 6 · v10 «المبنى» — the formal page around the film ------------------------------------------------------------ Roles for the redesigned pages (index.html first). They point at the brand ramps above, plus the v8 muted grey (--mut) for secondary copy — no new colours. The v8 roles stay until services.html, projects.html and 404.html move to v10. Flat and formal: hairlines, white and pale-grey sections, petrol ink; depth lives only in the film (dressed by Layer 6b). The map roles of the flat «خريطة الطبقات» version retired with it; a copy of this file is in _archive/v10-atlas/css/. ============================================================ */ :root{ /* the sheet */ --m-ground:var(--dq-surface); /* page ground */ --m-paper:var(--dq-canvas); /* panels, legend, register rows */ --m-ink:var(--dq-petrol); /* headings, linework 11.2:1 */ --m-text:var(--dq-ink); /* body copy 14.5:1 */ --m-mut:var(--mut); /* secondary copy 5.6:1 */ --m-tone:var(--petrol-75); /* second tone of a heading 5.3:1 */ --m-hair:var(--dq-border); /* hairline rules */ --m-hair-2:var(--petrol-25); /* stronger rule */ /* the one bright colour: the service being built and the primary action */ --m-active:var(--dq-accent); --m-active-ink:var(--accent-125); /* signal blue as TEXT (hover) 6.25:1 */ --m-select:var(--accent-25); /* text selection */ --m-scroll:var(--petrol-50); /* scrollbar thumb */ --m-ink-deep:var(--petrol-125); /* ink button hover */ --m-err:var(--clay-125); /* form errors (no red in brand) */ --m-ok:var(--teal-125); /* form confirmations */ --m-wa-hover:color-mix(in srgb,var(--wa-green) 84%,var(--dq-ink)); /* page-scale fields */ --m-field:var(--dq-petrol); /* contact field */ --m-field-deep:var(--petrol-deep); /* footer */ --m-on-field:var(--dq-canvas); /* 12.2:1 */ --m-on-field-2:var(--petrol-25); /* 7.5:1 on petrol · 9.9:1 on deep */ --m-on-field-3:var(--petrol-50); /* fine print on the DEEP field only 5.5:1 */ /* five client sectors — a classed legend */ --m-c1:var(--dq-petrol); /* labels sit beside the swatches, never on them */ --m-c2:var(--dq-blue); --m-c3:var(--dq-teal); --m-c4:var(--dq-clay); --m-c5:var(--dq-gray); /* type — pinned Google Fonts families, one job each */ --f-display:'Cairo','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif; --f-text:'IBM Plex Sans Arabic','IBM Plex Sans','Segoe UI',Tahoma,sans-serif; --f-latin:'IBM Plex Sans','IBM Plex Sans Arabic','Segoe UI',sans-serif; --f-sign:'Tajawal','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif; /* the building's signage */ /* the frame — one column, a fluid gutter, square corners on controls (surfaces take none); the v8 --wrap / --gutter / --r-* stay for v8 */ --m-wrap:1280px; --m-gutter:clamp(16px,4vw,56px); --m-radius:2px; /* motion — one curve for arrivals, a quieter one for leaving */ --m-ease:cubic-bezier(.16,1,.3,1); --m-ease-out:cubic-bezier(.3,0,.2,1); } /* ============================================================ Layer 6b · v10 «المبنى» — the stage: the film's dusk ------------------------------------------------------------ The build is a realistic film rendered in Blender (tools/blender/build_film.py): a tower rising on a stone plinth in still water, from sunset into the blue hour. These roles dress what the page lays over it — the dark hero, the header while the film is under it, the cards, the leader, the counter. Signal blue marks only the service being built and the primary action. ============================================================ */ :root{ --s-night:var(--petrol-night); /* the stage and the header over the film */ --s-card:var(--petrol-night); /* card, counter and chip surfaces */ --s-ink:var(--dq-canvas); /* text on the film 19.4:1 */ --s-mut:var(--petrol-25); /* secondary text on the film 13.1:1 */ --s-fine:var(--petrol-50); /* fine print on the film 6.9:1 */ --s-edge:var(--petrol-75); /* hairlines on the film */ --s-signal:var(--dq-accent); /* the service being built, the primary action */ --s-signal-ink:var(--accent-75); /* signal blue as text on the film 6.4:1 */ }