/* ========================================================================== STAR-K — palette.css — "The Seal" (shared by star-k.in / .my / .ph / .id) THE ONLY FILE THAT MAY CONTAIN A COLOUR VALUE OR NAME A FONT. stark.css is layout only: every colour and family reaches it through var(). tools/build.py reads the --font-* families below and builds the Google Fonts from them (GOOGLE_FONTS_SPEC in build.py), so a font change is one edit. Experimental (Jaison, 3 Oct 2026: "keep the navy, the logo"): - Navy unchanged: --ink #16204A, --ink-deep #0C1231, --dark #0B1136. - Accents (Jaison, 3 Oct 2026): sage as the main accent, antique brass as the metal (replacing champagne), and one hint colour per country - here hibiscus red (the hibiscus (bunga raya), Malaysia's national flower); star-k.in uses saffron. - Grounds move from cool grey to a warm ivory "paper", so navy and champagne read as ink and foil on stock - the language of a certificate. - Type: the original fonts (Jaison, 3 Oct 2026) - Poppins for headings and body, Montserrat for the menu, exactly as V1.x and the live site. Token names from V1.x are kept (some as aliases) so every page, drawing and tools/contrast.py keep working. ========================================================================== */ :root{ /* --- Ink ---------------------------------------------------------------- */ --ink: #16204A; /* headings - the STAR-K navy */ --ink-deep: #0C1231; /* footer, topbar, deepest surfaces */ --body: #3B4560; /* body copy - 9.6:1 on paper */ --muted: #59627F; /* eyebrows, captions, labels - 5.9:1 on paper */ --muted-soft: #AAB4CC; /* secondary text on navy */ /* --- Metal (champagne) -------------------------------------------------- */ --gold: #A88A5A; /* antique brass - rules, rings, icons; never text on light (was champagne #CFC3A6) */ --gold-bright: #D9785C; /* hibiscus red - this site's hint colour: the accent word and small hints on navy */ --gold-ink: #4A6656; /* deep sage - eyebrows and accent words on light grounds (6.0:1 on paper) */ --gold-soft: #E7EEE8; /* sage wash - icon chips, selected choices */ --accent-on-dark: #D9785C; --sage: #8FA89A; /* the main accent */ --sage-deep: #3E5A4B; /* icon strokes on the sage wash */ --saffron: #D9785C; /* hint colour - hibiscus red for Malaysia; the token keeps its India name so the stylesheet is shared */ /* The one interactive blue: focus rings and plain text links only. */ --accent: #1F4FBF; --accent-ink: #FFFFFF; --accent-dim: #163B93; /* Buttons: navy on light grounds, champagne on navy. */ --btn-bg: var(--ink); --btn-bg-hover: var(--ink-deep); --btn-ink: #FFFFFF; --btn-dark-bg: var(--canvas); /* cream button on navy - the page's own ivory (Jaison, was sage) */ --btn-dark-hover: #FFFFFF; --btn-dark-ink: var(--ink-deep); /* --- Navy bands --------------------------------------------------------- */ --dark: #0B1136; --dark-mid: #10184A; --dark-warm: #1B2A5C; /* far end of the hero gradient */ --dark-tint: #141C4C; /* a card on navy */ --line-dark: #283166; /* hairlines on navy */ /* --- Paper grounds ------------------------------------------------------ */ --bg: #FFFFFF; /* pure white - surfaces */ --surface: #FFFFFF; --canvas: #FBFAF6; /* the page: warm ivory paper */ --bg-tint: #EEF2EC; /* the alternate band - a breath of sage */ --bg-tile: #EEEAE0; /* tiles / plates - one step deeper */ --bg-cool: #EEF2EC; /* --- Hairlines ---------------------------------------------------------- */ --line: #DCE3DA; --line-soft: #E7ECE4; --line-strong:#C6D0C3; /* --- Derived (arithmetic, not taste) ------------------------------------ */ --icon-tint-gold: color-mix(in srgb, var(--gold) 16%, transparent); --icon-tint-gold-deep: color-mix(in srgb, var(--gold) 30%, transparent); --icon-tint-gold-line: color-mix(in srgb, var(--sage) 55%, transparent); --icon-tint-accent: color-mix(in srgb, var(--accent) 12%, transparent); --icon-tint-accent-deep: color-mix(in srgb, var(--accent) 20%, transparent); --icon-tint-accent-line: color-mix(in srgb, var(--accent) 28%, transparent); --gold-a10: color-mix(in srgb, var(--gold) 10%, transparent); --gold-a18: color-mix(in srgb, var(--gold) 18%, transparent); --gold-a30: color-mix(in srgb, var(--gold) 30%, transparent); --gold-a55: color-mix(in srgb, var(--gold) 55%, transparent); --white-a06: color-mix(in srgb, #FFFFFF 6%, transparent); --white-a12: color-mix(in srgb, #FFFFFF 12%, transparent); --ink-a06: color-mix(in srgb, var(--ink) 6%, transparent); --overlay: color-mix(in srgb, var(--dark) 66%, transparent); --overlay-soft: color-mix(in srgb, var(--dark) 34%, transparent); --bg-glass: color-mix(in srgb, var(--canvas) 80%, transparent); --line-glass: color-mix(in srgb, var(--line) 70%, transparent); --glass-card: color-mix(in srgb, var(--bg) 72%, transparent); --glass-card-line: color-mix(in srgb, var(--bg) 85%, transparent); --shadow-ambient: color-mix(in srgb, var(--dark) 5%, transparent); --shadow: color-mix(in srgb, var(--dark) 9%, transparent); --shadow-lift: color-mix(in srgb, var(--dark) 16%, transparent); --shadow-deep: color-mix(in srgb, var(--dark) 26%, transparent); --shadow-night: color-mix(in srgb, #000000 45%, transparent); /* --- Gradients ---------------------------------------------------------- */ --grad-hero: radial-gradient(120% 140% at 88% 0%, var(--dark-warm) 0%, var(--dark-mid) 38%, var(--dark) 72%); --grad-band: linear-gradient(160deg, var(--dark-mid) 0%, var(--dark) 100%); --grad-rule: linear-gradient(90deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 0%, transparent) 100%); --grad-foil: linear-gradient(115deg, #7D6640 0%, var(--gold) 40%, var(--saffron) 52%, var(--gold) 64%, #7D6640 100%); /* --- Certification marks ------------------------------------------------ */ --mark-ink: #111111; /* the marks keep their own near-black on light grounds */ /* --- Artwork (content/art/*.svg resolve these) --------------------------- */ --art-ink: var(--ink); --art-line: #B9B09C; --art-fill: #EEE9DE; --art-fill-2: #F6F3EC; --art-accent: var(--ink); --art-gold: var(--gold); --sage-a22: color-mix(in srgb, var(--sage) 22%, transparent); --art-paper: var(--bg); /* ====================================================================== TYPE ====================================================================== */ --font-display: var(--font-head); --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-nav: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --t-display: clamp(46px, 2.2rem + 3.6vw, 92px); /* home hero */ --t-h1: clamp(40px, 2rem + 2.6vw, 72px); --t-h1-lh: 1.04; --t-h2: clamp(32px, 1.55rem + 1.9vw, 54px); --t-h2-lh: 1.08; --t-h3: clamp(22px, 1.15rem + .55vw, 28px); --t-h4: 18px; --t-h4-lh: 1.35; --t-lead: clamp(18px, 1rem + .4vw, 21px); --t-lead-lh: 1.62; --t-body: 17px; --t-body-lh: 1.72; --t-small: 15.5px; --t-eyebrow: 12.5px; --w-light: 300; --w-display: 600; /* Poppins semibold for h1/h2, as on the live site */ --w-regular: 400; --w-medium: 500; --w-semi: 600; /* --- Spacing ------------------------------------------------------------ */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 136px; /* --- Metrics ------------------------------------------------------------ */ --maxw: 1240px; --maxw-wide: 1400px; --maxw-text: 700px; --gutter: clamp(20px, 4.4vw, 48px); --band-y: clamp(72px, 8vw, 136px); --radius: 12px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill:100px; --icon-chip-sm: 40px; --icon-chip-md: 52px; --icon-chip-lg: 68px; /* --- Motion ------------------------------------------------------------- */ --ease-out: cubic-bezier(.2,.7,.2,1); --ease-standard: .35s cubic-bezier(.2,.7,.2,1); }