/** * Yıldırım Yapı brand tokens. * * The identity guide mandates exactly two colours: Yıldırım Mavisi #062154 and * white. Two colours cannot carry a long page, so this file adds a warm * architectural neutral family — sand and concrete — and derives every other * value from the navy. No new hue is introduced: the neutrals are warm greys, * which keeps the palette faithful while stopping it reading cold and corporate. * * --------------------------------------------------------------------------- * ACCESSIBILITY (computed, not assumed) * * WCAG 2.1 AA wants 4.5:1 for normal text, 3:1 for large text and UI. Measured * relative luminance gives: * * Navy on White 15.51:1 PASS (AAA) <-- headings, body, links * Navy on Sand 12.92:1 PASS (AAA) * Ink on White 17.40:1 PASS (AAA) * Ink on Sand 14.49:1 PASS (AAA) * White on Navy 15.51:1 PASS (AAA) <-- anchor bands, primary button * Slate on White 5.95:1 PASS <-- muted/secondary text * Slate on Sand 4.96:1 PASS * Concrete on White 1.71:1 FAILS text <-- rules and surfaces ONLY * * Concrete is the one value that carries no text under any circumstances. It is * a drafting line and a panel fill. Every text pairing above clears AA, and all * but one clears AAA, so nothing here needs a contrast compromise. * --------------------------------------------------------------------------- */ :root { /* Mandated — exact values from the corporate identity guide. */ --yildirim-navy: #062154; --yildirim-white: #ffffff; /* Derived navy steps. Same hue, moved in value only. */ --yildirim-navy-800: #04173b; /* pressed states, deepest bands */ --yildirim-navy-600: #0a2f72; /* hover on navy fills */ --yildirim-navy-400: #1c4a9e; /* focus ring, active drafting line */ /* Warm architectural neutrals. Raw concrete and site sand. */ --yildirim-sand: #edeae4; --yildirim-sand-50: #f6f4f0; --yildirim-concrete: #c9c6bf; --yildirim-ink: #1a1a1a; --yildirim-slate: #5a6478; /* navy-tinted grey — muted text, 5.95:1 on white */ /* Hairlines behave like drafting lines: thin, navy, never pure black. */ --yildirim-rule: rgba(6, 33, 84, 0.16); --yildirim-rule-strong: rgba(6, 33, 84, 0.32); --yildirim-rule-inverse: rgba(255, 255, 255, 0.22); --yildirim-overlay: rgba(4, 23, 59, 0.62); /* Semantic aliases. Components reference these and never the raw names, so a role can be re-pointed without touching every rule. */ --yildirim-bg: var(--yildirim-white); --yildirim-bg-alt: var(--yildirim-sand-50); --yildirim-bg-muted: var(--yildirim-sand); --yildirim-bg-inverse: var(--yildirim-navy); --yildirim-text: var(--yildirim-ink); --yildirim-text-muted: var(--yildirim-slate); --yildirim-text-inverse: var(--yildirim-white); --yildirim-heading: var(--yildirim-navy); --yildirim-link: var(--yildirim-navy); --yildirim-link-hover: var(--yildirim-navy-600); --yildirim-cta-bg: var(--yildirim-navy); --yildirim-cta-bg-hover: var(--yildirim-navy-600); --yildirim-cta-text: var(--yildirim-white); --yildirim-focus: var(--yildirim-navy-400); /* Project status. Kept inside the palette rather than importing a traffic- light scheme, which would fight the two-colour identity. Differentiation is by value and fill, and every status chip also carries a text label, so colour is never the only signal. */ --yildirim-status-planned: var(--yildirim-concrete); --yildirim-status-active: var(--yildirim-navy-400); --yildirim-status-done: var(--yildirim-navy); /* Typography. The 2026 identity replaced the geometric wordmark with a classical serif monogram, so headings follow it: Cormorant Garamond is the closest open face to the logo's lettering. Archivo still carries body copy, where a high-contrast serif would be tiring at small sizes. */ --yildirim-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif; --yildirim-font-body: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif; --yildirim-font-arabic: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif; /* The wordmark is uppercase and widely tracked; eyebrows echo it. Headings no longer pull tight — negative tracking closes up a Garamond's open counters and makes it look cramped, so display type sits at zero and relies on size for impact instead. */ --yildirim-tracking-eyebrow: 0.22em; --yildirim-tracking-heading: 0; --yildirim-tracking-wordmark: 0.12em; /* Numerals are a design element here — unit counts, floor counts, years — so they get their own tabular treatment. */ --yildirim-numeral-feature: "tnum" 1, "lnum" 1; /* Spacing. The architectural grid is 8px; the large steps are multiples that keep section rhythm predictable down the page. */ --yildirim-space-1: 0.5rem; --yildirim-space-2: 1rem; --yildirim-space-3: 2rem; --yildirim-space-4: 4rem; --yildirim-space-5: 6rem; --yildirim-space-6: 8rem; --yildirim-container: 1280px; --yildirim-container-narrow: 720px; /* Near-flat surfaces. Depth comes from the drafting rules and from navy fields, not from shadow — a construction drawing has no drop shadows. */ --yildirim-radius: 0px; --yildirim-radius-lg: 2px; --yildirim-shadow: 0 1px 2px rgba(6, 33, 84, 0.06), 0 12px 32px rgba(6, 33, 84, 0.07); --yildirim-transition: 200ms cubic-bezier(0.2, 0, 0.1, 1); /* The 2026 mark is a circular monogram, not the old gable, so the recurring shape is a ring. Used for watermarks and image placeholders. */ --yildirim-ring: 50%; /* Silver, from the new logo's metallic treatment. Decorative only — it measures 2.4:1 on navy and must never carry body text. */ --yildirim-silver: #c8ccd4; --yildirim-silver-dim: rgba(200, 204, 212, 0.45); /* Blueprint grid, drawn with gradients so it costs no request. */ --yildirim-grid-size: 32px; --yildirim-grid-line: rgba(255, 255, 255, 0.06); } /* Arabic swaps both stacks and drops tracking: Arabic script must never be letter-spaced, and the geometric Latin face has no Arabic coverage. */ .yildirim-lang-ar { --yildirim-font-heading: var(--yildirim-font-arabic); --yildirim-font-body: var(--yildirim-font-arabic); --yildirim-tracking-eyebrow: 0; --yildirim-tracking-heading: 0; --yildirim-tracking-wordmark: 0; } @media (prefers-reduced-motion: reduce) { :root { --yildirim-transition: 0ms; } }