Update leadership.html
· 1 year ago
563882b58f5499980eeee5b338bc7f6ad01cc2a6
Parent:
72fffd51e
1 file changed +249 −95
- leadership.html +249 −95
Diff
--- a/leadership.html +++ b/leadership.html @@ -4,9 +4,9 @@ <!-- === METADATA === --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>The 15 Commitments of Conscious Leadership Cheatsheet</title> + <title>The 15 Commitments of Conscious Leadership Cheatsheet (Enhanced)</title> <meta name="description" content="An interactive cheatsheet summarizing The 15 Commitments of Conscious Leadership by Dethmer, Chapman, & Klemp. Learn about leading 'above the line' with responsibility, curiosity, candor, and more, with clarifications and references."> - <meta name="keywords" content="Conscious Leadership, 15 Commitments, Jim Dethmer, Diana Chapman, Kaley Klemp, leadership, cheatsheet, above the line, responsibility, curiosity, candor, integrity, appreciation, leadership development, Byron Katie, Sedona Method, Zone of Genius"> + <meta name="keywords" content="Conscious Leadership, 15 Commitments, Jim Dethmer, Diana Chapman, Kaley Klemp, leadership, cheatsheet, above the line, responsibility, curiosity, candor, integrity, appreciation, leadership development, Byron Katie, Sedona Method, Zone of Genius, AOS, animation on scroll"> <meta name="author" content="David Veksler"> <!-- Or adjust as needed --> <!-- Canonical URL (Update if different) --> @@ -33,91 +33,233 @@ <!-- <meta name="twitter:creator" content="@YourHandle"> --> <!-- === CSS === --> + <!-- Google Fonts --> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&family=Lato:wght@400;700&display=swap" rel="stylesheet"> + <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <!-- Bootstrap Icons CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> + <!-- AOS CSS (Animate On Scroll) --> + <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> <!-- Custom CSS --> <style> + /* === Variables === */ + :root { + --font-primary: 'Lato', sans-serif; + --font-headings: 'Poppins', sans-serif; + --color-bg: #f8f9fa; + --color-text: #343a40; + --color-primary: #1a5a99; + --color-secondary: #4a7ab8; + --color-card-bg: #ffffff; + --color-card-border: #e9ecef; + --color-link: #0d6efd; + --color-link-hover: #0a58ca; + --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.07); /* Slightly softer */ + --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.1); /* Enhanced hover shadow */ + } + + /* === Base & Typography === */ body { - background-color: #f0f4f8; /* Slightly softer blue/gray background */ - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: var(--color-bg); + font-family: var(--font-primary); + color: var(--color-text); padding-top: 0; - padding-bottom: 20px; - font-size: 16px; + padding-bottom: 3rem; + font-size: 16.5px; + line-height: 1.65; /* Slightly more line height */ + } + + h1, h2, h3, h4, h5, h6 { + font-family: var(--font-headings); + color: var(--color-primary); + font-weight: 600; } + a { + color: var(--color-link); + text-decoration: none; + transition: color 0.2s ease-in-out; + } + a:hover { + color: var(--color-link-hover); + text-decoration: underline; + } + + /* === Header === */ .page-header { - background-color: #e2eafc; /* Lighter blue */ - padding: 2rem 1.5rem; + padding: 3rem 1.5rem; margin-bottom: 3rem; text-align: center; - border-bottom: 1px solid #c8d8e8; + } + .page-header h1 { + color: var(--color-primary); + font-weight: 500; + margin-bottom: 0.75rem; + font-size: 2.8rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + } + .page-header h1 .bi { + font-size: 0.9em; + color: var(--color-secondary); + } + .page-header .lead { + color: var(--color-secondary); + font-size: 1.15rem; + max-width: 700px; + margin-left: auto; + margin-right: auto; } - .page-header h1 { color: #1c3d7e; font-weight: 300; margin-bottom: 0.5rem; } /* Deeper blue */ - .page-header .lead { color: #3b5998; font-size: 1.1rem; margin-bottom: 0; } /* Softer blue */ - - .container { perspective: 1500px; } + /* === Container & Grid === */ + /* Removed perspective as tilt is gone */ + .row > * { margin-bottom: 2rem; } + /* === Info Cards === */ .info-card { - background-color: #ffffff; border: 1px solid #dce1e6; border-radius: 0.35rem; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); height: 100%; - display: flex; flex-direction: column; transform-style: preserve-3d; + background-color: var(--color-card-bg); + border: 1px solid var(--color-card-border); + border-radius: 0.5rem; + box-shadow: var(--shadow-soft); + height: 100%; + display: flex; + flex-direction: column; + /* Removed transform-style */ + transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; /* Added transition for hover */ + } + /* Add simple hover effect */ + .info-card:hover { + transform: translateY(-4px); /* Slight lift */ + box-shadow: var(--shadow-hover); /* Use hover shadow variable */ } .info-card .card-body { - padding: 1.25rem; flex-grow: 1; transform: translateZ(20px); + padding: 1.75rem; + flex-grow: 1; + /* Removed transform: translateZ */ } .info-card h5 { - color: #1c3d7e; text-align: center; margin-bottom: 1rem; padding-bottom: 0.6rem; - border-bottom: 1px solid #eee; font-weight: 600; display: flex; - align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.3rem; + color: var(--color-primary); + text-align: center; + margin-bottom: 1.25rem; + padding-bottom: 0; + border-bottom: none; + font-weight: 600; + font-size: 1.15rem; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.5rem; } - .info-card h5 .bi { font-size: 1.1em; color: #3b5998; order: -1; } + .info-card h5 .bi { + font-size: 1.2em; + color: var(--color-secondary); + order: -1; + } .info-card h5 a { color: inherit; text-decoration: none; } .info-card h5 a:hover { text-decoration: underline; } .info-card p.description, .info-card .card-text { - font-size: 0.95rem; color: #333; text-align: left; + font-size: 1rem; + color: var(--color-text); + text-align: left; margin-bottom: 1rem; + line-height: 1.6; } - .info-card ul { padding-left: 1.5rem; margin-bottom: 0; } - .info-card ul li { margin-bottom: 0.5rem; color: #333; position: relative; line-height: 1.5; font-size: 0.95rem;} - .info-card ul li:last-child { margin-bottom: 0; } - - .info-card a { color: #0d6efd; text-decoration: none; } - .info-card a:hover { color: #0a58ca; text-decoration: underline; } - /* Tooltip styling */ - span[data-bs-toggle="tooltip"], strong[data-bs-toggle="tooltip"] { - border-bottom: 1px dotted #0d6efd; /* Blue dotted underline */ - cursor: help; - text-decoration: none; - } - span[data-bs-toggle="tooltip"]:hover, strong[data-bs-toggle="tooltip"]:hover { - color: #0a58ca; border-bottom-color: #0a58ca; + /* === Lists === */ + .info-card ul { + padding-left: 0; /* Let list items handle padding for bullet */ + margin-bottom: 0; + list-style: none; + } + /* Target only DIRECT children li of the primary ul in card-body */ + .info-card .card-body > ul > li { + margin-bottom: 0.6rem; + color: var(--color-text); + position: relative; + font-size: 0.98rem; + padding-left: 1.6rem; /* Space for custom marker */ + } + .info-card .card-body > ul > li::before { /* Custom bullet for direct children */ + content: ''; + position: absolute; + left: 0.5rem; /* Position bullet */ + top: 0.65em; /* Adjust vertical alignment */ + transform: translateY(-50%); + width: 6px; /* Slightly larger bullet */ + height: 6px; + background-color: var(--color-secondary); + border-radius: 50%; } - /* Ensure links inside tooltips are visible and clickable */ - .tooltip-inner a { color: #a0c4ff; text-decoration: underline; } /* Lighter blue link */ - .tooltip-inner a:hover { color: #ffffff; } /* White on hover */ - + .info-card ul li:last-child { margin-bottom: 0; } + + /* Specific styling for Above/Below line items in first card */ + #above-below-card .card-body > ul > li:nth-child(1)::before { background-color: #dc3545; } /* Red */ + #above-below-card .card-body > ul > li:nth-child(2)::before { background-color: #198754; } /* Green */ + + /* Nested list styling (ol inside ul) */ + .info-card ul ol { + list-style: decimal; /* Use standard numbers */ + padding-left: 2.5rem; /* Indent nested list more */ + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + .info-card ul ol li { + font-size: 0.95rem; /* Slightly smaller nested items */ + padding-left: 0; /* Remove padding for custom bullet */ + margin-bottom: 0.4rem; /* Adjust spacing */ + } + .info-card ul ol li::before { + content: none; /* Explicitly remove custom bullet from nested li */ + } + /* Styling for To Me, By Me, etc. */ .state-heading { font-weight: bold; - color: #3b5998; - margin-top: 0.8rem; - margin-bottom: 0.2rem; - font-size: 0.9em; + color: var(--color-secondary); + margin-top: 1rem; + margin-bottom: 0.4rem; + font-size: 0.95em; } - .row > * { margin-bottom: 1.5rem; } - - footer { padding: 2rem 0; font-size: 0.9em; margin-top: 2rem; text-align: center; color: #555;} - footer a { color: #3b5998; } - footer a:hover { color: #1c3d7e; } + /* Tooltip styling */ + span[data-bs-toggle="tooltip"], strong[data-bs-toggle="tooltip"] { + border-bottom: 1px dotted var(--color-link); + cursor: help; + text-decoration: none; + color: var(--color-primary); + font-weight: 500; + transition: color 0.2s, border-color 0.2s; + } + span[data-bs-toggle="tooltip"]:hover, strong[data-bs-toggle="tooltip"]:hover { + color: var(--color-link-hover); + border-bottom-color: var(--color-link-hover); + } + .tooltip-inner { text-align: left; } + .tooltip-inner a { color: #a0c4ff; text-decoration: underline; } + .tooltip-inner a:hover { color: #ffffff; } + + /* === Footer === */ + footer { + padding: 2.5rem 0; + font-size: 0.9em; + margin-top: 3rem; + text-align: center; + color: #6c757d; + border-top: 1px solid var(--color-card-border); + } + footer a { color: var(--color-secondary); } + footer a:hover { color: var(--color-primary); } </style> </head> @@ -125,25 +267,27 @@ <header class="page-header"> <div class="container"> - <h1 class="display-5"><i class="bi bi-brightness-alt-high"></i> The 15 Commitments of Conscious Leadership</h1> + <h1 class="display-5"><i class="bi bi-brightness-alt-high"></i>The 15 Commitments of Conscious Leadership</h1> <p class="lead">A Cheatsheet for Leading "Above the Line" based on the work of Jim Dethmer, Diana Chapman, and Kaley Warner Klemp.</p> </div> </header> <div class="container"> + <!-- Apply AOS animation to the columns containing the cards --> <div class="row"> - <!-- Leading from Above the Line --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <!-- Leading from Above the Line - Added ID for specific styling --> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up"> + <div class="info-card" id="above-below-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-graph-up-arrow"></i> Leading from Above the Line</h5> <p class="card-text">Conscious leadership involves recognizing whether you are operating "<span data-bs-toggle="tooltip" data-bs-html="true" title="Characterized by openness, curiosity, presence, trust, and a commitment to learning.">Above the Line</span>" or "<span data-bs-toggle="tooltip" data-bs-html="true" title="Characterized by being closed, defensive, reactive, driven by fear, and committed to being right.">Below the Line</span>".</p> <ul> - <li>**Below the Line:** Primary commitment is to being right; defensive; closed; reactive; ego-driven survival.</li> - <li>**Above the Line:** Primary commitment is to learning; curious; open; leading from security and trust.</li> - <li>**The Shift:** Actively moving from below to above the line state.</li> - <li>**<span data-bs-toggle="tooltip" title="The ability to accurately perceive one's own state (thoughts, feelings, body sensations) without judgment.">Self-Awareness</span>:** The foundation is knowing your state and telling yourself the truth.</li> + <!-- FIXED: Replaced ** with <strong> --> + <li><strong>Below the Line:</strong> Primary commitment is to being right; defensive; closed; reactive; ego-driven survival.</li> + <li><strong>Above the Line:</strong> Primary commitment is to learning; curious; open; leading from security and trust.</li> + <li><strong>The Shift:</strong> Actively moving from below to above the line state.</li> + <li><strong><span data-bs-toggle="tooltip" title="The ability to accurately perceive one's own state (thoughts, feelings, body sensations) without judgment.">Self-Awareness</span>:</strong> The foundation is knowing your state and telling yourself the truth.</li> </ul> <div class="state-heading">Four Contexts for Experiencing the World:</div> <ul> @@ -157,8 +301,8 @@ </div> <!-- Commitment 1 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="50"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-bullseye"></i> 1: Taking Radical Responsibility</h5> <p class="card-text">Commit to <span data-bs-toggle="tooltip" title="Seeing yourself as the creator of your experiences and circumstances, without blame towards self or others. Focuses on response-ability.">100% responsibility</span> for your life and well-being.</p> @@ -174,8 +318,8 @@ </div> <!-- Commitment 2 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-search"></i> 2: Learning Through Curiosity</h5> <p class="card-text">Commit to growing in self-awareness and regarding every interaction as a learning opportunity. Prioritize learning over being right.</p> @@ -190,8 +334,8 @@ </div> <!-- Commitment 3 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-heart-pulse"></i> 3: Feeling All Feelings</h5> <p class="card-text">Commit to feeling your feelings fully through to completion using <span data-bs-toggle="tooltip" title="Paying attention to physical sensations in the body associated with emotions.">somatic awareness</span> (locating in the body), breath, movement, and vocalization.</p> @@ -206,8 +350,8 @@ </div> <!-- Commitment 4 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="50"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-megaphone"></i> 4: Speaking Candidly</h5> <p class="card-text">Commit to saying what is true for you (<span data-bs-toggle="tooltip" title="Sharing your authentic experience responsibly, focusing on 'I' statements and unarguable reveals, rather than blame or judgment.">candor</span>) and being someone others can express themselves to.</p> @@ -223,8 +367,8 @@ </div> <!-- Commitment 5 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-slash-circle"></i> 5: Eliminating Gossip</h5> <p class="card-text">Commit to ending <span data-bs-toggle="tooltip" title="Talking *about* someone negatively when they are not present, especially regarding an issue you have with them.">gossip</span> by talking directly *to* people you have an issue with.</p> @@ -239,8 +383,8 @@ </div> <!-- Commitment 6 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-shield-check"></i> 6: Practicing Integrity</h5> <p class="card-text">Commit to masterful <span data-bs-toggle="tooltip" title="Wholeness; alignment between inner experience, values, and outer expression/actions. Keeping agreements with self and others.">integrity</span>.</p> @@ -256,8 +400,8 @@ </div> <!-- Commitment 7 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="50"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-gift"></i> 7: Generating Appreciation</h5> <p class="card-text">Commit to living in appreciation, fully open to both receiving and giving it genuinely.</p> @@ -273,8 +417,8 @@ </div> <!-- Commitment 8 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-stars"></i> 8: Excelling in Your Zone of Genius</h5> <p class="card-text">Commit to expressing your full magnificence and supporting others to live in their <span data-bs-toggle="tooltip" data-bs-delay='{"show":0, "hide":300}' data-bs-html="true" title="Activities you are uniquely suited for, love doing, and that energize you. Concept from 'The Big Leap' by Gay Hendricks. <a href='https://hendricks.com/the-big-leap/' target='_blank' rel='noopener'>More Info</a>">zone of genius</span>.</p> @@ -288,8 +432,8 @@ </div> <!-- Commitment 9 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-joystick"></i> 9: Living a Life of Play and Rest</h5> <p class="card-text">Commit to creating play, improvisation, and laughter. Maximize <span data-bs-toggle="tooltip" title="Managing physical, emotional, mental, and spiritual energy, not just time, for sustainable performance.">energy</span> by honoring rest, renewal, and rhythm.</p> @@ -305,8 +449,8 @@ </div> <!-- Commitment 10 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="50"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-arrow-left-right"></i> 10: Exploring the Opposite</h5> <p class="card-text">Commit to seeing that the opposite of your story (<span data-bs-toggle="tooltip" title="Your beliefs, interpretations, and judgments about reality.">story</span>) is as true or truer than the original.</p> @@ -321,14 +465,15 @@ </div> <!-- Commitment 11 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-person-check-fill"></i> 11: Sourcing Approval, Control & Security</h5> <p class="card-text">Commit to being the <span data-bs-toggle="tooltip" title="Generating these feelings from within, based on self-acceptance and trust, rather than needing external circumstances or people to provide them.">source</span> of your own approval, control, and security.</p> <ul> <li>Humans' core wants: approval, control, security. Seeking them externally leads to suffering.</li> <li>Use release techniques like <span data-bs-toggle="tooltip" data-bs-delay='{"show":0, "hide":300}' data-bs-html="true" title="A technique for letting go of limiting feelings and beliefs by welcoming them and asking simple questions. <a href='https://www.sedona.com/' target='_blank' rel='noopener'>Official Site</a>">The Sedona Method:</span> + <!-- Nested list styling handled by CSS --> <ol> <li>Identify the wanting.</li> <li>Welcome the wanting.</li> @@ -343,13 +488,14 @@ </div> <!-- Commitment 12 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-infinity"></i> 12: Having Enough of Everything</h5> <p class="card-text">Commit to experiencing <span data-bs-toggle="tooltip" title="An internal state, context, or declaration of having/being enough, independent of external amounts. Contrasts with scarcity mindset.">sufficiency</span> – having enough (time, money, love, energy, etc.).</p> <ul> <li>Challenge <span data-bs-toggle="tooltip" data-bs-delay='{"show":0, "hide":300}' data-bs-html="true" title="From 'The Soul of Money' by Lynne Twist: 1. Not Enough, 2. More is Better, 3. That's Just the Way It Is. <a href='https://soulofmoney.org/' target='_blank' rel='noopener'>More Info</a>">toxic myths of scarcity</span>: + <!-- Nested list styling handled by CSS --> <ol> <li>There is never enough.</li> <li>More is better.</li> @@ -363,8 +509,8 @@ </div> <!-- Commitment 13 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="50"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-people"></i> 13: Experiencing the World as an Ally</h5> <p class="card-text">Commit to seeing all people and circumstances as <span data-bs-toggle="tooltip" title="Viewing challenges and difficult people not as obstacles or enemies, but as opportunities perfectly designed for your learning and growth.">allies</span> perfectly suited for your growth.</p> @@ -378,8 +524,8 @@ </div> <!-- Commitment 14 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-diagram-3"></i> 14: Creating Win-for-All Solutions</h5> <p class="card-text">Commit to creating solutions that are a <span data-bs-toggle="tooltip" title="Seeking outcomes that benefit all stakeholders involved (self, other, team/org, wider system), moving beyond win-lose or compromise (often lose-lose).">win for all</span> involved.</p> @@ -392,8 +538,8 @@ </div> <!-- Commitment 15 --> - <div class="col-lg-4 col-md-6 col-sm-12"> - <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up"> + <div class="info-card"> <!-- REMOVED data-tilt --> <div class="card-body"> <h5><i class="bi bi-puzzle"></i> 15: Being the Resolution</h5> <p class="card-text">Commit to <span data-bs-toggle="tooltip" title="Embodying the solution yourself. Instead of just identifying a problem or gap, taking ownership and becoming the change or contribution that is needed.">being the resolution</span> or solution that is needed.</p> @@ -408,7 +554,7 @@ </div> <!-- /.row --> </div> <!-- /.container --> - <footer class="container text-center text-muted"> + <footer class="container text-center"> <p>Based on <a href="https://conscious.is/the-15-commitments" target="_blank" rel="noopener noreferrer">The 15 Commitments of Conscious Leadership</a> by Jim Dethmer, Diana Chapman, & Kaley Warner Klemp. <br> Visit the <a href="https://conscious.is/" target="_blank" rel="noopener noreferrer">Conscious Leadership Group</a> | Buy the <a href="https://www.amazon.com/15-Commitments-Conscious-Leadership-Sustainable/dp/0990976904" target="_blank" rel="noopener noreferrer">Book</a> </p> @@ -422,23 +568,31 @@ <!-- === JAVASCRIPT === --> <!-- Bootstrap JS Bundle (needed for tooltips) --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> - <!-- Vanilla-Tilt.js library --> - <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanilla-tilt.min.js"></script> + <!-- AOS JS (Animate On Scroll) --> + <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> + <!-- REMOVED Vanilla-Tilt.js library --> <!-- Initialization Script --> <script> // Initialize Bootstrap Tooltips var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { - // Enable HTML content in tooltips AND allow tooltip itself to be hovered return new bootstrap.Tooltip(tooltipTriggerEl, { html: true, - // Keep the tooltip open if the user hovers over the tooltip itself - // Delay helps bridge the gap between leaving trigger and entering tooltip - delay: { "show": 0, "hide": 100 } // Short delay before hiding + delay: { "show": 100, "hide": 150 } }) }); - // Vanilla Tilt initializes automatically via data-tilt attributes + // Initialize AOS + AOS.init({ + duration: 600, // Animation duration + easing: 'ease-in-out', // Animation easing + once: true, // Whether animation should happen only once - while scrolling down + mirror: false, // Whether elements should animate out while scrolling past them + offset: 50, // Offset (in px) from the original trigger point + delay: 0, // Values from 0 to 3000, with step 50ms + }); + + // REMOVED Vanilla Tilt initialization </script> </body>