Home page: Cheat Sheet definition quote + Teachings nav link

docs/index.md

@@ -2,6 +2,17 @@
 
 GRC Engineering is a step-change evolution in security governance, risk, and compliance (GRC), and related disciplines such as trust and assurance. It’s more than just “GRC + writing code.”  It’s a fundamental shift in how GRC is done, one that fully embraces an engineering mindset (broadly speaking), [systems thinking](https://en.m.wikipedia.org/wiki/Systems_thinking) and [design thinking](https://en.m.wikipedia.org/wiki/Design_thinking), and a customer-centric focus around how best to deliver GRC outcomes.
 
+<figure class="grce-definition" markdown="0">
+  <p class="grce-definition__eyebrow">What is GRC Engineering?</p>
+  <blockquote cite="https://cheatsheet.grc.engineering/#grc-engineering">
+    <p>GRC Engineering is the practice of using <span class="grce-hl grce-hl--blue">science</span>, <span class="grce-hl grce-hl--blue">math</span>, <span class="grce-hl grce-hl--blue"><a href="https://en.wikipedia.org/wiki/User-centered_design">user-centered design</a>, and <a href="https://en.wikipedia.org/wiki/Software_development">modern software development</a></span> to <span class="grce-hl grce-hl--orange">assure an organization <a href="https://cheatsheet.grc.engineering/#term-governance">reliably achieves objectives</a>, <a href="https://cheatsheet.grc.engineering/#term-risk">addresses uncertainty</a>, and <a href="https://cheatsheet.grc.engineering/#term-compliance">acts with integrity</a></span>, all while <span class="grce-hl grce-hl--blue">continuously improving its efficiency, productivity, and systems</span>.</p>
+  </blockquote>
+  <figcaption>
+    <span class="grce-definition__source">&mdash; <a href="https://cheatsheet.grc.engineering/#grc-engineering">The GRC Engineering Cheat Sheet</a></span>
+    <a class="grce-definition__cta" href="https://cheatsheet.grc.engineering">Explore the Cheat Sheet &rarr;</a>
+  </figcaption>
+</figure>
+
 We see the [organic interest](https://www.reddit.com/r/cybersecurity/comments/18efir2/grc_engineering/) and momentum that is growing around GRC Engineering as an opportunity to bring our community together with a shared definition of what GRC Engineering is as well as a shared focus on advancing it together before it’s co-opted and constrained by commercial interests.
 
 As a group of impassioned GRC practitioners, we seek to propel GRC into the modern era so it can: 

docs/stylesheets/extra.css

@@ -112,4 +112,120 @@ td:nth-child(2) {
   box-shadow: var(--md-shadow-z1);
   color: var(--md-admonition-fg-color);
   transition: box-shadow 500ms;
-}
+}
+/* ── Cheat Sheet definition quote (home page, between intro paragraphs) ── */
+.md-typeset .grce-definition {
+  position: relative;
+  margin: 2em 0 2.2em;
+  padding: 1.6em 1.8em 1.4em 2em;
+  border-radius: 12px;
+  background:
+    radial-gradient(120% 140% at 0% 0%, rgba(255, 168, 79, 0.10) 0%, transparent 55%),
+    radial-gradient(120% 140% at 100% 100%, rgba(27, 149, 193, 0.10) 0%, transparent 55%),
+    var(--md-code-bg-color);
+  box-shadow: var(--md-shadow-z1);
+  overflow: hidden;
+  text-align: left;
+}
+.md-typeset .grce-definition::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: linear-gradient(180deg, #ffa84fff 0%, #1b95c1ff 100%);
+}
+.md-typeset .grce-definition::after {
+  content: "\201C";
+  position: absolute;
+  top: -0.12em;
+  right: 0.25em;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 7em;
+  line-height: 1;
+  color: #1b95c1ff;
+  opacity: 0.12;
+  pointer-events: none;
+}
+.md-typeset .grce-definition__eyebrow {
+  margin: 0 0 0.6em;
+  font-size: 0.72em;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--md-default-fg-color--light);
+}
+.md-typeset .grce-definition blockquote {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: var(--md-typeset-color);
+}
+.md-typeset .grce-definition blockquote p {
+  margin: 0;
+  font-size: 1.12em;
+  line-height: 1.75;
+}
+.md-typeset .grce-hl {
+  padding: 0 0.1em;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+.md-typeset .grce-hl--blue {
+  background: linear-gradient(transparent 62%, rgba(27, 149, 193, 0.28) 62%);
+}
+.md-typeset .grce-hl--orange {
+  background: linear-gradient(transparent 62%, rgba(255, 168, 79, 0.40) 62%);
+}
+.md-typeset .grce-definition blockquote a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+.md-typeset .grce-definition blockquote a:hover {
+  color: var(--md-typeset-a-color);
+}
+.md-typeset .grce-definition figcaption {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6em 1.2em;
+  max-width: none;
+  margin: 1.1em 0 0;
+  font-size: 0.85em;
+  font-style: normal;
+  color: var(--md-default-fg-color--light);
+}
+.md-typeset .grce-definition__cta {
+  display: inline-block;
+  padding: 0.45em 1em;
+  border-radius: 999px;
+  font-weight: 700;
+  color: #ffffff !important;
+  background: linear-gradient(100deg, #ffa84fff 0%, #1b95c1ff 100%);
+  text-decoration: none;
+  transition: filter 200ms, transform 200ms !important;
+}
+.md-typeset .grce-definition__cta:hover {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+}
+[data-md-color-scheme="grcengineering-dark"] .md-typeset .grce-definition {
+  background:
+    radial-gradient(120% 140% at 0% 0%, rgba(255, 168, 79, 0.12) 0%, transparent 55%),
+    radial-gradient(120% 140% at 100% 100%, rgba(27, 149, 193, 0.14) 0%, transparent 55%),
+    #0c1117;
+  box-shadow: 0 0 0 1px #ffffff1f;
+}
+[data-md-color-scheme="grcengineering-dark"] .md-typeset .grce-hl--blue {
+  background: linear-gradient(transparent 62%, rgba(27, 149, 193, 0.45) 62%);
+}
+[data-md-color-scheme="grcengineering-dark"] .md-typeset .grce-hl--orange {
+  background: linear-gradient(transparent 62%, rgba(255, 168, 79, 0.38) 62%);
+}
+@media screen and (max-width: 44.9375em) {
+  .md-typeset .grce-definition { padding: 1.3em 1.2em 1.2em 1.4em; }
+  .md-typeset .grce-definition blockquote p { font-size: 1.02em; }
+}

mkdocs.yml

@@ -5,7 +5,7 @@ repo_name: grcengineering
 edit_uri: edit/main/docs/index.md
 nav:
   - index.md
-  - Learning Hub: learning-hub.md
+  - Teachings: "https://cheatsheet.grc.engineering/#teachings"
   - Blog: "https://blog.grc.engineering"
   - Projects: projects.md
 extra_css: