/* ============================================================ global.css – SAR Marine Design tokens · reset · base typography Load order: first in — all other site CSS builds on :root ============================================================ */ /* ── 1. CSS CUSTOM PROPERTIES ─────────────────────────────── */ :root { /* Brand Colors */ --color-orange: #e05c0b; --color-orange-dark: #c04e08; --color-orange-light: #f97316; --color-orange-pale: #fff4ee; /* Neutral Scale */ --color-ink: #0f1117; --color-ink-90: #1a1d26; --color-ink-80: #252836; --color-ink-60: #3f4455; --color-ink-40: #6b7280; --color-ink-20: #9ca3af; --color-ink-10: #d1d5db; --color-ink-05: #f3f4f6; --color-white: #ffffff; /* Semantic / UI */ --color-bg: #ffffff; --color-bg-alt: #f7f8fa; --color-bg-dark: #0e1220; --color-bg-dark-2: #141829; --color-border: #e5e7eb; --color-border-dark: rgba( 255, 255, 255, 0.08 ); /* FIX: was missing – used in footer.css */ /* Status Colors */ --color-success: #16a34a; --color-success-bg: #dcfce7; --color-error: #dc2626; --color-error-bg: #fee2e2; /* Typography — must match Google Fonts link in common/header.php */ --font-display: "Roboto", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif; /* Responsive breakpoints (reference for @media; not used in clamp()) */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1200px; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.6; --leading-loose: 1.75; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Layout */ --container-max: 1280px; --container-pad: clamp(1rem, 4vw, 2rem); --section-pad-y: clamp(var(--space-12), 6vw, var(--space-20)); --section-pad-y-sm: clamp(var(--space-8), 4vw, var(--space-12)); --card-radius: var(--radius-xl); --card-border: 1px solid var(--color-border); --card-shadow: var(--shadow-sm); --card-hover-shadow: var(--shadow-md); --field-height: 46px; --button-height: 44px; /* Border Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Shadows */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.07); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); --shadow-orange: 0 4px 20px rgba(224, 92, 11, 0.28); /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; /* Z-index scale */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-drawer: 400; --z-toast: 500; --z-loader: 9999; --z-fab: 250; } /* ── 2. MODERN RESET ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; tab-size: 4; font-size: 16px; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-ink); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-x: clip; } ul, ol { list-style: none; } img, video { max-width: 100%; height: auto; display: block; } input, button, textarea, select { font: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; } b, strong { font-weight: 700; } address { font-style: normal; } svg { display: block; flex-shrink: 0; max-width: 100%; height: auto; } canvas { max-width: 100%; height: auto; } /* ── 3. TYPOGRAPHY BASE ─────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: var(--leading-tight); color: var(--color-ink); } h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl)); } h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); } h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); } h4 { font-size: clamp(var(--text-lg), 2vw, var(--text-2xl)); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-md); } p { line-height: var(--leading-loose); color: var(--color-ink-60); } @media (max-width: 768px) { :root { --container-pad: clamp(1rem, 5vw, 1.5rem); --section-pad-y: clamp(var(--space-10), 8vw, var(--space-16)); --section-pad-y-sm: clamp(var(--space-6), 6vw, var(--space-10)); } } /* ── 4. ACCESSIBILITY & SELECTION ───────────────────────── */ :focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--color-orange); color: var(--color-white); } /* ── 5. CUSTOM SCROLLBAR ────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--color-ink-05); } ::-webkit-scrollbar-thumb { background: var(--color-ink-20); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-orange); } /* Touch targets: real controls only (avoid forcing every text link to 44×44) */ @media (max-width: 768px) { .si-btn, .sh-btn, .hp-arrow, .pc-card__inquiry, .sar-contact-submit, .listing-pagination .page-item .page-link, .sf-scroll-top, .sh-hamburger, .sh-search__btn, .sh-drawer__close, .sh-drawer__search button[type="submit"], button.sh-mob-toggle { min-height: 44px; min-width: 44px; } } /* Prevent aggressive ellipsis on important navigation text */ .sh-nav__link, .sh-mega__heading, .sh-mega__list li a, .hp-cat-card__title, .hp-cat-card__desc { white-space: normal; word-break: break-word; overflow-wrap: break-word; } /* Ensure product names wrap properly */ .pc-card__name { white-space: normal; word-break: break-word; }