/** Shopify CDN: Minification failed Line 12:0 Unexpected "400" Line 12:74 Unterminated string token **/ /* ========================================================================= ALHC Custom Engraving — Design Tokens Drop in via: ========================================================================= */ 400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"); :root { /* --------------------------------------------------------------------- COLOR — primitives Brand is strictly monochromatic: deep black + brushed-silver gradient. NO decorative accent color. Emphasis comes from luminance — brighter silver / pure white — not hue. Do not add tertiary hues. --------------------------------------------------------------------- */ /* Black field (page background, dark surfaces) */ --color-black: #000000; --color-ink-900: #0A0A0B; /* page bg, slightly off-black */ --color-ink-800: #111113; /* elevated surface (cards) */ --color-ink-700: #17171A; /* hover surface */ --color-ink-600: #1F1F23; /* pressed / nested surface */ /* Brushed silver — the brand color, used as a gradient */ --color-silver-100: #F5F5F5; /* highest highlight */ --color-silver-200: #E0E0E0; --color-silver-300: #C8C8C8; --color-silver-400: #A8A8A8; --color-silver-500: #8A8A8A; /* midtone — wordmark anchor */ --color-silver-600: #6E6E6E; --color-silver-700: #4F4F52; --color-silver-800: #3F3F42; --color-silver-900: #2A2A2D; /* deepest shadow / hairline borders */ /* Steel (cool dark grays, used for borders & disabled) */ --color-steel-700: #2B2B2F; /* default border on dark */ --color-steel-800: #1E1E22; --color-steel-900: #141417; /* Highlight — the system's emphasis color. NOT an accent hue: pure bright silver / near-white. Used where an accent color would normally go (primary CTA, focus rings, hover lifts). Legacy --color-spark tokens alias to these for backwards compatibility. */ --color-highlight: #F2F2F2; --color-highlight-hover: #FFFFFF; --color-highlight-dim: rgba(255, 255, 255, 0.12); /* Aliases — keep old token names working; they all resolve to silver-white */ --color-spark: var(--color-highlight); --color-spark-hover: var(--color-highlight-hover); --color-spark-dim: var(--color-highlight-dim); /* Pure neutrals (text on dark) */ --color-white: #FFFFFF; --color-text-bright: #F2F2F2; --color-text-muted: #9A9A9E; --color-text-dim: #6E6E72; /* --------------------------------------------------------------------- COLOR — semantic tokens (use these in components, not the primitives) --------------------------------------------------------------------- */ --color-bg: var(--color-ink-900); --color-bg-elevated: var(--color-ink-800); --color-bg-elevated-hover: var(--color-ink-700); --color-bg-pressed: var(--color-ink-600); --color-fg: var(--color-text-bright); /* body text */ --color-fg-muted: var(--color-text-muted); /* secondary text */ --color-fg-dim: var(--color-text-dim); /* tertiary, captions */ --color-fg-display: var(--color-silver-200); /* display type sits in here */ --color-fg-inverse: var(--color-ink-900); /* text on silver */ --color-border: var(--color-steel-700); --color-border-strong: var(--color-silver-700); --color-border-spark: var(--color-highlight); /* legacy alias */ --color-border-highlight: var(--color-highlight); --color-accent: var(--color-highlight); /* monochrome: highlight = accent */ --color-accent-fg: var(--color-ink-900); /* dark text on highlight */ /* Functional status colors — used ONLY for status semantics (chips, alerts), never as decorative accents. */ --color-success: #58C28E; /* "Shipped" tag */ --color-warning: #C8C8C8; /* "In Production" — neutral silver */ --color-danger: #E5604D; /* "Error / Needs File" */ /* The signature gradient — apply to display type as background-clip:text */ --gradient-silver: linear-gradient( 180deg, #E6E6E6 0%, #C2C2C2 28%, #8A8A8A 55%, #5A5A5A 80%, #3F3F42 100% ); --gradient-silver-flat: linear-gradient(180deg, #C8C8C8 0%, #8A8A8A 60%, #4F4F52 100%); /* Highlight hover glow (used on primary buttons) — a cool silver halo */ --glow-highlight: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 8px 24px -4px rgba(255, 255, 255, 0.22), 0 0 32px -8px rgba(255, 255, 255, 0.18); --glow-spark: var(--glow-highlight); /* legacy alias */ /* --------------------------------------------------------------------- TYPOGRAPHY — primitives --------------------------------------------------------------------- */ --font-display: "Black Ops One", "Saira Stencil One", "Impact", system-ui, sans-serif; --font-body: "Saira", "Rajdhani", "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Type scale — major-third-ish, tuned for industrial display + technical body */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 44px; --fs-4xl: 60px; --fs-5xl: 84px; --fs-6xl: 120px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; --tracking-tightest: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* default for uppercase display */ --tracking-wider: 0.08em; --tracking-widest: 0.18em; /* tiny eyebrow labels */ /* --------------------------------------------------------------------- SPACING — 4px base --------------------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --------------------------------------------------------------------- RADII — kept tight. Brand is rectilinear. --------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; /* rare, for inputs only */ --radius-pill: 999px; /* status chips ONLY */ --radius-circle: 50%; /* badge / avatar only */ /* --------------------------------------------------------------------- SHADOWS — inset-first; outer drop shadows discouraged on dark --------------------------------------------------------------------- */ --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-inset-hi-strong: inset 0 1px 0 rgba(255, 255, 255, 0.12); --shadow-inset-lo: inset 0 -1px 0 rgba(0, 0, 0, 0.6); --shadow-card: var(--shadow-inset-hi), 0 1px 0 rgba(0,0,0,0.4); --shadow-card-hover: var(--shadow-inset-hi-strong), 0 1px 0 rgba(0,0,0,0.4); --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-spark); /* --------------------------------------------------------------------- MOTION --------------------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --duration-page: 600ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* entrances */ --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1); /* hovers */ --ease-linear: linear; /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --container-max: 1280px; --container-wide: 1440px; --gutter: var(--space-8); --hairline: 1px solid var(--color-border); --hairline-strong: 1px solid var(--color-border-strong); } /* ========================================================================= SEMANTIC TYPOGRAPHY — apply via classes, not raw font-size in components ========================================================================= */ html { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--color-fg); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-body); font-weight: var(--fw-regular); background: var(--color-bg); color: var(--color-fg); } /* Display — uppercase, stencil-feel, silver gradient fill */ .display, h1, h2, .h1, .h2 { font-family: var(--font-display); font-weight: var(--fw-regular); letter-spacing: var(--tracking-wide); line-height: var(--lh-tight); text-transform: uppercase; color: var(--color-fg-display); } .h1, h1 { font-size: var(--fs-5xl); letter-spacing: var(--tracking-tight); } .h2, h2 { font-size: var(--fs-3xl); } .h3, h3 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-normal); color: var(--color-fg); } .h4, h4 { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--color-fg); } /* Eyebrow label — tiny ALL CAPS section markers ("OUR SERVICES") */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-fg-muted); line-height: 1; } /* The signature: silver-gradient display type */ .display-silver { background: var(--gradient-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Body */ p, .body { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--color-fg); text-wrap: pretty; } .body-lg { font-size: var(--fs-md); line-height: var(--lh-normal); } .body-sm { font-size: var(--fs-sm); line-height: var(--lh-normal); } .muted { color: var(--color-fg-muted); } .dim { color: var(--color-fg-dim); } /* Mono — for specs, SKUs, dimensions, date stamps */ .mono, code, kbd { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: var(--tracking-normal); } a { color: var(--color-fg); text-decoration: underline; text-decoration-color: var(--color-silver-700); text-underline-offset: 3px; transition: text-decoration-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out); } a:hover { color: var(--color-spark); text-decoration-color: var(--color-spark); } ::selection { background: var(--color-spark); color: var(--color-ink-900); } html, body, #root { min-height: 100%; } body { background: var(--color-bg); color: var(--color-fg); } * { box-sizing: border-box; } /* Mobile product/quote bottom sheet: cap to the VISIBLE viewport so its top (the X button) never hides behind the phone URL bar. `dvh` tracks the visible area; the `vh` line is a fallback for older browsers. (Embedded mode overrides this inline.) */ .alhc-sheet { max-height: 90vh; max-height: 90dvh; } /* Drawer animations */ @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes slidein { from { transform: translateX(100%); } to { transform: translateX(0); } } /* Mobile bottom-sheet animations (used by the responsive mobile layout) */ @keyframes m-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes m-slideup { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Subtle laser-trace line under the header on first load */ @keyframes laser-trace { from { width: 0; opacity: 1; } to { width: 100%; opacity: 0; } } /* Hide native scrollbar on category bar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-steel-700); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-silver-700); } /* Selection */ ::selection { background: var(--color-highlight); color: var(--color-ink-900); } a { text-decoration: none; } a:hover { color: var(--color-highlight-hover); } button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 2px; }