/* ========================================================================== GNC SG — Design Tokens ========================================================================== */ :root { /* ---- Brand palette ---- */ --color-primary: #EC1C25; --color-primary-dark: #A30000; --color-primary-light: #FF1A1A; --color-secondary: #1A1A1A; --color-secondary-light: #333333; --color-success: #2E7D32; --color-success-light: #4CAF50; --color-warning: #F57C00; --color-error: #D32F2F; /* ---- Neutrals ---- */ --color-white: #FFFFFF; --color-grey-50: #FAFAFA; --color-grey-100: #F5F5F5; --color-grey-200: #EEEEEE; --color-grey-300: #E0E0E0; --color-grey-400: #BDBDBD; --color-grey-500: #9E9E9E; --color-grey-600: #757575; --color-grey-700: #616161; --color-grey-800: #424242; --color-grey-900: #212121; --color-black: #000000; /* ---- Text ---- */ --color-text: var(--color-grey-900); --color-text-muted: var(--color-grey-600); --color-text-light: var(--color-grey-500); --color-text-inverse: var(--color-white); /* Header/menu icons. The mobile icon set (design/mobile/icon/*.svg) paints black at opacity .6; this is that colour flattened against white, so the icons can be filled directly instead of being faded as a whole. */ --color-icon: #666666; /* ---- Surfaces ---- */ --color-bg: var(--color-white); --color-bg-alt: var(--color-grey-50); /* Warm tint used for full-bleed feature bands (sampled from the designs — e.g. the "Shop This Article" band in Article.png). */ --color-bg-muted: #F6F3F3; --color-bg-dark: var(--color-secondary); /* The footer is a mid grey, not the near-black of --color-bg-dark. Sampled at #515151 in both footer.png and mobile/footer/footer.png; the hairline above the copyright line is #696969 and the accordion rules #5B5B5B. */ --color-footer-bg: #515151; --color-footer-rule: #5B5B5B; --color-footer-rule-strong: #696969; --color-border: var(--color-grey-300); --color-border-light: var(--color-grey-200); /* Cooler hairline used on card outlines (sampled from product-card.png). */ --color-border-subtle: #E5E7EB; /* ---- Typography ---- */ /* Noto Sans is loaded from Google Fonts — see the external stylesheet in the "global" library in gnc_sg.libraries.yml. The fallbacks are what shows during the swap and if the CDN is unreachable. */ --font-family-base: 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-family-heading: 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 1.75rem; /* 28px */ --font-size-3xl: 2rem; /* 32px */ --font-size-4xl: 2.5rem; /* 40px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 900; --line-height-tight: 1.2; --line-height-base: 1.5; --line-height-relaxed: 1.75; /* ---- Spacing scale (8px base) ---- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ---- Layout ---- */ /* The designs are drawn at a 1920px viewport, where content sits between x=260 and x=1660 — a 1400px content box, centred, with no inner padding of its own. .container is border-box and carries --container-padding on each side, so the max-width has to be that 1400px plus both gutters for the content to land on the design's edges. Measured consistently across Home.png, footer.png and Education Hub.png. */ --container-max: 1432px; /* 1400px of content + 2 × 16px gutter */ /* 950px of content plus the 2 x 16px gutter. Measured off the two designs that use it — FAQ.png and T&C.png both run their column x488-1438 in a 1928px frame, centred. It was 800px, which rendered the FAQ 182px narrower than drawn. Only .container--narrow reads this. */ --container-narrow: 982px; --container-padding: var(--space-4); --grid-gap: var(--space-6); --sidebar-width: 280px; --header-height: 72px; /* 64px, not 56 — the mobile mocks put the header border at y=63 with the logo centred in the band above it (home-mobile.png and every other design/mobile screen). */ --header-height-mobile: 64px; /* ---- Borders ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; --border-width: 1px; /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); /* ---- Transitions ---- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ---- Z-index scale ---- */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; /* ---- Icons ---- The CTA arrow — "SHOP NOW →", "READ ARTICLE →". This is design/icon/arrow_icon.svg verbatim, inlined: a filled path on a 12x12 viewBox, with the arrow itself occupying 9.86 x 3.95 of it and a 1.51-thick shaft. Not the "→" character, whose length and weight are whatever the loaded font decides — Noto Sans draws it short and heavy next to bold caps. The 12x12 box is mostly padding, and that padding is load-bearing: it is what positions the arrow, so the viewBox is kept whole rather than cropped to the path. Applied as a mask rather than a background so the arrow takes its colour from currentColor: the same token is white on the red SHOP NOW button and red on the READ ARTICLE link. Masking an SVG image keys on alpha, so the path's own fill colour is irrelevant — only its coverage matters. */ --icon-arrow-right: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M7.25902%208.18592C7.32435%207.98058%207.40368%207.77992%207.49702%207.58391C7.59968%207.37858%207.72101%207.17325%207.86102%206.96791H0.791016V5.45591H7.87502C7.73502%205.25058%207.61368%205.04991%207.51102%204.85391C7.41768%204.64858%207.33835%204.44325%207.27302%204.23792H8.71501C9.28434%204.91925%209.92835%205.44191%2010.647%205.80591V6.63191C9.93768%206.97725%209.29368%207.49525%208.71501%208.18592H7.25902Z'/%3E%3C/svg%3E"); } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } }