`<noscript />` notice for browsers with disabled javascript <demo: https://jsfiddle.net/darcher/f9o2cmry/>

index.html

<!-- <noscript> -->
<input type="radio" id="nojs-dismiss" hidden aria-hidden="true" aria-controls="#nojs-memo" />
<details id="nojs-memo">
  <summary>
    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
      <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
        <path d="M7.89 1.0499a1 1 0 0 0-1.78 0l-5.5 11a1 1 0 0 0 .89 1.45h11a1 1 0 0 0 .4866-.1281.999.999 0 0 0 .5095-.83 1 1 0 0 0-.1061-.4919zM7 5v3.25" />
        <path d="M7 11a.25.25 0 1 1 0-.5m0 .5a.25.25 0 1 0 0-.5" />
      </g>
    </svg>

<p>Javascript <strong>is disabled</strong> in your browser. <span>Learn more about how this may impact your experience <a role="button">here</a>.</span></p>

    <label for="nojs-dismiss" class="nojs-memo--dismiss" aria-label="Disgard javascript notice" title="Remove disabled javascript warning?"> &times; </label>
  </summary>

  <div>
    <h2>How does this affect you?</h2>

    <p>All areas of the websites are still accessible with or without javascript enabled. Read the options below for specific features that may be unavailable to you.</p>

    <h3>What happens if I choose to enable javascript?</h3>
    <ul>
      <li>Dynamic visual aids are provided for improved context during interactivity.</li>
      <li>Various non-sensitive details are stored on your local device such as inputted information, user selections, or recently viewed pages to improve subsequent visits to this page.</li>
    </ul>

    <p>
      Learn how to
      <a aria-label="Opens to an external website in a new tab or window." href="https://www.enable-javascript.com/" target="_blank" title="See instructions for your browser?">enable javascript</a>
      in your browser
    </p>

    <h3>What if I choose to proceed without javascript?</h3>
    <ul>
      <li>Some transitions and animation intended to aid with the consumption of content may be unavailable without javascript.</li>
      <li>Dynamic reactivity intended to save user time by populating content based on actions, filter irrelevancies, or highlight additinal context that may be beneficial.</li>
    </ul>

    <p>To opt out, simply <label for="nojs-dismiss" class="nojs-memo--dismiss" aria-label="Disgard javascript notice" title="Remove disabled javascript warning?">dismiss</label> this message.</p>
  </div>
  <footer>
    <svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
      <g stroke="#47f" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
        <path d="M7 13.5c3.5899 0 6.5-2.9101 6.5-6.5C13.5 3.4102 10.5899.5 7 .5 3.4102.5.5 3.4101.5 7s2.9101 6.5 6.5 6.5" />
        <path
          d="M5.25 5.2498c0-.3462.1027-.6845.2952-.9723s.466-.512.786-.6445a1.753 1.753 0 0 1 1.909.3793 1.7485 1.7485 0 0 1 .3797 1.9071 1.75 1.75 0 0 1-.6452.7854 1.753 1.753 0 0 1-.9731.295v1.1666M7 10.4585a.25.25 0 1 1 0-.5m0 .5a.25.25 0 1 0 0-.5"
        />
      </g>
    </svg>

    <small
      >If you encounter any issues, please consider sharing your experience with us.
      <a aria-label="Opens to an external website in a new tab or window." href="https://github.com/darcher-/leftdeaf/issures" title="Go to this projects issues page?" target="_blank">Submit a bug ticket</a> to help us improve everyones experience moving
      forward.</small
    >
  </footer>
</details>
<!-- </noscript> -->

style.css

  body {
    margin: 0;
  }

  details {
    max-width: 640px;
    line-height: 1.4;
    border-radius: 2px;
    margin: 1rem;
    outline: 2px dashed #4af0;
    border: 1px solid #fb6;
    color: #222d;

    & > div label {
      text-decoration: underline;
      color: blue;

      &:hover {
        cursor: pointer;
      }
    }

    &:focus-within {
      outline-color: #47f;
      outline-offset: 4px;
    }

    & > div {
      padding-inline: 1.5rem;
    }

    &:is([open]) summary {
      background-color: #fc73;
      overflow: hidden;
      box-shadow: inset 0 -16px 18px -12px #fc75;

      & :is(svg) {
        color: #fc77;
        transform: rotate(-18deg) scale(3.6) translate(2px, -2px);
        position: relative;
        z-index: -1;
      }

      &::after {
        bottom: 0.42rem;
        left: 2.36rem;
        border-top-color: #fff;
        transform: scale(2, -2);
      }
    }

    & > footer {
      background-color: #47f1;
      box-shadow: inset 0 0 1px #57e;
      border-radius: 4px;
      line-height: 1.5;
      padding-block: 1rem;
      padding-inline: 1rem;
      margin: 0.5rem;
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    & > div :is(p, li) {
      color: #125c;
    }
  }

  summary {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    background-color: #fc71;
    padding: 0;
    gap: 1rem;
    padding-inline: 1rem;
    padding-block: 0.5rem;

    &::after {
      content: "";
      position: absolute;
      bottom: 12px;
      transition: all 164ms;
      left: 2.36rem;
      border: 8px solid #fff0;
      border-top-color: #fc7;
    }

    & :is(p) {
      flex: 1;
      max-width: 44ch;
    }

    & :is(label) {
      font-size: 136%;
      text-align: center;
      text-decoration: none;
      flex: 0 0 36px;
      transition: transform 240ms;
      text-shadow: 0 1px 3px #0000;

      &:hover {
        transform: rotate(90deg) scale(1.333);
        text-shadow: 0 0 4px #0004;
        cursor: pointer;
      }
    }

    & :is(svg) {
      text-align: center;
      flex: 0 0 64px;
      color: #fc0;
      width: 36px;
      height: 36px;
      stroke-width: 1.5px;
      transition: all 100ms;
    }

    &:focus {
      outline: none;
    }

    &:hover {
      cursor: pointer;

      &::after {
        transform: translateY(-4px);
      }
    }
  }

  #nojs-dismiss,
  #nojs-dismiss:checked + #nojs-memo {
    visibility: hidden;
    display: none;
  }
	
	a[role="button"]:not([href]) {
		text-decoration: underline;
		text-underline-offset: 0.34ch;
	}