/** Shopify CDN: Minification failed Line 44:0 All "@import" rules must come first **/ /* ========================================================= TITAN TACTICAL GEAR — Shared Design Tokens & Base Styles Scope: everything is namespaced under .titan-* classes so this can be dropped into any existing Shopify theme without colliding with the theme's own CSS. ========================================================= */ :root{ /* Palette */ --titan-obsidian: #101010; --titan-obsidian-2: #101010; --titan-gunmetal: #1B211D; --titan-gunmetal-2: #242b26; --titan-coyote: #B08D57; --titan-olive: #4B5320; --titan-blaze: #FF5A1F; --titan-blaze-hover: #e64d15; --titan-bone: #EDEAE0; --titan-bone-dim: #b9b6ac; --titan-line: rgba(237,234,224,0.12); /* Type */ --titan-font-display: 'Oswald', 'Arial Narrow', sans-serif; --titan-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --titan-font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Spacing scale */ --titan-space-xs: 8px; --titan-space-sm: 16px; --titan-space-md: 32px; --titan-space-lg: 64px; --titan-space-xl: 96px; --titan-radius: 2px; --titan-container: 1280px; } /* Font loading (Shopify-safe: Google Fonts via CSS import) */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Changa:wght@500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); /* Arabic locale — swap to Arabic-native fonts. Changa is a bold, structurally condensed Arabic sans (the closest Arabic equivalent to Oswald's sturdy, no-nonsense character) used for headings/labels — it carries the same "stamped, built-for-a-purpose" weight the Latin type has. IBM Plex Sans Arabic (a technical, engineering-grade typeface) handles body copy where legibility at small sizes matters more than heading-level impact. Shopify sets automatically for the Arabic storefront. */ html[lang="ar"]{ --titan-font-display: 'Changa', 'IBM Plex Sans Arabic', sans-serif; --titan-font-body: 'IBM Plex Sans Arabic', sans-serif; --titan-font-mono: 'IBM Plex Sans Arabic', sans-serif; } /* Uppercase + letter-spacing is a Latin-type convention — it breaks Arabic letterforms (they're designed to connect) and Arabic has no letter case, so both are switched off site-wide whenever the page is in Arabic. */ html[lang="ar"] [class*="titan-"]{ text-transform: none; letter-spacing: normal; } /* Arabic script has taller ascenders/descenders and diacritic marks than Latin — the tight line-heights tuned for Oswald/Inter (as low as 1.05) crowd Arabic lines into each other and can visually clip letterforms. These generous overrides give every line proper breathing room. */ html[lang="ar"] .titan-section{ line-height: 1.9; } html[lang="ar"] .titan-heading{ line-height: 1.55; } html[lang="ar"] .titan-hero__subtitle, html[lang="ar"] .titan-story__body, html[lang="ar"] .titan-testimonial-card__quote, html[lang="ar"] .titan-product-card__title, html[lang="ar"] .titan-mega__col-title, html[lang="ar"] .titan-footer__tagline, html[lang="ar"] .titan-newsletter__subtitle, html[lang="ar"] .titan-trust__desc{ line-height: 1.85; } .titan-section{ font-family: var(--titan-font-body); color: var(--titan-bone); box-sizing: border-box; } .titan-section *, .titan-section *::before, .titan-section *::after{ box-sizing: border-box; } .titan-section img{ max-width:100%; display:block; } .titan-container{ max-width: var(--titan-container); margin: 0 auto; padding: 0 var(--titan-space-md); } @media (max-width: 749px){ .titan-container{ padding: 0 var(--titan-space-sm); } } /* Eyebrow / spec-tag label — signature "issue tag" motif */ .titan-eyebrow{ font-family: var(--titan-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--titan-blaze); display: inline-flex; align-items: center; gap: 8px; } .titan-eyebrow::before{ content: ""; width: 18px; height: 2px; background: var(--titan-blaze); display: inline-block; } .titan-heading{ font-family: var(--titan-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; color: var(--titan-bone); margin: 0; } .titan-btn{ font-family: var(--titan-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; border: none; border-radius: var(--titan-radius); cursor: pointer; text-decoration: none; transition: background-color .15s ease, transform .1s ease, border-color .15s ease; white-space: nowrap; } .titan-btn:active{ transform: translateY(1px); } .titan-btn--primary{ background: var(--titan-blaze); color: var(--titan-obsidian); } .titan-btn--primary:hover{ background: var(--titan-blaze-hover); } .titan-btn--outline{ background: transparent; color: var(--titan-bone); border: 1px solid var(--titan-line); } .titan-btn--outline:hover{ border-color: var(--titan-bone); } /* Diagonal hazard-stripe divider — signature motif, used sparingly */ .titan-hazard-divider{ height: 10px; width: 100%; background-image: repeating-linear-gradient( -45deg, var(--titan-blaze), var(--titan-blaze) 14px, var(--titan-obsidian) 14px, var(--titan-obsidian) 28px ); opacity: 0.9; } /* Corner issue-tag used on cards */ .titan-tag{ position: absolute; top: 12px; left: 12px; font-family: var(--titan-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--titan-obsidian); color: var(--titan-blaze); border: 1px solid var(--titan-blaze); padding: 4px 8px; border-radius: var(--titan-radius); z-index: 2; } /* Focus visibility (accessibility) */ .titan-section a:focus-visible, .titan-section button:focus-visible{ outline: 2px solid var(--titan-blaze); outline-offset: 2px; } @media (prefers-reduced-motion: reduce){ .titan-section *{ animation: none !important; transition: none !important; } }