/* === colors.css === */ /* ============================================================ GGREEN — COLOR TOKENS UAE-inspired palette: desert sand, palm/leaf green, Arabian Gulf blue, warm neutrals. Muted, natural, no loud color. ============================================================ */ :root { /* ---- Sand (warm neutrals / backgrounds) ---- */ --sand-50: #FBF8F3; /* warm white — page background */ --sand-100: #F5EEE1; --sand-200: #EADBC3; --sand-300: #DCC49E; /* desert sand */ --sand-400: #C7A874; --sand-500: #AD8752; /* deep desert sand */ /* ---- Red Desert Sand (terracotta accent, used sparingly) ---- */ --terracotta-300: #D4A184; --terracotta-500: #B87859; /* red desert sand */ --terracotta-700: #B85533; /* ---- Palm / Leaf green (primary brand) ---- */ --palm-900: #16241C; /* date palm green — ink, darkest text */ --palm-800: #1E3328; --palm-700: #274734; /* palm green — primary */ --palm-600: #345D45; --palm-500: #4C7856; /* leaf green */ --palm-300: #86A98B; --palm-100: #D7E4D6; --palm-50: #EEF3EC; /* ---- Oasis / Arabian Gulf blue (secondary accent, water/trust) ---- */ --gulf-700: #1F4650; /* arabian gulf blue — deep */ --gulf-500: #3E7480; --oasis-400: #5F97A0; /* oasis blue */ --oasis-200: #C4DCDF; /* ---- Date yellow (optional rare highlight — awards, ratings) ---- */ --date-yellow-500: #D3A03D; --date-yellow-300: #EBCE95; /* ---- Stone grey (neutral scale for text / borders / surfaces) ---- */ --stone-900: #262420; --stone-800: #3A3733; --stone-600: #635E56; --stone-400: #7EA84A; --stone-300: #C3BCAF; --stone-200: #DDD6C9; --stone-100: #EEE9DF; --stone-0: #FFFFFF; /* ============================================================ SEMANTIC ALIASES — use these in components, not the raw scale ============================================================ */ /* Surfaces */ --surface-page: var(--sand-300); --surface-card: var(--stone-0); --surface-sunken: var(--sand-400); --surface-inverse: var(--palm-900); --surface-brand: var(--palm-700); --surface-brand-deep: var(--palm-900); --surface-overlay: rgba(22, 36, 28, 0.55); /* Text */ --text-primary: var(--palm-900); --text-secondary: var(--stone-600); --text-muted: var(--stone-400); --text-inverse: var(--sand-50); --text-inverse-muted: var(--palm-100); --text-brand: var(--palm-700); --text-link: var(--gulf-700); --text-link-hover: var(--palm-700); /* Borders */ --border-subtle: var(--stone-200); --border-default: var(--stone-300); --border-strong: var(--palm-700); --border-inverse: rgba(251, 248, 243, 0.24); /* Actions */ --action-primary: var(--palm-700); --action-primary-hover: var(--palm-800); --action-primary-active: var(--palm-900); --action-secondary: var(--sand-50); --action-secondary-hover: var(--sand-100); --action-on-primary: var(--sand-50); /* Accents */ --accent-terracotta: var(--terracotta-500); --accent-gulf: var(--gulf-700); --accent-oasis: var(--oasis-400); --accent-gold: var(--date-yellow-500); /* Feedback */ --state-success: var(--palm-600); --state-warning: var(--date-yellow-500); --state-danger: #A6473A; --state-info: var(--gulf-500); /* Focus ring */ --focus-ring: var(--gulf-500); } /* === typography.css === */ /* ============================================================ GGREEN — TYPE TOKENS Display serif for editorial/luxury headlines, humanist sans for body & UI. Nearest Google Fonts substitutes — see readme "Content & Visual Foundations" for the flagged substitution. ============================================================ */ /* Font loading moved to in each page's (combined with the display/Arabic families into one request) so the browser discovers and fetches fonts immediately, instead of late-discovering them via a CSS @import. See page blocks. */ :root { /* Font families */ --font-display: 'Petrona', Georgia, 'Times New Roman', serif; --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale — desktop */ --text-display-xl: 600 clamp(2.75rem, 5.2vw, 4.5rem)/1.08 var(--font-display); --text-display-lg: 600 clamp(2.25rem, 4.2vw, 3.5rem)/1.1 var(--font-display); --text-display-md: 500 clamp(1.75rem, 3vw, 2.5rem)/1.15 var(--font-display); --text-display-sm: 500 1.75rem/1.25 var(--font-display); --text-heading-lg: 600 1.5rem/1.3 var(--font-body); --text-heading-md: 600 1.25rem/1.35 var(--font-body); --text-heading-sm: 600 1.0625rem/1.4 var(--font-body); --text-body-lg: 400 1.125rem/1.6 var(--font-body); --text-body-md: 400 1rem/1.6 var(--font-body); --text-body-sm: 400 0.875rem/1.55 var(--font-body); --text-label-md: 500 0.9375rem/1.4 var(--font-body); --text-label-sm: 600 0.75rem/1.3 var(--font-body); --text-eyebrow: 600 0.8125rem/1.2 var(--font-body); /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.14em; } /* === spacing.css === */ /* ============================================================ GGREEN — SPACING, RADIUS, SHADOW, MOTION TOKENS Generous, luxury-villa spacing; soft warm-tinted shadows; restrained, calm radii and motion. ============================================================ */ :root { /* Spacing scale (base 4/8, extended for luxury whitespace) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 200px; /* Section / layout rhythm */ --section-padding-y: clamp(64px, 8vw, 128px); --section-padding-x: clamp(20px, 6vw, 96px); --content-max-width: 1280px; --content-max-width-narrow: 760px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-2xl: 32px; --radius-pill: 999px; /* Shadow — warm-tinted, soft, never harsh black */ --shadow-xs: 0 1px 2px rgba(38, 36, 32, 0.06); --shadow-sm: 0 2px 8px rgba(38, 36, 32, 0.07); --shadow-md: 0 8px 24px rgba(38, 36, 32, 0.10); --shadow-lg: 0 20px 48px rgba(30, 51, 40, 0.14); --shadow-card-hover: 0 24px 56px rgba(30, 51, 40, 0.18); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4); /* Motion */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --duration-fast: 150ms; /* @kind other */ --duration-base: 250ms; /* @kind other */ --duration-slow: 500ms; /* @kind other */ --duration-reveal: 700ms; /* @kind other */ /* Borders */ --border-width-thin: 1px; --border-width-md: 1.5px; }