/* ========================================================================= PT Gading Mas Utama — Design Tokens Industrial engineering • Indonesia • Est. 2004 ========================================================================= */ /* ---- Webfonts ---------------------------------------------------------- */ /* Headlines: Oswald — closest free match to the condensed bold sans used on brochure headers ("ABOUT COMPANY", "OUR SERVICES", "PT. GADING MAS UTAMA"). Body: Open Sans — clean humanist sans, neutral, professional. These are substitutions for the original print typefaces; replace with the actual brand fonts if files become available. Loaded via a discoverable in each page's , not a CSS @import. */ :root { /* ---- Brand color: a single saturated industrial red ---------------- */ /* Sampled from the brochure logo and ribbon shapes. The palette is intentionally tight: red + neutrals. No secondary brand hue. */ --gmu-red: #E63323; /* primary brand red */ --gmu-red-700: #C42718; /* deep red, ribbon shadows, hover */ --gmu-red-800: #9E1C10; /* darkest, gradient terminus */ --gmu-red-500: #EC4F3F; /* lighter ribbon edge / hover lift */ --gmu-red-100: #FCE6E2; /* tint backgrounds, badges */ --gmu-red-50: #FDF4F2; /* subtle wash */ /* ---- Neutrals ------------------------------------------------------- */ --gmu-ink: #1A1A1A; /* body copy */ --gmu-ink-2: #3D3D3D; /* secondary copy */ --gmu-ink-3: #6B6B6B; /* captions, axis labels */ --gmu-ink-4: #A3A3A3; /* disabled, hairlines */ --gmu-paper: #FFFFFF; /* base canvas */ --gmu-paper-2: #F7F7F7; /* alternate stripe / panel */ --gmu-paper-3: #EDEDED; /* card hover, divider blocks */ --gmu-line: #E5E5E5; /* hairlines and dividers */ /* ---- Semantic ------------------------------------------------------- */ --gmu-fg-1: var(--gmu-ink); --gmu-fg-2: var(--gmu-ink-2); --gmu-fg-3: var(--gmu-ink-3); --gmu-fg-inverse: #FFFFFF; --gmu-bg-1: var(--gmu-paper); --gmu-bg-2: var(--gmu-paper-2); --gmu-accent: var(--gmu-red); --gmu-accent-hover: var(--gmu-red-700); --gmu-on-accent: #FFFFFF; --gmu-success: #1F8A4C; --gmu-warning: #D9881A; --gmu-danger: var(--gmu-red-700); /* ---- Signature gradient (used on banner ribbons) -------------------- */ --gmu-ribbon: linear-gradient(90deg, #EC4F3F 0%, #E63323 45%, #9E1C10 100%); --gmu-ribbon-radial: radial-gradient(120% 200% at 15% 50%, #EC4F3F 0%, #C42718 60%, #7C140A 100%); /* ---- Type families ------------------------------------------------- */ --gmu-font-display: 'Oswald', 'Tw Cen MT Condensed', 'Roboto Condensed', 'Impact', system-ui, sans-serif; --gmu-font-body: 'Open Sans', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif; --gmu-font-label: 'Open Sans', system-ui, sans-serif; /* italic for section labels */ --gmu-font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* ---- Type scale (8/12/16/24-step rhythm) --------------------------- */ --gmu-fs-12: 12px; --gmu-fs-14: 14px; --gmu-fs-16: 16px; --gmu-fs-18: 18px; --gmu-fs-20: 20px; --gmu-fs-24: 24px; --gmu-fs-28: 28px; --gmu-fs-32: 32px; --gmu-fs-40: 40px; --gmu-fs-48: 48px; --gmu-fs-56: 56px; --gmu-fs-72: 72px; /* ---- Spacing (4-base) ---------------------------------------------- */ --gmu-space-1: 4px; --gmu-space-2: 8px; --gmu-space-3: 12px; --gmu-space-4: 16px; --gmu-space-5: 20px; --gmu-space-6: 24px; --gmu-space-8: 32px; --gmu-space-10: 40px; --gmu-space-12: 48px; --gmu-space-16: 64px; --gmu-space-20: 80px; --gmu-space-24: 96px; /* ---- Radii — small. The brand is industrial, not soft. ------------- */ --gmu-radius-0: 0; --gmu-radius-1: 2px; /* default for inputs, buttons */ --gmu-radius-2: 4px; /* cards */ --gmu-radius-3: 8px; /* large surfaces only */ --gmu-radius-pill: 999px; /* ---- Shadows — restrained, industrial documents not glassy UI ----- */ --gmu-shadow-1: 0 1px 2px rgba(20,20,20,.08); --gmu-shadow-2: 0 2px 6px rgba(20,20,20,.10), 0 1px 2px rgba(20,20,20,.06); --gmu-shadow-3: 0 8px 24px rgba(20,20,20,.12), 0 2px 6px rgba(20,20,20,.06); --gmu-shadow-red: 0 6px 18px rgba(230,51,35,.28); /* ---- Motion -------------------------------------------------------- */ --gmu-ease-out: cubic-bezier(.2, .8, .2, 1); --gmu-ease-in-out: cubic-bezier(.65, 0, .35, 1); --gmu-dur-fast: 120ms; --gmu-dur-base: 180ms; --gmu-dur-slow: 300ms; /* ---- Borders ------------------------------------------------------- */ --gmu-border-thin: 1px solid var(--gmu-line); --gmu-border-red: 2px solid var(--gmu-red); } /* ---- Base + semantic element styles ----------------------------------- */ html, body { font-family: var(--gmu-font-body); font-size: 16px; color: var(--gmu-fg-1); background: var(--gmu-bg-1); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .gmu-h1 { font-family: var(--gmu-font-display); font-weight: 700; font-size: var(--gmu-fs-56); line-height: 1.05; letter-spacing: 0.005em; color: var(--gmu-red); text-transform: uppercase; margin: 0 0 var(--gmu-space-4); } h2, .gmu-h2 { font-family: var(--gmu-font-display); font-weight: 700; font-size: var(--gmu-fs-40); line-height: 1.1; letter-spacing: 0.01em; color: var(--gmu-red); text-transform: uppercase; margin: 0 0 var(--gmu-space-3); } h3, .gmu-h3 { font-family: var(--gmu-font-display); font-weight: 600; font-size: var(--gmu-fs-28); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; color: var(--gmu-ink); margin: 0 0 var(--gmu-space-2); } h4, .gmu-h4 { font-family: var(--gmu-font-display); font-weight: 500; font-size: var(--gmu-fs-20); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gmu-ink); margin: 0 0 var(--gmu-space-2); } /* "Section label" — the italic ribbon text used over brochure ribbons ("Field Instruments", "Combustion Diagnosis"). Always pairs with red. */ .gmu-label { font-family: var(--gmu-font-label); font-style: italic; font-weight: 700; font-size: var(--gmu-fs-18); letter-spacing: 0.005em; color: var(--gmu-on-accent); } p, .gmu-body { font-size: var(--gmu-fs-16); line-height: 1.6; color: var(--gmu-fg-1); margin: 0 0 var(--gmu-space-4); } .gmu-body-sm { font-size: var(--gmu-fs-14); line-height: 1.55; } .gmu-caption { font-size: var(--gmu-fs-12); line-height: 1.4; color: var(--gmu-fg-3); letter-spacing: 0.02em; } .gmu-eyebrow { font-family: var(--gmu-font-display); font-weight: 600; font-size: var(--gmu-fs-12); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gmu-red); } code, pre, .gmu-mono { font-family: var(--gmu-font-mono); font-size: 14px; } /* ---- Signature ribbon (the angled red parallelogram) ----------------- */ /* Use the .gmu-ribbon class on a container to render a red banner with a slanted cut on the right edge — the brochure's recurring header chrome. */ .gmu-ribbon { position: relative; display: inline-block; padding: 10px 36px 10px 16px; background: var(--gmu-ribbon); color: var(--gmu-on-accent); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); font-family: var(--gmu-font-label); font-style: italic; font-weight: 700; } .gmu-ribbon--lg { padding: 18px 56px 18px 28px; clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); font-family: var(--gmu-font-display); font-style: normal; font-size: var(--gmu-fs-32); text-transform: uppercase; letter-spacing: 0.02em; } /* ---- Hexagon — the brand's primary container shape ------------------- */ /* Use clip-path or the polygon directly. */ .gmu-hex { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); } .gmu-hex-border { /* Use as an outer wrapper with a red border */ --b: 2px; background: var(--gmu-red); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); padding: var(--b); } .gmu-hex-border > * { background: var(--gmu-paper); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }