/* ========================================================================== AI UNLEASHED ACADEMY — DESIGN SYSTEM Single stylesheet for every Academy page (marketing + member portal). Source of truth: aiu-academy-MASTER-BRIEF.md Palette: GHL brandkit — Space Blue, Nurture Blue, Background Blue, Capture Yellow, Close Green. Type: Space Grotesk (headlines) + Inter (body). Every class used on ghl-academy-homepage.html is preserved verbatim, so existing markup can be pasted into a new page without edits. Everything below "PART 2" is new and exists to build interior pages (course pages, shelf hubs, dashboard, verify, login). --------------------------------------------------------------------- CONTENTS PART 1 — FOUNDATION 01 Tokens 02 Reset & base 03 Layout 04 Typography helpers 05 Buttons 06 Tags, pills & badges PART 2 — CHROME (on every page) 07 Top stripe 08 Nav (desktop + mobile drawer) 09 Footer 10 Colorbar PART 3 — PAGE HEADS 11 Hero (marketing) 12 Page header (interior) 13 Breadcrumbs 14 Section head PART 4 — MARKETING BLOCKS 15 Shelves 16 Steps & moat banner 17 Access card 18 Value stack 19 Price tiers 20 Path cards 21 Proof / testimonials 22 Coach 23 CTA strip PART 5 — ACADEMY BLOCKS (portal) 24 Course cards 25 Curriculum / module accordion 26 Media & video 27 Progress 28 Data table 29 Callouts, alerts & disclosure 30 FAQ 31 Forms 32 Certificate & verify 33 Empty state PART 6 — SYSTEM 34 Utilities 35 Responsive 36 Motion & print ========================================================================== */ /* ========================================================================== PART 1 — FOUNDATION ========================================================================== */ /* 01 TOKENS ------------------------------------------------------------- */ :root{ /* Brand — do not add colors outside this set without Fer's sign-off */ --space:#07223D; /* Space Blue — primary dark */ --space-2:#0A2E52; /* raised surface on dark */ --space-3:#0E3A66; /* raised surface, one step further */ --space-4:#05192D; /* footer / deepest */ --blue:#2896FB; /* Nurture Blue — accent on dark */ --blue-bg:#095DC3; /* Background Blue — accent on light */ --yellow:#FFD000; /* Capture Yellow — primary CTA */ --green:#17D94B; /* Close Green — success / Go Pro */ --teal:#20EDF1; /* reserved */ /* Neutrals */ --white:#FFFFFF; --paper:#F4F8FD; /* page background */ --tint:#E7F3FE; /* soft blue fill */ --line:#E1EAF3; /* border on light */ --line-2:#EDF2F7; /* hairline on light */ --ink-line:rgba(255,255,255,0.10); /* border on dark */ --body:#4A5A6B; /* body copy on light */ --body-2:#5B6B7B; /* secondary copy on light */ --mute:#8FA6BD; /* tertiary on dark */ --mute-2:#B9CBDD; /* secondary on dark */ --disabled:#A9B7C5; /* Type */ --font-head:'Space Grotesk',system-ui,sans-serif; --font-body:'Inter',system-ui,-apple-system,sans-serif; /* Radius */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-pill:999px; /* Elevation */ --shadow-card:0 40px 80px -50px rgba(7,34,61,0.35); --shadow-soft:0 18px 40px -28px rgba(7,34,61,0.30); /* Rhythm — section padding. Change here, every page follows. */ --sec-y:100px; --sec-y-sm:64px; --ease:cubic-bezier(0.32,0.72,0,1); } /* 02 RESET & BASE ------------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:var(--font-body); background:var(--paper); color:var(--space); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;letter-spacing:-0.02em;line-height:1.1;} a{text-decoration:none;color:inherit;} img{max-width:100%;display:block;} button{font:inherit;} /* Visible keyboard focus — required, the homepage has none today. */ :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px;} /* Skip link — first element in on every page. */ .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--yellow);color:var(--space);font-weight:700; padding:12px 20px;border-radius:0 0 var(--r-sm) 0; } .skip:focus{left:0;} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* 03 LAYOUT ------------------------------------------------------------- */ .wrap{max-width:1180px;margin:0 auto;padding:0 24px;} .wrap.narrow{max-width:860px;} .wrap.wide{max-width:1320px;} section{padding:var(--sec-y) 0;} /* Anchor links land below the sticky nav instead of under it. */ section[id],header[id],div[id]{scroll-margin-top:96px;} section.tight{padding:var(--sec-y-sm) 0;} section.flush{padding:0;} /* Surface variants — put one on any
*/ .on-dark{background:var(--space);color:#fff;} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff;} .on-dark p{color:var(--mute-2);} .on-dark .sec-head .tag{color:var(--yellow);} .on-paper{background:var(--paper);} .on-white{background:#fff;} /* Generic grids */ .grid{display:grid;gap:22px;} .grid.g2{grid-template-columns:repeat(2,1fr);} .grid.g3{grid-template-columns:repeat(3,1fr);} .grid.g4{grid-template-columns:repeat(4,1fr);} /* 04 TYPOGRAPHY HELPERS ------------------------------------------------- */ .y{color:var(--yellow);} .b{color:var(--blue);} .g{color:var(--green);} .lead{font-size:18px;color:var(--body-2);line-height:1.7;} .on-dark .lead{color:var(--mute-2);} .fine-print{font-size:12.5px;line-height:1.6;color:var(--body-2);} /* Long-form prose — course descriptions, legal pages, lesson notes */ .prose{max-width:70ch;} .prose p{margin-bottom:18px;font-size:16px;color:var(--body);line-height:1.75;} .prose h2{font-size:28px;margin:38px 0 14px;} .prose h3{font-size:21px;margin:30px 0 10px;} .prose ul,.prose ol{margin:0 0 18px 22px;} .prose li{margin-bottom:9px;font-size:16px;color:var(--body);} .prose a{color:var(--blue-bg);font-weight:600;border-bottom:1px solid rgba(9,93,195,0.3);} .prose a:hover{border-bottom-color:var(--blue-bg);} .prose blockquote{ border-left:4px solid var(--yellow);padding:6px 0 6px 20px;margin:0 0 18px; font-size:17px;color:var(--space);font-weight:500; } .prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px; background:var(--tint);padding:2px 6px;border-radius:5px;color:var(--blue-bg); } /* 05 BUTTONS ------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--yellow);color:var(--space); font-weight:700;font-size:15px;border-radius:10px;padding:14px 26px; border:none;cursor:pointer;text-align:center; transition:transform .4s var(--ease),background .3s; } .btn:hover{transform:translateY(-2px);background:#FFDA33;} .btn.ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,0.25);} .btn.ghost:hover{background:rgba(255,255,255,0.08);} .btn.ghost-d{background:transparent;color:var(--space);border:1.5px solid #CBD8E5;} .btn.ghost-d:hover{background:var(--paper);border-color:var(--space);} .btn.blue{background:var(--blue);color:#fff;} .btn.blue:hover{background:#3AA2FF;} .btn.green-btn{background:var(--green);color:#0B3D1B;} .btn.green-btn:hover{background:#14c443;} .btn.lg{font-size:16px;padding:16px 32px;} .btn.sm{font-size:13.5px;padding:10px 18px;border-radius:9px;} .btn.block{width:100%;} .btn[disabled],.btn.is-disabled{ background:var(--line);color:var(--disabled);cursor:not-allowed; transform:none;pointer-events:none; } /* Text link with a sliding arrow — use → inside */ .link-arrow{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--blue-bg);} .on-dark .link-arrow{color:#fff;} .link-arrow .arw{transition:transform .4s var(--ease);} .link-arrow:hover .arw{transform:translateX(4px);} /* 06 TAGS, PILLS & BADGES ----------------------------------------------- */ /* Uppercase eyebrow, used above headings */ .tag{ font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase; color:var(--blue-bg);margin-bottom:14px; } .on-dark .tag{color:var(--yellow);} /* Small status pill */ .pill{ display:inline-flex;align-items:center;gap:7px; font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase; padding:5px 12px;border-radius:var(--r-pill); } .pill.platform{background:rgba(9,93,195,0.10);color:var(--blue-bg);} .pill.service{background:rgba(255,208,0,0.20);color:#7A6300;} .pill.new{background:var(--yellow);color:var(--space);} .pill.done{background:rgba(23,217,75,0.14);color:#0B7A28;} .pill.locked{background:var(--line);color:#6B7B8B;} .pill.soon{background:var(--tint);color:var(--blue-bg);} .on-dark .pill.platform{background:rgba(40,150,251,0.18);color:#9ECBFF;} .on-dark .pill.service{background:rgba(255,208,0,0.18);color:var(--yellow);} .on-dark .pill.locked{background:rgba(255,255,255,0.10);color:var(--mute-2);} /* Green check bullet, used in feature lists */ .ck{ width:22px;height:22px;border-radius:var(--r-pill);background:var(--green);color:#fff; flex-shrink:0;display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;margin-top:1px; } .ck.sm{width:20px;height:20px;font-size:12px;} /* ========================================================================== PART 2 — CHROME ========================================================================== */ /* 07 TOP STRIPE --------------------------------------------------------- */ .topstripe{display:flex;height:6px;width:100%;position:sticky;top:0;z-index:51;} .topstripe span{flex:1;} .topstripe .y{background:var(--yellow);} .topstripe .b{background:var(--blue);} .topstripe .g{background:var(--green);} /* 08 NAV ---------------------------------------------------------------- */ /* Scoped to the site nav — a direct child of . Nested