/* ============================================================ ILWARSHA GYM — صالة الورشة Core foundations: colour + typography tokens ------------------------------------------------------------ Import this file at the top of any design: Then set the document direction for Arabic-first layouts: ============================================================ */ /* ---- Webfonts (self-hosted from /fonts) --------------------- Arabic: GE SS Two — the real brand font (Light/Medium/Bold). Bold is the heaviest weight shipped, so headline weights 700–900 all map to the Bold file (no synthetic bolding). Cairo kept only as a glyph fallback. Latin / numerals: Barlow — full family, exact brand font. Paths are relative to THIS file (project root /fonts). ------------------------------------------------------------ */ /* ---- GE SS Two (Arabic) ---- */ @font-face { font-family:'GE SS Two'; src:url('fonts/GE_SS_Two_Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'GE SS Two'; src:url('fonts/GE_SS_Two_Medium.otf') format('opentype'); font-weight:400 500; font-style:normal; font-display:swap; } @font-face { font-family:'GE SS Two'; src:url('fonts/GE_SS_Two_Bold.otf') format('opentype'); font-weight:600 900; font-style:normal; font-display:swap; } /* ---- Barlow (Latin + numerals) ---- */ @font-face { font-family:'Barlow'; src:url('fonts/Barlow-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Barlow'; src:url('fonts/Barlow-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:'Barlow'; src:url('fonts/Barlow-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Barlow'; src:url('fonts/Barlow-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Barlow'; src:url('fonts/Barlow-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Barlow'; src:url('fonts/Barlow-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; } @font-face { font-family:'Barlow'; src:url('fonts/Barlow-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; } @font-face { font-family:'Barlow'; src:url('fonts/Barlow-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; } :root { /* ----- BRAND PALETTE (core) ----- */ --warsha-red: #B53A2D; /* brand red — accents, highlight bars, CTAs */ --warsha-red-bright: #D94F3A; /* lit 3D faces, hover lift on red */ --warsha-red-deep: #8E2A20; /* pressed red, shadow side of red */ --charcoal: #1E1E1E; /* primary dark background */ --charcoal-900: #111111; /* deepest background / gradient floor */ --charcoal-800: #161616; /* raised dark surface */ --charcoal-700: #2C2C2C; /* dark cards, borders on dark */ --charcoal-600: #3A3A3A; /* hairlines, dividers on dark */ --mid-gray: #666666; /* secondary text, muted labels */ --white: #FFFFFF; /* primary text on dark, footer bg */ /* ----- SUPPORTING NEUTRALS ----- */ --gray-100: #F5F5F5; /* lightest surface / footer alt */ --gray-200: #EBEBEB; /* light divider on white footer */ --gray-300: #CCCCCC; /* body text / subhead on dark */ --gray-400: #AAAAAA; /* silver metal mid-tone */ --gray-500: #8A8A8A; /* silver metal shadow */ /* ----- METAL (for 3D / metallic treatments) ----- */ --metal-light: #C8C8CC; --metal-mid: #8A8A8E; --metal-dark: #4A4A4E; /* ----- CAUTION (warning / hazard posts ONLY) ----- */ --hazard-yellow: #E8A317; /* the diagonal hazard-tape accent (post 3) */ /* ----- SEMANTIC COLOUR ROLES ----- */ --bg: var(--charcoal); /* default canvas */ --bg-deep: var(--charcoal-900); --surface: var(--charcoal-700); --border: var(--charcoal-600); --accent: var(--warsha-red); --fg: var(--white); /* headline / primary text */ --fg-muted: var(--gray-300); /* body / subhead on dark */ --fg-subtle: var(--mid-gray); /* captions, meta */ --fg-on-light: var(--charcoal); /* text on the white footer */ /* ----- OVERLAYS ----- */ --overlay-img: rgba(0,0,0,0.50); /* min scrim over photo bg */ --overlay-img-strong: rgba(0,0,0,0.62); --scrim-bottom: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0) 70%); /* ----- TYPE FAMILIES ----- */ --font-ar: 'GE SS Two', 'Cairo', system-ui, sans-serif; /* Arabic display + body */ --font-en: 'Barlow', system-ui, sans-serif; /* Latin + numerals */ --font-num: 'Barlow', 'GE SS Two', system-ui, sans-serif; /* feature numbers */ /* ----- TYPE WEIGHTS ----- */ --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --w-extra: 800; --w-black: 900; /* ----- TYPE SCALE (tuned for 1080-wide social canvases) ----- */ --fs-display: 132px; /* hero headline H1 */ --fs-h1: 104px; --fs-h2: 64px; /* subheadline */ --fs-h3: 40px; /* label / tag */ --fs-body: 30px; /* body / detail */ --fs-caption: 24px; /* footer / fine */ --fs-mega: 340px; /* 3D feature numbers */ /* ----- RADII (industrial = mostly sharp) ----- */ --r-sharp: 0px; --r-xs: 4px; /* red highlight bar */ --r-sm: 8px; --r-md: 14px; /* chips / price pills */ --r-lg: 22px; /* photo cards (trainer grid) */ --r-footer:26px; /* the rounded footer notch */ /* ----- SHADOWS ----- */ --shadow-3d: 0 24px 48px rgba(0,0,0,0.55); /* lift under 3D elements */ --shadow-card: 0 10px 30px rgba(0,0,0,0.45); --shadow-text: 0 2px 8px rgba(0,0,0,0.80); /* text over busy imagery */ --shadow-footer:0 -2px 24px rgba(0,0,0,0.35); /* ----- LAYOUT / SAFE AREA (per design system §11.3) ----- */ --margin-x: 56px; /* left / right safe margin */ --safe-top: 56px; --footer-h: 128px; /* standard footer bar height on a 1080×1350 canvas */ } /* ============================================================ BASE ELEMENTS ============================================================ */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-ar); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================ SEMANTIC TYPE CLASSES Use .ar for Arabic runs, .en for Latin/numerals. ============================================================ */ .ar { font-family: var(--font-ar); } .en { font-family: var(--font-en); } /* Hero headline — the post's single loudest line. 1–2 lines only, GE SS Two/Cairo Black, tight leading. */ .t-display { font-family: var(--font-ar); font-weight: var(--w-black); font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; } .t-h1 { font-family: var(--font-ar); font-weight: var(--w-black); font-size: var(--fs-h1); line-height: 1.05; } .t-h2 { /* subheadline */ font-family: var(--font-ar); font-weight: var(--w-bold); font-size: var(--fs-h2); line-height: 1.12; color: var(--fg-muted); } .t-h3 { /* labels / tags */ font-family: var(--font-ar); font-weight: var(--w-bold); font-size: var(--fs-h3); line-height: 1.2; } .t-body { font-family: var(--font-ar); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: 1.5; color: var(--fg-muted); } .t-caption { font-family: var(--font-ar); font-weight: var(--w-regular); font-size: var(--fs-caption); line-height: 1.3; } /* Feature number — treat as a graphic object, Barlow Black. */ .t-mega { font-family: var(--font-num); font-weight: var(--w-black); font-size: var(--fs-mega); line-height: 0.9; letter-spacing: -0.03em; } /* ============================================================ BRAND UTILITIES ============================================================ */ /* Red word-highlight: wrap the single most important word. Inline red text — the lightweight emphasis. */ .hl { color: var(--warsha-red); } /* Red highlight BAR: solid block behind a word/phrase. */ .hl-bar { background: var(--warsha-red); color: var(--white); border-radius: var(--r-xs); padding: 0.04em 0.28em 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Text shadow helper for type set over photography. */ .on-photo { text-shadow: var(--shadow-text); } /* ============================================================ BACKGROUNDS ============================================================ */ .bg-charcoal { background: var(--charcoal); } .bg-charcoal-grad { background: radial-gradient(120% 90% at 50% 0%, #232323 0%, var(--charcoal) 45%, var(--charcoal-900) 100%); } .bg-red-grad { background: radial-gradient(130% 100% at 85% 15%, var(--warsha-red-bright) 0%, var(--warsha-red) 38%, var(--warsha-red-deep) 78%, #5e1c15 100%); } /* Photo background helper: apply to a wrapper that has a bg image. */ .bg-photo { position: relative; background-size: cover; background-position: center; } .bg-photo::after { content: ""; position: absolute; inset: 0; background: var(--overlay-img); pointer-events: none; } .bg-photo > * { position: relative; z-index: 1; } /* Subtle industrial noise — layer at 6–8% over flat dark fills. */ .noise::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }