/* ═══════════════════════════════════════════════════════════════ THE AUGMENTED SCHOLAR — MAIN STYLESHEET (v2 redesign) Colour palette: Warm paper + Deep Teal + Ink (dark mode via [data-theme]) Typography: Fraunces (editorial serif) + Inter + JetBrains Mono Note: legacy token names --blue-* are kept but now map to the teal ramp, so all 2,900 lines of component CSS re-skin automatically. ═══════════════════════════════════════════════════════════════ */ /* ─── 1. CUSTOM PROPERTIES ─── */ :root { /* Fonts — university learning hub: serif display, sans body */ --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Type Scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; /* Line Heights */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.75; /* Letter Spacing */ --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-widest: 0.1em; /* 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; /* Layout */ --width-prose: 680px; --width-wide: 900px; --width-content: 1280px; --width-full: 1280px; /* Colours — Oxford blue ramp (legacy --blue-* names) */ --blue-900: #0E2A4A; --blue-800: #16406E; --blue-700: #0F3054; --blue-600: #1D4E85; --blue-500: #2E6BAE; --blue-400: #5B93CF; --blue-200: #BCD5EC; --blue-100: #D9E7F5; --blue-50: #EEF4FA; /* Colours — academic gold (accents, never body text) */ --gold: #C9A227; --gold-deep: #8A6D14; --gold-tint: #F7F0DC; /* Colours — warm scholarly neutrals */ --black: #20242C; --grey-900: #2B3038; --grey-800: #3B414B; --grey-700: #4E5560; --grey-600: #5D6570; --grey-500: #6E7580; --grey-400: #9AA0A8; --grey-300: #C6C4BB; --grey-200: #DDDACF; --grey-100: #ECE9E0; --grey-50: #F6F4EE; --white: #FFFFFF; /* Semantic */ --color-text: var(--black); --color-text-muted: var(--grey-500); --color-text-subtle: var(--grey-400); --color-text-link: var(--blue-800); --color-text-link-hover: var(--blue-600); --color-bg: #FBFAF7; /* warm paper */ --color-bg-alt: var(--grey-50); --color-bg-dark: #0E2A4A; /* oxford band */ --color-border: var(--grey-100); --color-border-strong: var(--grey-200); --color-accent: var(--blue-800); /* Shadows */ --shadow-sm: 0 1px 2px rgba(32,36,44,0.05); --shadow-md: 0 2px 4px rgba(32,36,44,0.04), 0 6px 16px rgba(14,42,74,0.07); --shadow-lg: 0 4px 8px rgba(32,36,44,0.05), 0 12px 32px rgba(14,42,74,0.10); /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; /* Transitions */ --transition-fast: 0.12s ease; --transition-normal: 0.2s ease; --transition-slow: 0.35s ease; /* Pillar colour indicators — collegiate categorical */ --pillar-1-color: #16406E; /* research tools — oxford */ --pillar-2-color: #6D28D9; /* AI in research — violet */ --pillar-3-color: #047857; /* code & automation — pine */ --pillar-4-color: #B45309; /* AI literacy — ochre */ --pillar-5-color: #9F1239; /* educators — burgundy */ } /* ─── 1b. DARK MODE ─── Toggled by setting data-theme="dark" on . Primitives are re-pointed so every component inherits the dark skin with no per-component edits. */ [data-theme="dark"] { --blue-900: #A9C8E8; --blue-800: #6FA3DC; --blue-700: #8FB9E6; --blue-600: #8FB9E6; --blue-500: #6FA3DC; --blue-400: #4E86C4; --blue-200: #1D3A5C; --blue-100: #182F4B; --blue-50: #14263C; --gold: #E3C35B; --gold-deep: #E3C35B; --gold-tint: rgba(227,195,91,0.12); --black: #DDE4EE; --grey-900: #DDE4EE; --grey-800: #C5CEDB; --grey-700: #93A1B4; --grey-600: #93A1B4; --grey-500: #93A1B4; --grey-400: #64748B; --grey-300: #445063; --grey-200: #2A3850; --grey-100: #1E2B40; --grey-50: #16202F; --color-text: #DDE4EE; --color-text-muted: #93A1B4; --color-text-subtle: #64748B; --color-text-link: #6FA3DC; --color-text-link-hover: #8FB9E6; --color-bg: #101826; --color-bg-alt: #16202F; --color-bg-dark: #0A1220; --color-border: #1E2B40; --color-border-strong: #2A3850; --color-accent: #6FA3DC; --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 2px 4px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.4); --shadow-lg: 0 4px 8px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.55); } /* Buttons keep readable labels on accent backgrounds in dark mode */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn--primary { background: #2E6BAE; border-color: #2E6BAE; color: #FFFFFF; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn--primary:hover { background: #4E86C4; border-color: #4E86C4; color: #FFFFFF; } [data-theme="dark"] img { opacity: 0.92; } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-md); transition: color var(--transition-fast), background var(--transition-fast); } .theme-toggle:hover { color: var(--color-accent); background: var(--blue-50); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ─── 2. RESET ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; height: auto; display: block; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; } a { color: var(--color-text-link); text-decoration-color: var(--blue-200); } a:hover { color: var(--color-text-link-hover); text-decoration-color: var(--blue-500); } svg { flex-shrink: 0; } /* ─── 3. LAYOUT UTILITIES ─── */ .container { width: 100%; max-width: var(--width-content); margin-inline: auto; padding-inline: var(--space-6); } .container--prose { max-width: var(--width-prose); } .container--wide { max-width: var(--width-wide); } .container--full { max-width: var(--width-full); } /* ─── 4. SKIP LINK ─── */ .skip-link { position: absolute; top: -100%; left: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--blue-800); color: var(--white); font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-md); z-index: 9999; text-decoration: none; transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-4); } /* ─── 5. TYPOGRAPHY — BASE ─── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--black); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); font-weight: 700; } h3 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: 0; } h4 { font-size: var(--text-xl); font-weight: 600; letter-spacing: 0; } h5 { font-size: var(--text-lg); font-weight: 600; } h6 { font-size: var(--text-base); font-weight: 600; } p { margin-bottom: var(--space-5); } p:last-child { margin-bottom: 0; } strong { font-weight: 600; } em { font-style: italic; } /* ─── 6. SITE HEADER & NAVIGATION ─── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); } .site-nav { height: 64px; display: flex; align-items: center; } .nav-container { display: flex; align-items: center; gap: var(--space-8); width: 100%; max-width: var(--width-full); margin-inline: auto; padding-inline: var(--space-6); } .nav-logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; } .nav-logo-text { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-base); color: var(--black); letter-spacing: -0.01em; white-space: nowrap; } .nav-logo:hover .nav-logo-text { color: var(--blue-800); text-decoration: none; } .nav-links { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; flex: 1; } .nav-link { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--grey-700); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); white-space: nowrap; } .nav-link:hover, .nav-link--active { color: var(--blue-800); background-color: var(--blue-50); text-decoration: none; } .nav-link--dropdown { display: flex; align-items: center; gap: var(--space-1); background: none; border: none; cursor: pointer; } .nav-item--dropdown { position: relative; } .nav-dropdown { position: absolute; top: 100%; left: 0; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-2) var(--space-2); min-width: 200px; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity var(--transition-fast), transform var(--transition-fast); z-index: 200; list-style: none; } .nav-item--dropdown:hover .nav-dropdown, .nav-item--dropdown:focus-within .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-dropdown-link { display: block; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 500; color: var(--grey-700); text-decoration: none; border-radius: var(--radius-sm); transition: background-color var(--transition-fast), color var(--transition-fast); } .nav-dropdown-link:hover { background-color: var(--blue-50); color: var(--blue-800); text-decoration: none; } .nav-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } .nav-search-btn { background: none; border: none; color: var(--grey-500); cursor: pointer; padding: var(--space-2); border-radius: var(--radius-sm); transition: color var(--transition-fast); display: flex; align-items: center; } .nav-search-btn:hover { color: var(--blue-800); } .nav-mobile-toggle { display: none; } .nav-arrow { transition: transform var(--transition-fast); } .nav-link--dropdown[aria-expanded="true"] .nav-arrow { transform: rotate(180deg); } /* Mobile nav */ .mobile-nav { display: none; background: var(--white); border-top: 1px solid var(--color-border); padding: var(--space-4) var(--space-6); } .mobile-nav.open { display: block; } .mobile-nav-link { display: block; padding: var(--space-3) 0; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 500; color: var(--grey-700); text-decoration: none; border-bottom: 1px solid var(--color-border); } .mobile-nav-link--child { padding-left: var(--space-4); font-size: var(--text-sm); } .mobile-nav-group-label { display: block; padding: var(--space-3) 0 var(--space-1); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); } .hamburger { display: block; width: 20px; height: 2px; background: var(--black); border-radius: 2px; position: relative; } .hamburger::before, .hamburger::after { content: ''; display: block; width: 20px; height: 2px; background: var(--black); border-radius: 2px; position: absolute; } .hamburger::before { top: -6px; } .hamburger::after { top: 6px; } /* ─── 7. BUTTONS ─── */ .btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.625rem var(--space-5); background: var(--blue-800); color: var(--white); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; border: 2px solid var(--blue-800); border-radius: var(--radius-md); text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary:hover { background: var(--blue-700); border-color: var(--blue-700); color: var(--white); text-decoration: none; } .btn-primary.btn-lg { padding: 0.875rem var(--space-8); font-size: var(--text-base); } .btn-primary.btn-sm { padding: 0.375rem var(--space-4); font-size: var(--text-xs); } .btn-secondary { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.625rem var(--space-5); background: transparent; color: var(--blue-800); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; border: 2px solid var(--blue-800); border-radius: var(--radius-md); text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .btn-secondary:hover { background: var(--blue-50); color: var(--blue-800); text-decoration: none; } .btn-secondary.btn-sm { padding: 0.375rem var(--space-4); font-size: var(--text-xs); } .btn-ghost { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) 0; background: transparent; color: var(--blue-800); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; border: none; text-decoration: none; cursor: pointer; transition: color var(--transition-fast); } .btn-ghost:hover { color: var(--blue-600); text-decoration: none; } /* ─── 8. HOMEPAGE ─── */ .hero { padding: var(--space-20) 0 var(--space-16); background: var(--white); overflow: hidden; } .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .hero-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); margin-bottom: var(--space-4); } .hero-headline { font-size: var(--text-5xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--black); margin-bottom: var(--space-6); } .hero-body { font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--grey-600); margin-bottom: var(--space-8); max-width: 480px; } .hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); } .hero-social-proof { font-size: var(--text-sm); color: var(--grey-400); margin: 0; } .hero-image { width: 100%; border-radius: var(--radius-xl); border: 1px solid var(--color-border); } /* Pillars */ .pillars-overview { padding: var(--space-16) 0; background: var(--grey-50); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .section-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); margin-bottom: var(--space-2); } .section-subtitle { font-size: var(--text-lg); color: var(--grey-600); margin-bottom: var(--space-10); } .pillars-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); } .pillar-card { display: flex; flex-direction: column; padding: var(--space-6); background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal); } .pillar-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; color: inherit; } .pillar-number { display: none; } .pillar-name { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--black); margin-bottom: var(--space-2); line-height: var(--leading-snug); } .pillar-desc { font-size: var(--text-sm); color: var(--grey-500); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); flex: 1; } .pillar-link { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--blue-800); margin-top: auto; } /* Article grid */ .featured-articles { padding: var(--space-16) 0; } .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-10); } .section-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--black); } .section-link { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--blue-800); text-decoration: none; } .section-link:hover { color: var(--blue-600); text-decoration: none; } .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } /* Tools preview */ .tools-preview { padding: var(--space-16) 0; background: var(--grey-50); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } /* Resources strip */ .resources-strip { padding: var(--space-16) 0; } .resources-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); } .resource-block { padding: var(--space-10); border-radius: var(--radius-xl); border: 1px solid var(--color-border); } .resource-block--youtube { background: var(--blue-50); } .resource-block--discord { background: var(--white); } .resource-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); display: block; margin-bottom: var(--space-3); } .resource-block h3 { font-size: var(--text-2xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-3); } .resource-block p { font-size: var(--text-base); color: var(--grey-600); margin-bottom: var(--space-6); } /* ─── 9. ARTICLE CARDS ─── */ .card-article { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .card-article:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); text-decoration: none; color: inherit; } .card-article-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--grey-100); } .card-article-body { padding: var(--space-5) var(--space-6); flex: 1; display: flex; flex-direction: column; } .card-article-pillar { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); margin-bottom: var(--space-2); } .card-article-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-snug); color: var(--black); margin-bottom: var(--space-3); letter-spacing: -0.01em; } .card-article-summary { font-size: var(--text-sm); color: var(--grey-500); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); flex: 1; } .card-article-meta { font-size: var(--text-xs); color: var(--grey-400); margin-top: auto; display: flex; gap: var(--space-2); } /* Tool cards */ .card-tool { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .card-tool:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); text-decoration: none; color: inherit; } .card-tool-image { width: 100%; height: 120px; object-fit: cover; background: var(--grey-100); } .card-tool-body { padding: var(--space-5); flex: 1; } .card-tool-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); } .card-tool-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--black); margin-bottom: var(--space-2); } .card-tool-summary { font-size: var(--text-sm); color: var(--grey-500); line-height: var(--leading-relaxed); } .card-tool-footer { margin-top: var(--space-4); display: flex; gap: var(--space-2); align-items: center; } .card-tool-pricing { font-size: var(--text-xs); font-weight: 600; color: var(--grey-400); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .card-tool-rating { color: #F59E0B; font-size: var(--text-sm); } /* ─── 10. ARTICLE PAGE ─── */ .article-header { padding: var(--space-16) 0 var(--space-10); border-bottom: 1px solid var(--color-border); } .article-title { font-size: var(--text-4xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--black); margin-bottom: var(--space-5); } .article-lead { font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--grey-600); margin-bottom: var(--space-6); max-width: var(--width-prose); } .article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-8); font-size: var(--text-sm); color: var(--grey-400); } .article-meta-inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); } .meta-author { display: flex; align-items: center; gap: var(--space-2); } .meta-avatar { border-radius: 50%; object-fit: cover; } .meta-author-name { color: var(--grey-700); font-weight: 500; } .meta-sep { color: var(--grey-300); } .meta-reading-time, .meta-date, .meta-word-count, .meta-updated { color: var(--grey-400); } .article-cover { margin: var(--space-8) 0; } .article-cover-img { width: 100%; max-width: var(--width-wide); border-radius: var(--radius-lg); border: 1px solid var(--color-border); } .article-cover-caption { font-size: var(--text-sm); color: var(--grey-400); margin-top: var(--space-3); text-align: center; font-style: italic; } /* Three-column article layout */ .article-layout { display: grid; grid-template-columns: 220px var(--width-prose) 260px; gap: var(--space-12); max-width: calc(220px + var(--width-prose) + 260px + var(--space-12) * 2 + var(--space-12)); margin: 0 auto; padding: var(--space-12) var(--space-6); align-items: start; } /* TOC sidebar (left) */ .article-toc-sidebar { position: sticky; top: calc(64px + var(--space-8)); max-height: calc(100vh - 64px - var(--space-16)); overflow-y: auto; } .toc-wrapper { padding: var(--space-5); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .toc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .toc-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--grey-500); } .toc-toggle { background: none; border: none; cursor: pointer; color: var(--grey-400); padding: var(--space-1); } .toc-content { margin-top: var(--space-3); } .toc-content ul { list-style: none; padding: 0; } .toc-content li { margin: 0; } .toc-content a { display: block; font-size: var(--text-sm); color: var(--grey-500); text-decoration: none; padding: var(--space-1) var(--space-3); border-left: 2px solid transparent; line-height: var(--leading-relaxed); transition: color var(--transition-fast), border-color var(--transition-fast); } .toc-content a:hover { color: var(--blue-800); border-left-color: var(--blue-200); text-decoration: none; } .toc-content a.active { color: var(--blue-800); border-left-color: var(--blue-800); font-weight: 500; } .toc-content li li a { padding-left: calc(var(--space-3) + var(--space-4)); font-size: var(--text-xs); } /* Article body content */ .article-content { min-width: 0; font-size: var(--text-base); line-height: var(--leading-relaxed); } .article-content h2 { font-size: var(--text-2xl); font-weight: 700; margin-top: var(--space-12); margin-bottom: var(--space-5); padding-top: var(--space-8); border-top: 1px solid var(--color-border); color: var(--black); } .article-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .article-content h3 { font-size: var(--text-xl); font-weight: 600; margin-top: var(--space-8); margin-bottom: var(--space-3); color: var(--black); } .article-content h4 { font-size: var(--text-lg); font-weight: 600; margin-top: var(--space-6); margin-bottom: var(--space-2); } .article-content p { margin-bottom: var(--space-5); } .article-content ul, .article-content ol { padding-left: var(--space-6); margin-bottom: var(--space-5); } .article-content ul { list-style-type: disc; } .article-content ol { list-style-type: decimal; } .article-content li { margin-bottom: var(--space-2); line-height: var(--leading-relaxed); } .article-content li::marker { color: var(--blue-800); } .article-content a { color: var(--blue-800); text-decoration: underline; text-decoration-color: var(--blue-200); text-underline-offset: 3px; font-weight: 500; } .article-content a:hover { color: var(--blue-600); text-decoration-color: var(--blue-500); } .article-content strong { font-weight: 600; color: var(--black); } .article-content em { font-style: italic; } .article-content blockquote { margin: var(--space-8) 0; padding: var(--space-4) var(--space-6); border-left: 4px solid var(--blue-800); background: var(--blue-50); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .article-content blockquote p { color: var(--grey-700); margin: 0; font-style: italic; } .article-content hr { margin: var(--space-12) 0; border: none; border-top: 2px solid var(--color-border); } .article-content table { width: 100%; border-collapse: collapse; margin: var(--space-8) 0; font-size: var(--text-sm); overflow-x: auto; display: block; } .article-content th { background: var(--grey-50); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--grey-600); padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 2px solid var(--color-border-strong); } .article-content td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; } .article-content tr:last-child td { border-bottom: none; } .article-content figure { margin: var(--space-8) 0; } .article-content figure img { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--color-border); } .article-content figcaption { font-size: var(--text-sm); color: var(--grey-400); margin-top: var(--space-2); text-align: center; font-style: italic; } .article-content code { font-family: var(--font-mono); font-size: 0.875em; background: var(--blue-50); color: var(--blue-800); padding: 0.15em 0.4em; border-radius: var(--radius-sm); border: 1px solid var(--blue-100); } .article-content pre { background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); overflow-x: auto; margin: var(--space-6) 0; position: relative; } .article-content pre code { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.7; background: transparent; color: inherit; padding: 0; border: none; border-radius: 0; } .code-copy-btn { position: absolute; top: var(--space-3); right: var(--space-3); padding: var(--space-1) var(--space-3); background: var(--grey-100); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500; color: var(--grey-500); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); opacity: 0; } pre:hover .code-copy-btn { opacity: 1; } .code-copy-btn:hover { background: var(--blue-50); color: var(--blue-800); } .code-copy-btn.copied { color: #065F46; background: #F0FDF4; border-color: #A7F3D0; } /* Right sidebar */ .article-right-sidebar { position: sticky; top: calc(64px + var(--space-8)); } .sidebar-sticky { display: flex; flex-direction: column; gap: var(--space-6); } .sidebar-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--grey-500); margin-bottom: var(--space-2); } .sidebar-substack-link { padding: var(--space-5); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } /* Article footer */ .article-footer { padding: var(--space-12) 0; } .article-series { margin-bottom: var(--space-5); } .series-label { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--grey-500); margin-right: var(--space-2); } .series-link { color: var(--blue-800); font-weight: 600; text-decoration: none; font-family: var(--font-heading); font-size: var(--text-sm); } /* ─── 11. NEWSLETTER CTA ─── */ .newsletter-cta--sidebar { padding: var(--space-6); background: var(--blue-800); border-radius: var(--radius-lg); color: var(--white); } .newsletter-cta--sidebar .newsletter-cta-icon { margin-bottom: var(--space-3); color: var(--white); } .newsletter-cta-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-200); margin-bottom: var(--space-1); } .newsletter-cta-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--white); margin-bottom: var(--space-2); } .newsletter-cta-body { font-size: var(--text-sm); color: var(--blue-200); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); } .newsletter-cta--sidebar .btn-primary { background: var(--white); color: var(--blue-800); border-color: var(--white); width: 100%; justify-content: center; } .newsletter-cta--sidebar .btn-primary:hover { background: var(--blue-50); border-color: var(--blue-50); color: var(--blue-800); } .newsletter-cta-social-proof { font-size: var(--text-xs); color: var(--blue-200); margin-top: var(--space-2); text-align: center; } /* Full-width newsletter section */ .newsletter-section { padding: var(--space-16) 0; background: var(--grey-50); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .newsletter-section-inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-16); align-items: center; } .newsletter-section-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); margin-bottom: var(--space-3); } .newsletter-section-title { font-size: var(--text-3xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--black); line-height: var(--leading-tight); margin-bottom: var(--space-4); } .newsletter-section-body { font-size: var(--text-base); color: var(--grey-600); margin-bottom: var(--space-6); max-width: 560px; } .newsletter-benefits { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .newsletter-benefits li { font-size: var(--text-sm); color: var(--grey-600); padding-left: var(--space-5); position: relative; } .newsletter-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-800); font-weight: 700; } .newsletter-section-form { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .newsletter-count { font-size: var(--text-sm); color: var(--grey-400); margin: 0; } /* ─── 12. DOWNLOAD CTA ─── */ .download-cta { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-lg); margin: var(--space-8) 0; } .download-cta-type { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); display: block; margin-bottom: var(--space-1); } .download-cta-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--black); margin: 0 0 var(--space-2); } .download-cta-desc { font-size: var(--text-sm); color: var(--grey-500); margin: 0; } .download-cta-text { flex: 1; } .download-cta-btn { flex-shrink: 0; } .download-box { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-8); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-xl); } .download-box-type { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); display: block; margin-bottom: var(--space-1); } .download-box-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--black); margin: 0 0 var(--space-2); } .download-box-desc { font-size: var(--text-base); color: var(--grey-600); margin: 0; } .download-box-text { flex: 1; } /* ─── 13. CALLOUT BOXES ─── */ .callout { padding: var(--space-5) var(--space-6); border-left: 4px solid var(--blue-800); background: var(--blue-50); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--space-8) 0; } .callout p { margin: 0; color: var(--grey-700); } .callout-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xs); color: var(--blue-800); text-transform: uppercase; letter-spacing: var(--tracking-widest); margin-bottom: var(--space-2); } .callout-body p:last-child { margin-bottom: 0; } .callout-warning { border-left-color: #B45309; background: #FFFBEB; } .callout-warning .callout-title { color: #B45309; } .callout-tip, .callout-success { border-left-color: #059669; background: #F0FDF4; } .callout-tip .callout-title, .callout-success .callout-title { color: #059669; } /* ─── 14. AFFILIATE DISCLOSURE ─── */ .affiliate-disclosure { padding: var(--space-3) var(--space-4); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--grey-500); margin-bottom: var(--space-8); } .affiliate-disclosure strong { color: var(--grey-700); } .affiliate-note { font-size: var(--text-sm); color: var(--grey-500); margin-top: var(--space-3); } /* ─── 15. YOUTUBE EMBED ─── */ .youtube-embed, .youtube-companion { margin: var(--space-8) 0; } .youtube-companion-label { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--grey-500); margin-bottom: var(--space-3); } .youtube-embed-inner { position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: var(--black); aspect-ratio: 16/9; } .youtube-thumbnail { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity var(--transition-normal); } .youtube-embed-inner:hover .youtube-thumbnail { opacity: 0.7; } .youtube-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; border: none; cursor: pointer; transition: transform var(--transition-fast); } .youtube-embed-inner:hover .youtube-play-btn { transform: translate(-50%, -50%) scale(1.1); } .youtube-title { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-10) var(--space-5) var(--space-4); background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: var(--white); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; } /* ─── 16. READING PROGRESS BAR ─── */ #reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; background: var(--grey-100); } #reading-progress-fill { height: 100%; background: var(--blue-800); width: 0%; transition: width 0.1s linear; } /* ─── 17. SEARCH ─── */ .search-overlay { display: none; position: fixed; inset: 0; background: rgba(13,17,23,0.5); backdrop-filter: blur(4px); z-index: 500; padding: var(--space-20) var(--space-6) 0; align-items: flex-start; justify-content: center; } .search-overlay.active { display: flex; } .search-box { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 640px; overflow: hidden; } .search-input-wrapper { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); } .search-input { flex: 1; font-family: var(--font-body); font-size: var(--text-lg); border: none; outline: none; color: var(--black); } .search-shortcut { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--grey-100); padding: 0.15em 0.4em; border-radius: var(--radius-sm); color: var(--grey-500); border: 1px solid var(--color-border); } .search-results { padding: var(--space-4); max-height: 400px; overflow-y: auto; } .search-result-item { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: background-color var(--transition-fast); } .search-result-item:hover { background: var(--grey-50); text-decoration: none; color: inherit; } .search-result-title { font-weight: 600; color: var(--black); margin-bottom: var(--space-1); } .search-result-summary { font-size: var(--text-sm); color: var(--grey-500); margin: 0; } .search-footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--grey-400); } /* ─── 18. SITE FOOTER ─── */ .footer-newsletter { padding: var(--space-6) 0; background: var(--blue-800); } .footer-newsletter .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } .footer-newsletter-text { font-size: var(--text-base); color: var(--blue-100); margin: 0; } .footer-newsletter .btn-primary { background: var(--white); color: var(--blue-800); border-color: var(--white); flex-shrink: 0; } .footer-newsletter .btn-primary:hover { background: var(--blue-50); border-color: var(--blue-50); } .footer-main { padding: var(--space-12) 0; background: var(--grey-50); border-top: 1px solid var(--color-border); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); } .footer-logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; } .footer-logo img { height: 28px; } .footer-logo-text { font-family: var(--font-heading); font-weight: 700; color: var(--black); } .footer-tagline { font-size: var(--text-sm); color: var(--grey-500); line-height: var(--leading-relaxed); margin-top: var(--space-4); margin-bottom: var(--space-6); max-width: 260px; } .footer-social { display: flex; gap: var(--space-4); } .footer-social a { color: var(--grey-400); transition: color var(--transition-fast); } .footer-social a:hover { color: var(--blue-800); text-decoration: none; } .footer-col-title { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--grey-500); margin-bottom: var(--space-4); } .footer-links-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .footer-links-col a { font-size: var(--text-sm); color: var(--grey-600); text-decoration: none; transition: color var(--transition-fast); } .footer-links-col a:hover { color: var(--blue-800); text-decoration: none; } .footer-bottom { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); background: var(--grey-50); } .footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } .footer-copy, .footer-disclaimer { font-size: var(--text-xs); color: var(--grey-400); margin: 0; } /* ─── 19. TAGS ─── */ .tag-pillar { display: inline-block; padding: var(--space-1) var(--space-3); background: var(--blue-50); color: var(--blue-800); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; border-radius: var(--radius-sm); text-decoration: none; } .tag-pillar:hover { background: var(--blue-100); color: var(--blue-800); text-decoration: none; } .article-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); } /* ─── 20. BREADCRUMB ─── */ .breadcrumb { margin-bottom: var(--space-5); } .breadcrumb ol { display: flex; align-items: center; gap: var(--space-2); list-style: none; flex-wrap: wrap; } .breadcrumb a { font-family: var(--font-heading); font-size: var(--text-sm); color: var(--grey-500); text-decoration: none; font-weight: 500; } .breadcrumb a:hover { color: var(--blue-800); } .breadcrumb span { color: var(--grey-300); font-size: var(--text-sm); } /* ─── 21. PAGE HEADERS ─── */ .page-header { padding: var(--space-16) 0 var(--space-10); border-bottom: 1px solid var(--color-border); } .page-title { font-size: var(--text-4xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--black); margin-bottom: var(--space-4); } .page-description { font-size: var(--text-lg); color: var(--grey-600); line-height: var(--leading-loose); max-width: 680px; margin-bottom: 0; } /* ─── 22. PILLAR PAGE ─── */ .pillar-hero { padding: var(--space-16) 0; background: var(--blue-50); border-bottom: 1px solid var(--blue-100); } .pillar-hero-inner { max-width: var(--width-prose); } .pillar-number-display { font-family: var(--font-heading); font-size: 5rem; font-weight: 800; color: var(--blue-100); line-height: 1; margin-bottom: var(--space-4); letter-spacing: var(--tracking-tight); } .pillar-title { font-size: var(--text-4xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--black); margin-bottom: var(--space-4); } .pillar-description { font-size: var(--text-lg); color: var(--grey-600); line-height: var(--leading-loose); margin-bottom: var(--space-8); } .pillar-articles { padding: var(--space-16) 0; } .cornerstone-feature { padding: var(--space-12) 0; background: var(--grey-50); border-bottom: 1px solid var(--color-border); } .empty-state { font-size: var(--text-lg); color: var(--grey-500); text-align: center; padding: var(--space-16) 0; } /* ─── 23. SERIES NAV ─── */ .series-nav { padding: var(--space-6); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin: var(--space-10) 0; } .series-nav-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .series-nav-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--grey-400); } .series-nav-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--black); } .series-nav-progress { font-size: var(--text-xs); color: var(--grey-400); font-family: var(--font-heading); margin-left: auto; } .series-nav-links { display: flex; gap: var(--space-4); } .series-nav-prev, .series-nav-next { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); flex: 1; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .series-nav-prev:hover, .series-nav-next:hover { border-color: var(--blue-200); box-shadow: var(--shadow-sm); text-decoration: none; } .series-nav-dir { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); } .series-nav-next .series-nav-dir { text-align: right; } .series-nav-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--black); } .series-nav-next .series-nav-title { text-align: right; } /* ─── 24. RELATED ARTICLES ─── */ .article-related { margin: var(--space-12) 0; } .related-title { font-size: var(--text-2xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-8); } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } /* ─── 25. SHARE BUTTONS ─── */ .share-buttons { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-8); flex-wrap: wrap; } .share-label { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--grey-500); } .share-links { display: flex; gap: var(--space-2); flex-wrap: wrap; } .share-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast); border: 1px solid var(--color-border); background: var(--white); color: var(--grey-700); } .share-btn:hover { background: var(--grey-50); color: var(--black); text-decoration: none; } .share-btn--twitter:hover { color: #1D9BF0; border-color: #1D9BF0; } .share-btn--linkedin:hover { color: #0A66C2; border-color: #0A66C2; } /* ─── 26. TOOL PAGE ─── */ .tool-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding: var(--space-6); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-8); } .tool-meta-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--grey-400); display: block; margin-bottom: var(--space-1); } .tool-meta-value { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--black); } .tool-cta-box { padding: var(--space-6); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-lg); } .tool-cta-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--black); margin-bottom: var(--space-4); } .tool-cta-note { font-size: var(--text-xs); color: var(--grey-400); margin-top: var(--space-2); text-align: center; } /* ─── 27. TOOLS FILTER ─── */ .tools-filter { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-10); margin-top: var(--space-8); } .filter-btn { padding: var(--space-2) var(--space-4); background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--grey-600); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .filter-btn:hover, .filter-btn.active { background: var(--blue-800); border-color: var(--blue-800); color: var(--white); } /* ─── 28. STAT SHORTCODE ─── */ .stat-pull { text-align: center; padding: var(--space-10); margin: var(--space-8) 0; background: var(--blue-50); border-radius: var(--radius-xl); border: 1px solid var(--blue-100); } .stat-number { font-family: var(--font-heading); font-size: var(--text-6xl); font-weight: 800; color: var(--blue-800); line-height: 1; } .stat-label { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; color: var(--black); margin-top: var(--space-2); } .stat-context { font-size: var(--text-sm); color: var(--grey-500); margin-top: var(--space-2); } /* ─── 29. SERIES LIST SHORTCODE ─── */ .series-list { padding: var(--space-6); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin: var(--space-8) 0; } .series-list-header { margin-bottom: var(--space-5); } .series-list-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--black); } .series-list-items { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .series-list-item { display: flex; align-items: baseline; gap: var(--space-3); } .series-list-item--current .series-list-link { font-weight: 700; color: var(--black); } .series-list-number { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; color: var(--blue-400); width: 24px; flex-shrink: 0; } .series-list-link { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--blue-800); text-decoration: none; } .series-list-link:hover { color: var(--blue-600); text-decoration: underline; } /* ─── 30. TERMS/TAXONOMY PAGE ─── */ .terms-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-8) 0; } .term-item { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--grey-700); transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .term-item:hover { background: var(--blue-50); color: var(--blue-800); border-color: var(--blue-200); text-decoration: none; } .term-count { font-size: var(--text-xs); color: var(--grey-400); background: var(--grey-100); padding: 0.1em 0.4em; border-radius: 100px; } /* ─── 31. COMMENTS ─── */ .comments-section { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--color-border); } .comments-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-8); } /* ─── 32. RESPONSIVE DESIGN ─── */ @media (max-width: 1280px) { .article-layout { grid-template-columns: 180px 1fr 240px; } .pillars-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1024px) { .article-layout { grid-template-columns: 1fr; gap: var(--space-8); } .article-toc-sidebar { position: static; order: -1; max-height: none; } .article-right-sidebar { position: static; order: 10; } .hero-inner { grid-template-columns: 1fr; } .hero-visual { display: none; } .articles-grid { grid-template-columns: repeat(2, 1fr); } .tools-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .newsletter-section-inner { grid-template-columns: 1fr; gap: var(--space-8); } .related-grid { grid-template-columns: repeat(2, 1fr); } .resources-two-col { grid-template-columns: 1fr; } .tool-meta-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { :root { --text-5xl: 2.25rem; --text-4xl: 1.875rem; --text-3xl: 1.5rem; } .nav-links, .nav-actions .btn-primary { display: none; } .nav-mobile-toggle { display: flex; background: none; border: none; cursor: pointer; padding: var(--space-2); align-items: center; justify-content: center; } .pillars-grid { grid-template-columns: 1fr 1fr; } .articles-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-newsletter .container { flex-direction: column; text-align: center; } .footer-bottom .container { flex-direction: column; text-align: center; } .download-cta { flex-direction: column; } .download-box { flex-direction: column; text-align: center; } .hero-actions { flex-direction: column; } .hero-actions a { width: 100%; justify-content: center; } .series-nav-links { flex-direction: column; } .tools-grid { grid-template-columns: 1fr; } .tool-meta-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .pillars-grid { grid-template-columns: 1fr; } .container { padding-inline: var(--space-4); } .tools-filter { gap: var(--space-2); } .tool-meta-grid { grid-template-columns: 1fr; } } /* ─── 33. PRINT STYLES ─── */ @media print { .site-header, .site-footer, .article-toc-sidebar, .article-right-sidebar, .newsletter-section, .comments-section, .share-buttons, #reading-progress, .search-overlay { display: none !important; } .article-layout { grid-template-columns: 1fr; } body { font-size: 12pt; line-height: 1.5; } a { color: inherit; text-decoration: underline; } } /* ─── 34. ACCESSIBILITY ─── */ :focus-visible { outline: 2px solid var(--blue-800); outline-offset: 2px; border-radius: var(--radius-sm); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* ─── 35. VIDEO SECTION ─── */ .videos-page-header { padding: var(--space-16) 0 var(--space-10); border-bottom: 1px solid var(--color-border); } .videos-banner-section { padding: var(--space-16) 0; background: var(--grey-50); border-bottom: 1px solid var(--color-border); } .videos-banner { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .video-banner-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .video-banner-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-lg); text-decoration: none; color: inherit; } .video-thumb-wrapper { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--black); display: block; } .video-thumb-wrapper img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity var(--transition-normal), transform var(--transition-normal); } .video-banner-card:hover .video-thumb-wrapper img { opacity: 0.7; transform: scale(1.03); } .video-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; background: rgba(255,255,255,0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform var(--transition-fast); pointer-events: none; } .video-banner-card:hover .video-play-overlay { transform: translate(-50%, -50%) scale(1.15); } .video-play-icon { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 16px solid var(--blue-800); margin-left: 3px; } .video-duration-badge { position: absolute; bottom: var(--space-2); right: var(--space-2); background: rgba(0,0,0,0.8); color: var(--white); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; padding: 0.2em 0.5em; border-radius: var(--radius-sm); } .video-card-body { padding: var(--space-5) var(--space-6); flex: 1; display: flex; flex-direction: column; } .video-card-pillar { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); margin-bottom: var(--space-2); } .video-card-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-2); line-height: var(--leading-snug); letter-spacing: -0.01em; } .video-card-desc { font-size: var(--text-sm); color: var(--grey-500); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); flex: 1; } .video-connected-articles { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: auto; } .video-connected-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--grey-400); display: block; margin-bottom: var(--space-3); } .video-connected-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .video-connected-list a { font-size: var(--text-sm); font-weight: 500; color: var(--blue-800); text-decoration: none; display: flex; align-items: flex-start; gap: var(--space-2); } .video-connected-list a::before { content: "→"; color: var(--blue-400); font-size: var(--text-xs); flex-shrink: 0; margin-top: 2px; } .video-connected-list a:hover { color: var(--blue-600); text-decoration: none; } /* Video list (all videos compact grid) */ .videos-all-section { padding: var(--space-16) 0; } .videos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .video-item { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-5); padding: var(--space-5); background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .video-item:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); text-decoration: none; color: inherit; } .video-item-thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: var(--black); align-self: flex-start; } .video-item-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; } .video-item-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .video-item-play-icon { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--blue-800); margin-left: 2px; } .video-item-content { display: flex; flex-direction: column; } .video-item-pillar { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); margin-bottom: var(--space-1); } .video-item-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--black); margin-bottom: var(--space-2); line-height: var(--leading-snug); } .video-item-desc { font-size: var(--text-sm); color: var(--grey-500); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); flex: 1; } .video-item-meta { font-size: var(--text-xs); color: var(--grey-400); font-family: var(--font-heading); font-weight: 500; display: flex; gap: var(--space-3); } /* Single video page */ .video-page-header { padding: var(--space-16) 0 var(--space-10); border-bottom: 1px solid var(--color-border); } .video-page-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-12); padding: var(--space-12) 0; align-items: start; } .video-page-main {} .video-page-sidebar { position: sticky; top: calc(64px + var(--space-8)); display: flex; flex-direction: column; gap: var(--space-6); } .video-embed-wrapper { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-xl); overflow: hidden; background: var(--black); box-shadow: var(--shadow-lg); margin-bottom: var(--space-10); } .video-embed-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .video-related-articles-box { padding: var(--space-6); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-xl); } .video-related-articles-box-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; color: var(--blue-800); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .video-related-articles-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .video-related-articles-list a { font-size: var(--text-sm); font-weight: 500; color: var(--blue-800); text-decoration: none; display: flex; align-items: flex-start; gap: var(--space-2); line-height: var(--leading-snug); } .video-related-articles-list a::before { content: "→"; flex-shrink: 0; margin-top: 1px; color: var(--blue-500); } .video-related-articles-list a:hover { color: var(--blue-600); } /* ─── 36. PRICING / COURSES ─── */ .courses-page-header { padding: var(--space-16) 0 var(--space-10); border-bottom: 1px solid var(--color-border); } .courses-intro { padding: var(--space-16) 0; background: var(--grey-50); border-bottom: 1px solid var(--color-border); } .courses-intro-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .courses-intro-title { font-size: var(--text-3xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--black); margin-bottom: var(--space-5); line-height: var(--leading-tight); } .courses-intro-lead { font-size: var(--text-lg); color: var(--grey-600); line-height: var(--leading-loose); } .courses-value-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .courses-value-list li { font-size: var(--text-base); color: var(--grey-600); padding-left: var(--space-6); position: relative; } .courses-value-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-800); font-weight: 700; } .pricing-section { padding: var(--space-16) 0; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; } .pricing-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); position: relative; } .pricing-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-lg); } .pricing-card--featured { border-color: var(--blue-800); box-shadow: var(--shadow-md); } .pricing-badge { position: absolute; top: 0; right: var(--space-6); background: var(--blue-800); color: var(--white); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; padding: var(--space-2) var(--space-4); border-radius: 0 0 var(--radius-md) var(--radius-md); } .pricing-card-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--grey-100); } .pricing-card-header { padding: var(--space-6) var(--space-6) 0; } .pricing-card-level { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); display: block; margin-bottom: var(--space-2); } .pricing-card-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-2); line-height: var(--leading-snug); } .pricing-card-desc { font-size: var(--text-sm); color: var(--grey-500); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); } .pricing-card-stats { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--grey-400); font-family: var(--font-heading); font-weight: 500; margin-bottom: var(--space-5); flex-wrap: wrap; } .pricing-card-price { padding: var(--space-5) var(--space-6); background: var(--grey-50); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .pricing-card--featured .pricing-card-price { background: var(--blue-50); } .price-amount { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; color: var(--black); letter-spacing: var(--tracking-tight); line-height: 1; } .price-currency { font-size: var(--text-2xl); font-weight: 700; vertical-align: super; font-family: var(--font-heading); } .price-original { font-family: var(--font-heading); font-size: var(--text-sm); color: var(--grey-400); text-decoration: line-through; margin-left: var(--space-2); } .price-note { font-size: var(--text-xs); color: var(--grey-400); margin-top: var(--space-1); } .pricing-card-features { padding: var(--space-5) var(--space-6); flex: 1; } .features-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--grey-400); display: block; margin-bottom: var(--space-4); } .features-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .features-list li { font-size: var(--text-sm); color: var(--grey-600); padding-left: var(--space-5); position: relative; line-height: var(--leading-relaxed); } .features-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-800); font-weight: 700; } .pricing-card-cta { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border); } .pricing-card-cta .btn-primary, .pricing-card-cta .btn-secondary { width: 100%; justify-content: center; } .pricing-guarantee { font-size: var(--text-xs); color: var(--grey-400); text-align: center; margin-top: var(--space-2); } /* Course single page */ .course-header { padding: var(--space-16) 0; background: var(--blue-800); color: var(--white); } .course-header-inner { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-12); align-items: start; } .course-level-badge { display: inline-block; padding: var(--space-1) var(--space-3); background: rgba(255,255,255,0.15); border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-200); margin-bottom: var(--space-4); } .course-header-title { font-size: var(--text-4xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--white); margin-bottom: var(--space-5); line-height: var(--leading-tight); } .course-header-lead { font-size: var(--text-lg); color: var(--blue-100); line-height: var(--leading-loose); margin-bottom: var(--space-8); } .course-header-stats { display: flex; gap: var(--space-6); flex-wrap: wrap; } .course-stat { display: flex; flex-direction: column; gap: var(--space-1); } .course-stat-value { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--white); } .course-stat-label { font-size: var(--text-xs); color: var(--blue-200); font-family: var(--font-heading); } .course-enroll-box { background: var(--white); border-radius: var(--radius-xl); padding: var(--space-8); color: var(--black); } .course-enroll-price { text-align: center; padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); } .course-price-original { font-size: var(--text-sm); color: var(--grey-400); text-decoration: line-through; } .course-price-main { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: 800; color: var(--black); line-height: 1; letter-spacing: var(--tracking-tight); } .course-price-note { font-size: var(--text-xs); color: var(--grey-400); margin-top: var(--space-2); } .course-includes-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); } .course-includes-list li { font-size: var(--text-sm); color: var(--grey-600); display: flex; align-items: flex-start; gap: var(--space-3); } .course-includes-list li::before { content: "✓"; color: var(--blue-800); font-weight: 700; flex-shrink: 0; } .course-enroll-cta { width: 100%; justify-content: center; margin-bottom: var(--space-3); } .course-enroll-guarantee { font-size: var(--text-xs); color: var(--grey-400); text-align: center; } .course-body { padding: var(--space-16) 0; } .course-body-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-12); align-items: start; } .course-body-col {} .course-sidebar { position: sticky; top: calc(64px + var(--space-8)); display: flex; flex-direction: column; gap: var(--space-6); } .course-section-title { font-size: var(--text-2xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-8); } .learning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-8); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-12); } .learning-item { display: flex; align-items: flex-start; gap: var(--space-3); } .learning-item::before { content: "✓"; color: var(--blue-800); font-weight: 700; flex-shrink: 0; margin-top: 2px; } .learning-item span { font-size: var(--text-sm); color: var(--grey-700); line-height: var(--leading-relaxed); } .curriculum-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-12); } .curriculum-item { padding: var(--space-5) var(--space-6); background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; align-items: flex-start; gap: var(--space-4); } .curriculum-num { width: 28px; height: 28px; background: var(--blue-800); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; flex-shrink: 0; } .curriculum-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--black); margin-bottom: var(--space-1); } .curriculum-desc { font-size: var(--text-sm); color: var(--grey-500); margin: 0; line-height: var(--leading-relaxed); } /* ─── 37. SERVICES PAGE ─── */ .services-hero { padding: var(--space-20) 0; background: var(--blue-800); } .services-hero-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-200); display: block; margin-bottom: var(--space-4); } .services-hero-title { font-size: var(--text-5xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--white); margin-bottom: var(--space-5); line-height: var(--leading-tight); } .services-hero-lead { font-size: var(--text-lg); color: var(--blue-100); line-height: var(--leading-loose); max-width: 640px; margin-bottom: 0; } .services-grid-section { padding: var(--space-16) 0; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } .service-card { padding: var(--space-8); background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal); } .service-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-lg); transform: translateY(-3px); text-decoration: none; color: inherit; } .service-card-icon { width: 52px; height: 52px; background: var(--blue-50); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); color: var(--blue-800); font-size: 1.5rem; } .service-card-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-3); } .service-card-desc { font-size: var(--text-base); color: var(--grey-600); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); flex: 1; } .service-card-price { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; color: var(--grey-500); margin-bottom: var(--space-5); } .service-card-link { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; color: var(--blue-800); margin-top: auto; } /* Consulting single page */ .consulting-header { padding: var(--space-20) 0; background: var(--blue-800); color: var(--white); } .consulting-header-inner { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-16); align-items: start; } .consulting-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-200); display: block; margin-bottom: var(--space-4); } .consulting-title { font-size: var(--text-4xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--white); margin-bottom: var(--space-5); line-height: var(--leading-tight); } .consulting-lead { font-size: var(--text-lg); color: var(--blue-100); line-height: var(--leading-loose); margin-bottom: var(--space-8); } .consulting-intro-stats { display: flex; gap: var(--space-8); flex-wrap: wrap; } .consulting-stat { display: flex; flex-direction: column; } .consulting-stat-value { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: var(--white); line-height: 1; } .consulting-stat-label { font-size: var(--text-sm); color: var(--blue-200); margin-top: var(--space-1); } .consulting-booking-card { background: var(--white); border-radius: var(--radius-xl); padding: var(--space-8); color: var(--black); } .consulting-booking-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-5); } .consulting-option { padding: var(--space-5); border: 2px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); transition: border-color var(--transition-fast); } .consulting-option:hover { border-color: var(--blue-800); } .consulting-option-name { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--grey-600); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs); margin-bottom: var(--space-1); } .consulting-option-price { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--blue-800); margin-bottom: var(--space-1); } .consulting-option-desc { font-size: var(--text-sm); color: var(--grey-500); margin: 0; line-height: var(--leading-relaxed); } .consulting-body { padding: var(--space-16) 0; } .consulting-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-16); align-items: start; } .consulting-body-col {} .consulting-sidebar { position: sticky; top: calc(64px + var(--space-8)); display: flex; flex-direction: column; gap: var(--space-6); } .who-for-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-12); } .who-for-item { padding: var(--space-5); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .who-for-emoji { font-size: 1.75rem; display: block; margin-bottom: var(--space-3); } .who-for-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--black); margin-bottom: var(--space-2); } .who-for-desc { font-size: var(--text-sm); color: var(--grey-500); margin: 0; line-height: var(--leading-relaxed); } .process-steps { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-12); } .process-step { display: flex; gap: var(--space-5); align-items: flex-start; } .process-step-num { width: 36px; height: 36px; background: var(--blue-800); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; flex-shrink: 0; } .process-step-content {} .process-step-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--black); margin-bottom: var(--space-1); } .process-step-desc { font-size: var(--text-sm); color: var(--grey-500); line-height: var(--leading-relaxed); margin: 0; } .consulting-cta-box { padding: var(--space-6); background: var(--blue-800); color: var(--white); border-radius: var(--radius-xl); } .consulting-cta-box-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--white); margin-bottom: var(--space-2); } .consulting-cta-box-desc { font-size: var(--text-sm); color: var(--blue-200); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); } .consulting-cta-box .btn-primary { background: var(--white); color: var(--blue-800); border-color: var(--white); width: 100%; justify-content: center; } .consulting-cta-box .btn-primary:hover { background: var(--blue-50); border-color: var(--blue-50); } .consulting-availability-box { padding: var(--space-5); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .consulting-availability-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; color: var(--black); margin-bottom: var(--space-3); } .availability-indicator { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--grey-600); } .availability-dot { width: 10px; height: 10px; border-radius: 50%; background: #10B981; flex-shrink: 0; } .availability-dot--limited { background: #F59E0B; } .consulting-testimonial { padding: var(--space-6); background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); } .testimonial-quote { font-size: var(--text-sm); color: var(--grey-700); line-height: var(--leading-relaxed); font-style: italic; margin-bottom: var(--space-4); } .testimonial-author { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--grey-500); } /* ─── 38. WORKSHOPS ─── */ .workshops-page-header { padding: var(--space-16) 0 var(--space-10); border-bottom: 1px solid var(--color-border); } .workshops-grid-section { padding: var(--space-16) 0; } .workshops-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } .workshop-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .workshop-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); } .workshop-card-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--grey-100); } .workshop-card-body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; } .workshop-date-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--blue-50); border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; color: var(--blue-800); margin-bottom: var(--space-4); letter-spacing: 0.02em; } .workshop-card-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-3); line-height: var(--leading-snug); } .workshop-card-desc { font-size: var(--text-sm); color: var(--grey-500); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); flex: 1; } .workshop-card-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); } .workshop-meta-item { font-size: var(--text-xs); color: var(--grey-500); font-family: var(--font-heading); font-weight: 500; } .workshop-spots { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; color: #059669; padding: var(--space-1) var(--space-2); background: #F0FDF4; border-radius: var(--radius-sm); } .workshop-spots--limited { color: #D97706; background: #FFFBEB; } .workshop-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-5); border-top: 1px solid var(--color-border); margin-top: auto; } .workshop-price { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--black); } .workshop-price-free { color: #059669; } /* Workshop single page */ .workshop-page-header { padding: var(--space-16) 0; background: var(--blue-800); color: var(--white); } .workshop-header-inner { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-12); align-items: start; } .workshop-header-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-200); display: block; margin-bottom: var(--space-4); } .workshop-header-title { font-size: var(--text-4xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--white); margin-bottom: var(--space-5); line-height: var(--leading-tight); } .workshop-header-desc { font-size: var(--text-lg); color: var(--blue-100); line-height: var(--leading-loose); margin-bottom: var(--space-8); } .workshop-header-stats { display: flex; gap: var(--space-8); flex-wrap: wrap; } .workshop-stat-value { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--white); } .workshop-stat-label { font-size: var(--text-xs); color: var(--blue-200); font-family: var(--font-heading); display: block; } .workshop-register-card { background: var(--white); color: var(--black); border-radius: var(--radius-xl); padding: var(--space-8); } .workshop-register-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-2); } .workshop-register-price { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; color: var(--black); line-height: 1; margin-bottom: var(--space-2); letter-spacing: var(--tracking-tight); } .workshop-register-date { font-size: var(--text-sm); color: var(--grey-500); margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); } .workshop-includes-list { list-style: none; padding: 0; margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .workshop-includes-list li { font-size: var(--text-sm); color: var(--grey-600); display: flex; align-items: flex-start; gap: var(--space-3); } .workshop-includes-list li::before { content: "✓"; color: var(--blue-800); font-weight: 700; flex-shrink: 0; } .workshop-register-spots { font-size: var(--text-xs); color: var(--grey-400); text-align: center; margin-top: var(--space-3); } .workshop-body { padding: var(--space-16) 0; } .workshop-body-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-12); align-items: start; } .workshop-body-col {} .workshop-sidebar { position: sticky; top: calc(64px + var(--space-8)); display: flex; flex-direction: column; gap: var(--space-6); } .workshop-section-title { font-size: var(--text-2xl); font-weight: 700; color: var(--black); margin-bottom: var(--space-8); } .schedule-list { display: flex; flex-direction: column; gap: var(--space-3); } .schedule-item { padding: var(--space-4); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; gap: var(--space-4); } .schedule-time { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; color: var(--blue-800); white-space: nowrap; flex-shrink: 0; min-width: 60px; } .schedule-content {} .schedule-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--black); } .schedule-desc { font-size: var(--text-xs); color: var(--grey-500); margin-top: var(--space-1); margin-bottom: 0; } .faq-list { display: flex; flex-direction: column; gap: var(--space-4); } .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .faq-item summary { padding: var(--space-5); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--black); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: var(--grey-50); transition: background-color var(--transition-fast); user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: var(--text-xl); font-weight: 300; color: var(--grey-400); flex-shrink: 0; margin-left: var(--space-4); transition: transform var(--transition-fast); } .faq-item[open] > summary { background: var(--blue-50); color: var(--blue-800); } .faq-item[open] > summary::after { transform: rotate(45deg); } .faq-item summary:hover { background: var(--blue-50); } .faq-answer { padding: var(--space-5); font-size: var(--text-base); color: var(--grey-600); line-height: var(--leading-relaxed); margin: 0; border-top: 1px solid var(--color-border); background: var(--white); } /* ─── 39. NEW SECTION RESPONSIVE OVERRIDES ─── */ @media (max-width: 1024px) { .videos-banner { grid-template-columns: 1fr 1fr; } .videos-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr 1fr; } .course-header-inner, .course-body-layout { grid-template-columns: 1fr; } .course-sidebar { position: static; } .consulting-header-inner, .consulting-layout { grid-template-columns: 1fr; } .consulting-sidebar { position: static; } .workshop-header-inner, .workshop-body-layout { grid-template-columns: 1fr; } .workshop-sidebar { position: static; } .workshops-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } .video-page-layout { grid-template-columns: 1fr; } .video-page-sidebar { position: static; } .courses-intro-inner { grid-template-columns: 1fr; gap: var(--space-8); } } @media (max-width: 768px) { .videos-banner { grid-template-columns: 1fr; } .video-item { grid-template-columns: 1fr; } .video-item-thumb { aspect-ratio: 16/9; } .pricing-grid { grid-template-columns: 1fr; } .learning-grid { grid-template-columns: 1fr; } .who-for-grid { grid-template-columns: 1fr; } .consulting-intro-stats, .workshop-header-stats, .course-header-stats { flex-direction: column; gap: var(--space-4); } } /* ─── 40. VIDEO ITEM VIEWS BADGE ─── */ .video-item-views { display: inline-block; font-size: var(--text-xs); color: var(--grey-400); margin-bottom: var(--space-1); } /* ─── 41. NEWSLETTER PAGE ─── */ .newsletter-page-hero { background: var(--blue-800); color: #fff; padding: var(--space-20) 0 var(--space-16); } .newsletter-page-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; color: #fff; line-height: 1.1; margin: var(--space-3) 0 var(--space-4); } .newsletter-page-subtitle { font-size: var(--text-lg); color: var(--blue-100, #dbeafe); max-width: 520px; line-height: 1.6; margin-bottom: var(--space-6); } .newsletter-page-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .newsletter-page-benefits li { display: flex; align-items: center; gap: var(--space-2); color: var(--blue-100, #dbeafe); font-size: var(--text-base); } .newsletter-page-benefits svg { flex-shrink:0; color: #93c5fd; } /* Embed section */ .newsletter-embed-section { padding: var(--space-16) 0; background: var(--grey-50); } .newsletter-embed-layout { display: grid; grid-template-columns: 5fr 4fr; gap: var(--space-12); align-items: start; } .newsletter-embed-box { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: var(--space-8); } .newsletter-embed-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue-600); margin-bottom: var(--space-2); } .newsletter-embed-title { font-size: var(--text-2xl); font-weight: 800; color: var(--blue-900); margin: 0 0 var(--space-3); } .newsletter-embed-body { color: var(--grey-600); line-height: 1.65; margin-bottom: var(--space-5); } .substack-embed-wrapper { margin-bottom: var(--space-4); overflow: hidden; border-radius: var(--radius-lg); } .newsletter-embed-fine-print { font-size: var(--text-sm); color: var(--grey-400); margin-top: var(--space-3); } .newsletter-embed-fine-print a { color: var(--blue-600); } /* Issue preview box */ .newsletter-preview-box { padding-top: var(--space-2); } .newsletter-issue-preview { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-xl); overflow: hidden; } .issue-preview-header { background: var(--blue-800); padding: var(--space-3) var(--space-5); display: flex; justify-content: space-between; align-items: center; } .issue-preview-tag { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #93c5fd; } .issue-preview-date { font-size: var(--text-xs); color: var(--blue-100, #dbeafe); } .issue-preview-title { font-size: var(--text-base); font-weight: 700; color: var(--blue-900); padding: var(--space-4) var(--space-5) var(--space-2); border-bottom: 1px solid var(--grey-100); margin: 0; } .issue-preview-sections { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .issue-section-label { display:block; font-size:var(--text-sm); font-weight:700; color:var(--blue-800); margin-bottom:var(--space-1); } .issue-section p { font-size:var(--text-sm); color:var(--grey-600); line-height:1.55; margin:0; } /* Testimonials */ .newsletter-testimonials-section { padding: var(--space-16) 0; background: #fff; } .newsletter-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); } .newsletter-testimonial { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: var(--space-6); margin: 0; } .newsletter-testimonial p { font-size:var(--text-sm); line-height:1.65; color:var(--grey-700); margin:0 0 var(--space-4); } .newsletter-testimonial footer { font-size:var(--text-xs); color:var(--grey-400); } /* Archive CTA */ .newsletter-archive-section { padding: var(--space-12) 0; background: var(--grey-50); border-top:1px solid var(--grey-200); } .newsletter-archive-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); } .newsletter-archive-inner h2 { font-size:var(--text-2xl); font-weight:800; margin:0 0 var(--space-2); } .newsletter-archive-inner p { color:var(--grey-600); margin:0; } /* ─── 42. RESOURCES PAGE ─── */ .resources-page-hero { background: var(--blue-800); color: #fff; padding: var(--space-16) 0 var(--space-12); } .resources-page-hero .page-title { color: #fff; } .resources-page-hero .page-description { color: var(--blue-100, #dbeafe); } .resources-page-hero .section-label { color: #93c5fd; } .resources-page-hero .breadcrumb a { color: var(--blue-100, #dbeafe); } .resources-category-section { padding: var(--space-14) 0; } .resources-category-section--alt { background: var(--grey-50); } .resources-category-header { margin-bottom: var(--space-8); } .resources-category-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue-600); margin-bottom: var(--space-2); } .resources-category-title { font-size: var(--text-2xl); font-weight: 800; margin: 0; } .resources-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .resources-grid--three { grid-template-columns: repeat(3, 1fr); } .resource-card { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; gap: var(--space-4); transition: box-shadow 0.2s, transform 0.2s; } .resource-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .resource-card--cheatsheet { flex-direction: column; text-decoration: none; color: inherit; } .resource-card--external { border-left: 4px solid var(--blue-400); } .resource-card-icon { flex-shrink: 0; padding-top: var(--space-1); } .resource-card-body { flex: 1; } .resource-card-type { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue-600); display: block; margin-bottom: var(--space-1); } .resource-card-title { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-2); color: var(--blue-900); } .resource-card-desc { font-size: var(--text-sm); color: var(--grey-600); line-height: 1.6; margin: 0 0 var(--space-4); } .resource-card-cta { display: inline-block; } .resource-card-link { font-size: var(--text-sm); font-weight: 600; color: var(--blue-600); } /* ─── 43. ABOUT PAGE ─── */ .about-hero { background: var(--blue-800); padding: var(--space-20) 0 var(--space-16); color: #fff; } .about-hero-inner { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-12); align-items: start; } .about-hero-title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; color: #fff; line-height: 1.1; margin: var(--space-3) 0 var(--space-5); } .about-hero-body { color: var(--blue-100, #dbeafe); line-height: 1.7; font-size: var(--text-lg); margin-bottom: var(--space-4); } .about-hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); } .about-hero-avatar { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; color: #fff; } .about-avatar-placeholder { margin-bottom: var(--space-3); } .about-avatar-name { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-1); } .about-avatar-title { font-size: var(--text-sm); color: var(--blue-100, #dbeafe); margin: 0 0 var(--space-4); } .about-avatar-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); } .about-avatar-links a { font-size: var(--text-sm); color: #93c5fd; text-decoration: underline; } .about-what-section { padding: var(--space-16) 0; } .about-what-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); } .about-what-title { font-size: var(--text-2xl); font-weight: 800; margin: var(--space-3) 0 var(--space-5); } .about-what-inner p { color: var(--grey-700); line-height: 1.7; margin-bottom: var(--space-4); } .about-pillars-mini { display: flex; flex-direction: column; gap: var(--space-5); } .about-pillar-item { display: flex; gap: var(--space-4); align-items: flex-start; } .about-pillar-number { font-size: var(--text-sm); font-weight: 800; color: var(--blue-400); min-width: 2rem; padding-top: 3px; } .about-pillar-item strong { display: block; font-size: var(--text-base); color: var(--blue-900); margin-bottom: var(--space-1); } .about-pillar-item p { font-size: var(--text-sm); color: var(--grey-600); margin: 0; line-height: 1.55; } .about-numbers-section { background: var(--blue-800); padding: var(--space-12) 0; } .about-numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: center; } .about-number-value { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #fff; } .about-number-label { font-size: var(--text-sm); color: var(--blue-100, #dbeafe); margin-top: var(--space-1); display: block; } .about-follow-section { padding: var(--space-16) 0; background: var(--grey-50); } .about-follow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .about-follow-card { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; gap: var(--space-4); text-decoration: none; color: inherit; transition: box-shadow 0.2s, transform 0.2s; } .about-follow-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .about-follow-icon { flex-shrink: 0; color: var(--blue-700); padding-top: var(--space-1); } .about-follow-card h3 { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-2); color: var(--blue-900); } .about-follow-card p { font-size: var(--text-sm); color: var(--grey-600); line-height: 1.6; margin: 0 0 var(--space-3); } .about-follow-link { font-size: var(--text-sm); font-weight: 700; color: var(--blue-600); } .about-contact-section { padding: var(--space-12) 0; border-top: 1px solid var(--grey-200); } .about-contact-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); } .about-contact-inner h2 { font-size: var(--text-2xl); font-weight: 800; margin: var(--space-3) 0 var(--space-4); } /* ─── 44. RESPONSIVE FOR NEW PAGES ─── */ @media (max-width: 1024px) { .newsletter-embed-layout { grid-template-columns: 1fr; } .about-what-inner { grid-template-columns: 1fr; } .about-hero-inner { grid-template-columns: 1fr; } .about-numbers-grid { grid-template-columns: repeat(2, 1fr); } .about-follow-grid { grid-template-columns: 1fr; } .resources-grid--three { grid-template-columns: 1fr 1fr; } .newsletter-testimonials-grid { grid-template-columns: 1fr; } .newsletter-archive-inner { flex-direction: column; } .about-contact-inner { flex-direction: column; } } @media (max-width: 768px) { .resources-grid { grid-template-columns: 1fr; } .resources-grid--three { grid-template-columns: 1fr; } .about-numbers-grid { grid-template-columns: 1fr 1fr; } .resource-card { flex-direction: column; } .newsletter-embed-box { padding: var(--space-5); } } /* ─── 45. HERO PROOF BAR + YOUTUBE SECTION + TESTIMONIALS ─── */ /* Hero landing modifier */ .about-hero--landing { background: linear-gradient(135deg, var(--blue-800) 0%, #1e3a5f 100%); } /* Social proof bar under hero CTAs */ .about-hero-proof { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-5); flex-wrap: wrap; } .proof-item { font-size: var(--text-sm); color: var(--blue-100, #dbeafe); } .proof-item strong { color: #fff; } .proof-divider { color: var(--blue-400, #60a5fa); font-size: var(--text-xs); } /* YouTube section (about + homepage) */ .about-youtube-section { padding: var(--space-16) 0; background: var(--grey-50); border-top: 1px solid var(--grey-200); } .about-youtube-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); margin-bottom: var(--space-10); flex-wrap: wrap; } .about-youtube-sub { font-size: var(--text-base); color: var(--grey-600); margin-top: var(--space-3); max-width: 56ch; line-height: 1.6; } .about-youtube-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .about-youtube-card { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; position: relative; } .about-youtube-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .about-youtube-card--featured { border-color: var(--blue-200); } .about-yt-badge { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; background: var(--blue-800); color: #fff; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25em 0.75em; border-radius: var(--radius-sm); } .about-yt-badge--popular { background: #f59e0b; } .about-yt-thumb-wrap { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--grey-100); } .about-yt-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .about-youtube-card:hover .about-yt-thumb-wrap img { transform: scale(1.03); } .about-yt-thumb-wrap .video-play-overlay { width: 48px; height: 48px; } .about-yt-info { padding: var(--space-4) var(--space-5); } .about-yt-meta { font-size: var(--text-xs); color: var(--grey-400); font-family: var(--font-heading); margin-bottom: var(--space-2); } .about-yt-title { font-size: var(--text-lg); font-weight: 700; color: var(--blue-900); line-height: var(--leading-snug); margin: 0; } /* Testimonials */ .about-testimonials-section { padding: var(--space-16) 0; } .about-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .about-testimonial-card { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: var(--space-6); margin: 0; } .about-testimonial-card p { font-size: var(--text-base); color: var(--grey-700); line-height: 1.7; font-style: italic; margin: 0 0 var(--space-4); } .about-testimonial-card footer { font-size: var(--text-sm); color: var(--grey-500); } .about-testimonial-card footer strong { color: var(--blue-900); } /* ─── 46. VIDEOS LIST PAGE — NEW LAYOUT ─── */ .videos-featured-section { padding: var(--space-14) 0; } .videos-topwatched-section { padding: var(--space-14) 0; background: var(--grey-50); } .videos-library-section { padding: var(--space-14) 0; } /* 3-column grid for the 3 latest videos (wider layout) */ .videos-latest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .video-latest-card { display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--grey-200); background: #fff; text-decoration: none; color: inherit; transition: box-shadow 0.2s, transform 0.2s; } .video-latest-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; color: inherit; } .video-latest-card .video-item-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; } .video-latest-card .video-item-thumb img { width: 100%; height: 100%; object-fit: cover; } .video-latest-card .video-item-content { padding: var(--space-4); } .video-latest-card .video-item-title { font-size: var(--text-base); margin-top: var(--space-1); } /* Theme blocks in the video library */ .videos-theme-block { margin-bottom: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid var(--grey-200); } .videos-theme-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .videos-theme-header { margin-bottom: var(--space-6); } .videos-theme-title { font-size: var(--text-2xl); font-weight: 800; color: var(--blue-900); margin: 0 0 var(--space-2); } .videos-theme-desc { font-size: var(--text-sm); color: var(--grey-500); margin: 0; max-width: 72ch; line-height: 1.6; } /* ─── 47. COURSES GRID — NEW LAYOUT ─── */ .courses-grid-section { padding: var(--space-14) 0; } .courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; } .course-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: border-color 0.2s, box-shadow 0.2s; } .course-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-lg); } .course-card--featured { border-color: var(--blue-800); box-shadow: var(--shadow-md); } .course-card-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--grey-100); } .course-badge { position: absolute; top: 0; right: var(--space-6); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-2) var(--space-4); border-radius: 0 0 var(--radius-md) var(--radius-md); color: #fff; } .course-badge--popular { background: var(--blue-800); } .course-badge--free { background: #16a34a; } .course-card-body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; } .course-card-level { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-700); display: block; margin-bottom: var(--space-2); } .course-card-title { font-size: var(--text-xl); font-weight: 700; color: var(--black); margin: 0 0 var(--space-2); line-height: var(--leading-snug); } .course-card-desc { font-size: var(--text-sm); color: var(--grey-500); line-height: 1.6; margin: 0 0 var(--space-4); flex: 1; } .course-card-stats { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--grey-400); flex-wrap: wrap; } .course-card-price { padding: var(--space-4) var(--space-6); background: var(--grey-50); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .course-card--featured .course-card-price { background: var(--blue-50); } .course-card-features { padding: var(--space-4) var(--space-6); } .course-card-cta { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); } .course-card-cta .btn-primary, .course-card-cta .btn-secondary, .course-card-cta .course-free-btn { width: 100%; justify-content: center; text-align: center; } .course-free-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-3) var(--space-5); background: #16a34a; color: #fff; border: none; border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; cursor: pointer; transition: background 0.2s; } .course-free-btn:hover { background: #15803d; } /* Free course notice banner */ .courses-free-notice { background: #f0fdf4; border-top: 1px solid #bbf7d0; border-bottom: 1px solid #bbf7d0; padding: var(--space-5) 0; } .courses-free-notice-inner { display: flex; gap: var(--space-4); align-items: flex-start; } .courses-free-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; } .courses-free-notice-inner h3 { font-size: var(--text-lg); font-weight: 700; color: #15803d; margin: 0 0 var(--space-1); } .courses-free-notice-inner p { font-size: var(--text-sm); color: var(--grey-700); line-height: 1.6; margin: 0; } /* Free course email capture dialog */ .free-course-dialog { border: none; border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,0.2); padding: 0; max-width: 480px; width: calc(100vw - 2rem); } .free-course-dialog::backdrop { background: rgba(0,0,0,0.6); } .fcd-close { position: absolute; top: var(--space-4); right: var(--space-4); background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--grey-400); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .fcd-close:hover { background: var(--grey-100); color: var(--grey-700); } .fcd-inner { padding: var(--space-8); } .fcd-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue-700); margin-bottom: var(--space-2); } .fcd-title { font-size: var(--text-2xl); font-weight: 800; color: var(--black); margin: 0 0 var(--space-3); } .fcd-sub { font-size: var(--text-sm); color: var(--grey-600); line-height: 1.6; margin: 0 0 var(--space-6); } .fcd-form { display: flex; flex-direction: column; gap: var(--space-4); } .fcd-field { display: flex; flex-direction: column; gap: var(--space-1); } .fcd-field-label { font-size: var(--text-sm); font-weight: 600; color: var(--grey-700); } .fcd-input { padding: var(--space-3) var(--space-4); border: 1.5px solid var(--grey-300); border-radius: var(--radius-md); font-size: var(--text-base); font-family: var(--font-body); transition: border-color 0.15s; } .fcd-input:focus { outline: none; border-color: var(--blue-600); } .fcd-submit { margin-top: var(--space-2); } .fcd-privacy { font-size: var(--text-xs); color: var(--grey-400); text-align: center; margin: 0; } .fcd-success { text-align: center; padding: var(--space-4) 0; } .fcd-success p { font-size: var(--text-base); color: var(--grey-700); line-height: 1.6; } /* Resource card feature chips */ .resource-card-features { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .resource-card-features span { font-size: var(--text-xs); font-weight: 600; background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-200); border-radius: 999px; padding: 0.2em 0.75em; } /* ─── 48. RESPONSIVE — SECTIONS 45-47 ─── */ @media (max-width: 1024px) { .about-youtube-grid { grid-template-columns: 1fr; } .about-testimonials-grid { grid-template-columns: 1fr; } .videos-latest-grid { grid-template-columns: 1fr 1fr; } .courses-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .about-hero-proof { gap: var(--space-3); } .about-youtube-header { flex-direction: column; } .videos-latest-grid { grid-template-columns: 1fr; } .courses-grid { grid-template-columns: 1fr; } } /* ─── 49. DOWNLOAD LANDING PAGES ─── */ /* Hero */ .download-hero { padding: var(--space-20) 0 var(--space-16); background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 100%); color: var(--white); } .download-hero-inner { display: grid; grid-template-columns: 1fr 420px; gap: var(--space-16); align-items: center; } .download-hero-text { max-width: 600px; } /* Badges */ .download-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); } .download-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.875rem; border-radius: 999px; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,0.12); color: var(--blue-100); border: 1px solid rgba(255,255,255,0.2); } .download-badge--type { background: rgba(99,102,241,0.35); border-color: rgba(165,180,252,0.4); color: #c7d2fe; } .download-badge--free { background: rgba(22,163,74,0.35); border-color: rgba(74,222,128,0.4); color: #bbf7d0; } /* Titles */ .download-title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; color: var(--white); line-height: var(--leading-tight); margin: 0 0 var(--space-5); } .download-lead { font-size: var(--text-lg); color: var(--blue-100); line-height: 1.7; margin: 0 0 var(--space-8); } /* Hero CTA */ .download-cta { font-size: var(--text-base); padding: var(--space-4) var(--space-8); } /* Preview image */ .download-preview { border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.4); } .download-preview-img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; } /* Body layout */ .download-body { padding: var(--space-16) 0 var(--space-20); background: var(--white); } .download-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-16); align-items: start; } /* Sections */ .download-section { margin-bottom: var(--space-12); } .download-section-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--black); margin: 0 0 var(--space-6); padding-bottom: var(--space-3); border-bottom: 2px solid var(--blue-100); } /* Includes list */ .download-includes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .download-includes-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); color: var(--grey-700); line-height: 1.6; } .download-check { color: #16a34a; flex-shrink: 0; margin-top: 2px; } /* Who for list */ .download-who-for { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .download-who-for li { padding: var(--space-3) var(--space-5); background: var(--blue-50); border-left: 3px solid var(--blue-500); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--text-sm); color: var(--grey-800); line-height: 1.6; } /* Prose content area */ .download-content h2 { font-size: var(--text-xl); font-weight: 700; color: var(--black); margin: var(--space-8) 0 var(--space-4); } .download-content h3 { font-size: var(--text-lg); font-weight: 700; color: var(--grey-800); margin: var(--space-6) 0 var(--space-3); } .download-content p { font-size: var(--text-base); color: var(--grey-700); line-height: 1.7; margin-bottom: var(--space-4); } .download-content pre { background: var(--grey-900); color: #e2e8f0; padding: var(--space-5); border-radius: var(--radius-lg); overflow-x: auto; margin: var(--space-6) 0; font-size: var(--text-sm); line-height: 1.6; } .download-content code { font-family: var(--font-mono); font-size: 0.9em; } .download-content :not(pre) > code { background: var(--grey-100); color: var(--blue-800); padding: 0.15em 0.45em; border-radius: var(--radius-sm); } .download-content table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; } .download-content th { background: var(--grey-100); font-weight: 700; text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--grey-700); } .download-content td { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--grey-700); border-bottom: 1px solid var(--grey-200); } .download-content ul, .download-content ol { padding-left: var(--space-6); color: var(--grey-700); line-height: 1.8; margin-bottom: var(--space-4); } /* Bottom CTA */ .download-bottom-cta { margin-top: var(--space-12); padding: var(--space-10) var(--space-8); background: var(--blue-50); border-radius: var(--radius-xl); border: 1px solid var(--blue-100); text-align: center; } .download-bottom-cta-title { font-size: var(--text-2xl); font-weight: 800; color: var(--blue-900); margin: 0 0 var(--space-2); } /* Sidebar */ .download-sidebar { position: sticky; top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); } .download-sidebar-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); } .download-sidebar-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--grey-900); margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--grey-200); } .download-details { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .download-detail-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); } .download-detail-row dt { color: var(--grey-500); font-weight: 500; } .download-detail-row dd { color: var(--grey-900); font-weight: 600; margin: 0; text-align: right; } .download-related-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .download-related-links a { font-size: var(--text-sm); font-weight: 600; color: var(--blue-700); text-decoration: none; } .download-related-links a:hover { color: var(--blue-900); } /* ─── 49a. DOWNLOADS — RESPONSIVE ─── */ @media (max-width: 1024px) { .download-hero-inner { grid-template-columns: 1fr; } .download-preview { max-width: 480px; } .download-layout { grid-template-columns: 1fr; } .download-sidebar { position: static; } } @media (max-width: 768px) { .download-title { font-size: var(--text-3xl); } .download-hero { padding: var(--space-12) 0 var(--space-10); } } /* ─── 50. DOWNLOAD EMAIL GATE ─── */ .download-email-gate { margin-top: var(--space-6); } /* Form fields */ .download-gate-fields { display: flex; flex-direction: column; gap: var(--space-3); } .download-gate-fields--inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; } .download-gate-fields--inline .download-gate-input { flex: 1 1 180px; } .download-gate-input { padding: var(--space-3) var(--space-4); border: 1.5px solid rgba(255,255,255,0.25); border-radius: var(--radius-md); background: rgba(255,255,255,0.1); color: var(--white); font-size: var(--text-base); font-family: var(--font-body); transition: border-color 0.15s, background 0.15s; width: 100%; } .download-gate-input::placeholder { color: rgba(255,255,255,0.45); } .download-gate-input:focus { outline: none; border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.15); } /* Inside bottom CTA (white background) */ .download-bottom-cta .download-gate-input { border-color: var(--grey-300); background: var(--white); color: var(--grey-900); } .download-bottom-cta .download-gate-input::placeholder { color: var(--grey-400); } .download-bottom-cta .download-gate-input:focus { border-color: var(--blue-500); background: var(--white); } .download-gate-btn { white-space: nowrap; } .download-gate-btn:disabled { opacity: 0.65; cursor: wait; } /* Note + error */ .download-gate-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: rgba(255,255,255,0.5); } .download-bottom-cta .download-gate-note { color: var(--grey-400); } .download-gate-error { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: #fca5a5; font-weight: 500; } .download-bottom-cta .download-gate-error { color: #dc2626; } /* Success state */ .download-gate-success { padding: var(--space-5) var(--space-6); background: rgba(22, 163, 74, 0.2); border: 1px solid rgba(74, 222, 128, 0.4); border-radius: var(--radius-xl); } .download-bottom-cta .download-gate-success { background: #f0fdf4; border-color: #86efac; } .download-gate-success-inner { display: flex; gap: var(--space-4); align-items: flex-start; } .download-gate-check { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1; } .download-gate-success-title { font-size: var(--text-base); font-weight: 700; color: var(--white); margin: 0 0 var(--space-1); line-height: 1.3; } .download-bottom-cta .download-gate-success-title { color: #15803d; } .download-gate-success-sub { font-size: var(--text-sm); color: rgba(255,255,255,0.7); margin: 0 0 var(--space-3); line-height: 1.5; } .download-bottom-cta .download-gate-success-sub { color: var(--grey-600); } .download-gate-direct { font-size: var(--text-sm); font-weight: 600; color: #86efac; text-decoration: underline; text-underline-offset: 2px; } .download-bottom-cta .download-gate-direct { color: #16a34a; } /* Responsive */ @media (max-width: 640px) { .download-gate-fields--inline { flex-direction: column; } .download-gate-fields--inline .download-gate-input { flex: unset; width: 100%; } } /* ─── 51. MERMAID DIAGRAMS ─── */ .mermaid-wrap { margin: var(--space-8) 0; padding: var(--space-6); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow-x: auto; text-align: center; } .mermaid svg { max-width: 100%; height: auto; } .mermaid-wrap .mermaid { display: inline-block; } /* ─── 52. MATH (KATEX) ─── */ .math-display { overflow-x: auto; overflow-y: hidden; margin: var(--space-8) 0; padding: var(--space-5) var(--space-6); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-align: center; } .katex-display { overflow-x: auto; overflow-y: hidden; margin: var(--space-6) 0; } .katex-display > .katex { max-width: 100%; } /* Inline math baseline fix */ .katex { font-size: 1.05em; } /* ─── 53. TABLE SCROLL WRAPPER ─── */ .table-wrap { width: 100%; overflow-x: auto; margin: var(--space-6) 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .table-wrap table { width: 100%; min-width: 480px; border-collapse: collapse; display: table; margin: 0; } .table-wrap th { background: var(--blue-50); color: var(--blue-900); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--blue-200); white-space: nowrap; } .table-wrap td { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--grey-700); border-bottom: 1px solid var(--grey-100); line-height: 1.5; vertical-align: top; } .table-wrap tr:last-child td { border-bottom: none; } .table-wrap--striped tr:nth-child(even) td { background: var(--grey-50); } .table-wrap--striped tbody tr:hover td { background: var(--blue-50); transition: background-color var(--transition-fast); } /* ─── 54. ENHANCED FIGURES ─── */ .figure-enhanced { margin: var(--space-8) 0; } .figure-enhanced img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .figure-enhanced figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--grey-500); font-style: italic; text-align: center; line-height: var(--leading-relaxed); } .figure-enhanced--wide { margin-inline: calc(-1 * var(--space-10)); } .figure-enhanced--full { margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw; } /* Lightbox (CSS :target pattern) */ .figure-lightbox-toggle { cursor: zoom-in; display: block; } .figure-lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 9999; align-items: center; justify-content: center; padding: var(--space-8); } .figure-lightbox:target .figure-lightbox-overlay { display: flex; } .figure-lightbox-overlay img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--radius-lg); border: none; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6); } .figure-lightbox-close { position: fixed; top: var(--space-5); right: var(--space-5); color: var(--white); font-size: 2rem; text-decoration: none; line-height: 1; opacity: 0.75; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); transition: opacity var(--transition-fast), background-color var(--transition-fast); } .figure-lightbox-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); } @media (max-width: 768px) { .figure-enhanced--wide { margin-inline: calc(-1 * var(--space-4)); } .figure-enhanced--full { margin-inline: calc(-1 * var(--space-4)); width: auto; max-width: none; } } /* ─── 55. SHORTCODES: KEY-POINT, STEPS, TWO-COL ─── */ /* Key-point highlight box */ .key-point { margin: var(--space-8) 0; padding: var(--space-5) var(--space-6); background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid #86efac; border-left: 4px solid #16a34a; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .key-point-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: #16a34a; margin-bottom: var(--space-2); display: block; } .key-point-body { font-size: var(--text-base); color: var(--grey-800); line-height: var(--leading-relaxed); } .key-point-body p:last-child { margin-bottom: 0; } .key-point-body > *:first-child { margin-top: 0; } /* Steps container */ .steps { margin: var(--space-8) 0; display: flex; flex-direction: column; gap: 0; } .step { display: flex; gap: var(--space-5); align-items: flex-start; position: relative; } .step:not(:last-child)::after { content: ''; position: absolute; left: calc(14px + var(--space-2)); top: 36px; bottom: 0; width: 2px; background: var(--blue-100); } .step-num { width: 32px; height: 32px; min-width: 32px; background: var(--blue-800); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; flex-shrink: 0; margin-top: 2px; position: relative; z-index: 1; } .step-body { padding-bottom: var(--space-8); flex: 1; } .step:last-child .step-body { padding-bottom: 0; } .step-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--black); margin-bottom: var(--space-2); } .step-content { font-size: var(--text-base); color: var(--grey-600); line-height: var(--leading-relaxed); } .step-content p:last-child { margin-bottom: 0; } .step-content > *:first-child { margin-top: 0; } /* Two-column layout */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin: var(--space-8) 0; } .two-col-item { padding: var(--space-5) var(--space-6); background: var(--grey-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .two-col-item--green { background: #f0fdf4; border-color: #86efac; } .two-col-item--red { background: #fef2f2; border-color: #fca5a5; } .two-col-item--blue { background: var(--blue-50); border-color: var(--blue-200); } .two-col-header { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase; margin-bottom: var(--space-4); display: block; color: var(--grey-500); } .two-col-item--green .two-col-header { color: #16a34a; } .two-col-item--red .two-col-header { color: #dc2626; } .two-col-item--blue .two-col-header { color: var(--blue-800); } .two-col-body { font-size: var(--text-sm); color: var(--grey-700); line-height: var(--leading-relaxed); } .two-col-body p:last-child { margin-bottom: 0; } .two-col-body > *:first-child { margin-top: 0; } .two-col-body ul, .two-col-body ol { padding-left: var(--space-5); } @media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }