/* ========================================================================== ICanLearnProgram International — BRAND THEME -------------------------------------------------------------------------- THIS IS THE ONE FILE TO EDIT FOR BRANDING AND COLOUR. Change a value here and it changes everywhere on the site. Nothing else needs touching. Every value is a plain colour, size or font name — you can safely edit the part after the colon and leave the rest alone. Read EDITING.md in the project root for a step-by-step guide. ========================================================================== */ :root { /* --------------------------------------------------------------- 1. BRAND COLOURS (taken from the gold ICLP circle logo) --------------------------------------------------------------- */ --gold: #c9a227; /* the logo gold — main brand colour */ --gold-bright: #f0ce6e; /* lighter gold, for text on dark and glows */ --gold-deep: #8a6a2f; /* darker gold, for lines and edges */ /* --------------------------------------------------------------- 2. BASE COLOURS "Ink" is the warm near-black used behind the logo. "Parchment" is the warm paper colour used for reading sections. --------------------------------------------------------------- */ --ink: #16110c; /* main dark background */ --ink-deep: #0e0b07; /* darkest dark, footer */ --ink-soft: #241c14; /* raised panels on dark */ --parchment: #fbf4e6; /* main light background */ --parchment-2: #f4e9d4; /* alternate light background */ --paper: #fffdf8; /* cards on light backgrounds */ /* --------------------------------------------------------------- 3. TEXT COLOURS --------------------------------------------------------------- */ --on-dark: #f6efdf; /* body text on dark backgrounds */ --on-dark-mute: #c6b99f; /* quieter text on dark */ --on-light: #241c14; /* body text on light backgrounds */ --on-light-mute: #6b5c48; /* quieter text on light */ /* --------------------------------------------------------------- 4. PATHWAY ACCENTS One colour per learning pathway. These tint the photo cards and the little pathway labels. Swap freely — the layout won't move. --------------------------------------------------------------- */ --acc-robotics: #e8873a; /* mango — robotics & making */ --acc-arts: #d2503f; /* clay — visual arts & design */ --acc-music: #b8437a; /* rose — music & performance */ --acc-science: #1f8577; /* teal — science & lab skills */ --acc-sport: #4c76b8; /* sky — sport & movement */ --acc-digital: #6e9a44; /* leaf — coding & digital skills */ --acc-careers: #7a5cc4; /* violet — careers & guidance */ /* --------------------------------------------------------------- 5. TYPEFACES Loaded from Google Fonts in index.html . If you change a family name here, change the link in index.html to match. --------------------------------------------------------------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Karla', 'Helvetica Neue', Arial, sans-serif; /* --------------------------------------------------------------- 6. SHAPE & DEPTH --------------------------------------------------------------- */ --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-xl: 40px; --shadow-soft: 0 10px 30px rgba(22, 17, 12, 0.10); --shadow-card: 0 18px 50px rgba(22, 17, 12, 0.16); --shadow-lift: 0 30px 70px rgba(22, 17, 12, 0.26); --shadow-dark: 0 30px 80px rgba(0, 0, 0, 0.55); --hairline-dark: rgba(201, 162, 39, 0.22); /* borders on dark */ --hairline-light: rgba(36, 28, 20, 0.12); /* borders on light */ /* --------------------------------------------------------------- 7. RHYTHM Section padding and the maximum width of the page content. --------------------------------------------------------------- */ --page-max: 1240px; --page-gutter: clamp(20px, 5vw, 64px); --section-pad: clamp(64px, 9vw, 132px); /* --------------------------------------------------------------- 8. MOTION Set --ease-out to "linear" and the durations to 0s to flatten all animation. (Visitors who ask their device for reduced motion already get a still version automatically.) --------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 0.18s; --t-mid: 0.4s; --t-slow: 0.9s; }