circle-day

Circle Day

01HeaderFloating folder menu

Your header links turn into colourful file folders. The link for the section you are on lights up as you scroll.

Section IDnone needed

Paste in: Settings, Developer tools, Code injection, Header

Ready to paste

<style>
/* ==========================================================
   FLOATING FOLDER MENU  ·  Novule  ·  v1.1
   Restyles your normal Squarespace header links.
   Edit the links in Squarespace as usual. Desktop only.
   v1.1: the header stays see-through on scroll, only the folder bar shows.
   ========================================================== */
:root{
  --ff-1:#ecd3a8;                                                     /* folder 1 (manila) */
  --ff-2:hsl(var(--lightAccent-hsl));                                 /* folder 2 (blush)  */
  --ff-3:color-mix(in srgb,hsl(var(--accent-hsl)),#fff 32%);          /* folder 3 (rose)   */
  --ff-4:hsl(var(--accent-hsl));                                      /* folder 4 (wine)   */
  --ff-bar:hsl(var(--white-hsl));                                     /* bar background    */
  --ff-line:color-mix(in srgb,hsl(var(--accent-hsl)) 14%,hsl(var(--white-hsl)));
  --ff-text:color-mix(in srgb,hsl(var(--accent-hsl)) 75%,#000);
}

/* the folder bar */
.header-display-desktop .header-nav-list{
  position:relative;display:inline-flex;gap:4px;align-items:center;
  padding:6px!important;margin-top:12px;
  background:var(--ff-bar);
  border:1.5px solid var(--ff-line);
  border-radius:4px 16px 16px 16px;
  box-shadow:0 14px 30px -18px hsla(var(--accent-hsl),.55);
}
/* the little folder tab on the top corner */
.header-display-desktop .header-nav-list:before{
  content:'';position:absolute;left:-1.5px;top:-12px;width:70px;height:12px;
  background:var(--ff-bar);
  border:1.5px solid var(--ff-line);border-bottom:none;
  border-radius:8px 8px 0 0;
}
/* hide the join line under the tab */
.header-display-desktop .header-nav-list:after{
  content:'';position:absolute;left:0;top:-1.5px;width:67px;height:3px;background:var(--ff-bar);
}

/* each link */
.header-display-desktop .header-nav-list .header-nav-item{margin:0!important;padding:0!important}
.header-display-desktop .header-nav-list .header-nav-item > a,
.header-display-desktop .header-nav-list .header-nav-folder-title{
  display:block!important;padding:9px 16px!important;border-radius:10px;
  font-size:15px!important;line-height:1.2!important;
  color:var(--ff-text)!important;background-image:none!important;
  transition:background-color .2s,color .2s,transform .3s cubic-bezier(.3,1.7,.5,1);
}
.header-display-desktop .header-nav-item:nth-child(4n+1){--ff:var(--ff-1);--ft:#6a4a1c}
.header-display-desktop .header-nav-item:nth-child(4n+2){--ff:var(--ff-2);--ft:hsl(var(--accent-hsl))}
.header-display-desktop .header-nav-item:nth-child(4n+3){--ff:var(--ff-3);--ft:#fff}
.header-display-desktop .header-nav-item:nth-child(4n+4){--ff:var(--ff-4);--ft:hsl(var(--lightAccent-hsl))}

.header-display-desktop .header-nav-item > a:hover{
  background-color:color-mix(in srgb,var(--ff) 32%,var(--ff-bar));
  transform:translateY(-1px);
}
/* the page you are on fills with its folder colour */
.header-display-desktop .header-nav-item.ff-on > a,
.header-display-desktop .header-nav-item--active > a{
  background-color:var(--ff)!important;color:var(--ft)!important;
}

/* ---------- v1.1: see-through header at all times ---------- */
#header,
#header.shrink,
#header .header-background,
#header .header-background-solid,
#header .header-announcement-bar-wrapper,
#header .header-inner{
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border-bottom-color:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
#header .header-border{display:none!important}

/* a little white space before Proof Spotlight */
html body #proof-spotlight-novule .user-items-list{padding-top:36px!important}
</style>

Paste in: Settings, Developer tools, Code injection, Footer

Ready to paste

<script>
/* ==========================================================
   FLOATING FOLDER MENU  ·  Novule  ·  v1
   Lights up the link for the section you are scrolling through.
   ========================================================== */
(function () {
  function spy() {
    var items = document.querySelectorAll('.header-display-desktop .header-nav-item');
    var path = location.pathname.replace(/\/$/, '') || '/', on = -1;
    items.forEach(function (it, i) {
      var a = it.querySelector('a'); if (!a) return;
      var href = a.getAttribute('href') || '', parts = href.split('#'), base = parts[0].replace(/\/$/, '') || '/';
      if (parts[1] && base === path) {
        var t = document.getElementById(parts[1]);
        if (t && t.getBoundingClientRect().top < innerHeight * .45) on = i;
      }
    });
    items.forEach(function (it, i) { it.classList.toggle('ff-on', i === on); });
  }
  window.addEventListener('scroll', spy, { passive: true });
  window.addEventListener('hashchange', spy);
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', spy); else spy();
})();
</script>

02HeroProof Spotlight

Three tutor cards. The last one opens with a boarding pass stub; hover any card to open it.

Section IDproof-spotlight-novule

Paste in: Pages, Custom Code, Custom CSS

Ready to paste

/* =====================================================================
   PROOF SPOTLIGHT · BOARDING PASS HERO · THREE TUTORS · Novule · v1
   Section: a List section whose Anchor Link is  proof-spotlight-novule
   No wording lives in this file. Every word comes from the List section.

   HOW TO FILL EACH LIST ITEM
   Title ............ French for work
   Description, one line per paragraph, in this order:
     1  Boarding pass · Français      (put the language in italics)
     2  EN FR                         (make EN bold and FR bold, separately)
     3  Included
     4  1:1 native tutor              (as many feature lines as you like)
     5  Business vocab
     6  Online or in person
     7  Bonjour !                     (last line: the hello bubble on the photo)
   Section title: bold word(s) become the wine label.

   At rest the LAST card is open, on the right. Hover any card to open it.
   Paste into Custom CSS, replacing the old hero code.
===================================================================== */

#proof-spotlight-novule {
  /* photos: black and white with a hint of wine. --tint-a 0 is pure black and white, .8 is very red */
  --tint: #b23a55;
  --tint-a: .35;
  --gray: 1;
  --depth: 8px 8px 0 #3a0f1d;

  --ink: #2b0d16;
  --wine: #5b1a2b;
  --edge: #3a0f1d;
  --cream: #fff7ec;
  --rose: #e8b4bc;
  --stub: var(--wine);
  --card-w: ~"clamp(210px, 17vw, 310px)";
  --text-w: ~"clamp(320px, 27vw, 520px)";
  --gap: 24px;
  --stub-w: ~"calc(var(--text-w) - var(--gap))";
  --pad: ~"clamp(26px, 2.4vw, 42px)";
  --row-h: ~"clamp(520px, calc(100vh - 165px), 900px)";
  --drop: ~"calc(var(--row-h) * .4)";
  --peek: ~"clamp(46px, 7vh, 84px)";
  --r: 28px;
  --spring: cubic-bezier(.22,1,.36,1);
  --pop: cubic-bezier(.34,1.56,.64,1);
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow-x: clip !important;
}
#proof-spotlight-novule .content-wrapper { padding: 0 !important; }
section#proof-spotlight-novule { position: relative !important; z-index: 5 !important; margin-top: 0 !important; }
section#proof-spotlight-novule .section-background { width: 100% !important; left: 0 !important; right: 0 !important; }
#proof-spotlight-novule li.list-item:nth-child(n+4) { display: none !important; }

/* ===== Layout ===== */
#proof-spotlight-novule .user-items-list {
  position: relative !important;
  display: block !important;
  max-width: 1640px !important;
  margin: 0 auto !important;
  padding: 112px 3vw 26px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* ===== Heading, top left ===== */
#proof-spotlight-novule .list-section-title {
  position: absolute !important;
  z-index: 3 !important;
  width: ~"calc(var(--text-w) - 16px)" !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  pointer-events: none;
}
#proof-spotlight-novule .list-section-title p,
#proof-spotlight-novule .list-section-title h1,
#proof-spotlight-novule .list-section-title h2,
#proof-spotlight-novule .list-section-title h3 {
  margin: 0 !important;
  color: var(--ink) !important;
  text-align: left !important;
  font-family: var(--heading-font-font-family, Georgia, serif) !important;
  font-size: ~"clamp(2.3rem, 3.4vw, 4.4rem)" !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}
#proof-spotlight-novule .list-section-title strong {
  position: relative;
  display: inline-block;
  font-weight: inherit;
  margin: .1em .04em 0;
  padding: .02em .32em .1em;
  background: var(--wine);
  color: var(--cream);
  border: 3px solid var(--edge);
  border-radius: .16em;
  box-shadow: .06em .07em 0 var(--edge);
  transform: rotate(-2.5deg);
  transform-origin: 20% 80%;
  animation: labelIn .7s var(--pop) .2s both;
}
#proof-spotlight-novule .list-section-title strong::after {
  content: "";
  position: absolute;
  left: .55em;
  bottom: -.19em;
  width: .28em;
  height: .28em;
  background: var(--wine);
  border-right: 3px solid var(--edge);
  border-bottom: 3px solid var(--edge);
  transform: rotate(45deg);
}
@keyframes labelIn { from { opacity: 0; transform: rotate(-10deg) scale(.6); } to { opacity: 1; transform: rotate(-2.5deg) scale(1); } }

/* ===== The row of cards ===== */
#proof-spotlight-novule .user-items-list-simple {
  --d: .12s;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 22px !important;
  width: 100% !important;
  height: var(--row-h) !important;
  margin: 0 !important;
  padding: 0 14px 14px 0 !important;
  box-sizing: border-box !important;
  list-style: none !important;
  transform: none !important;
  filter: none !important;
}
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) { --d: .4s; }
#proof-spotlight-novule .user-items-list-simple::before,
#proof-spotlight-novule .user-items-list-simple::after { display: none !important; content: none !important; }

/* a closed card. Cards left of the open one step down below the heading */
#proof-spotlight-novule li.list-item {
  --top: ~"0px";
  position: relative !important;
  display: block !important;
  flex: 0 0 var(--card-w) !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
  -webkit-mask: none !important;
  mask: none !important;
  transition: ~"flex .6s var(--spring) var(--d)" !important;
}
#proof-spotlight-novule .user-items-list-simple:has(> li.list-item:hover) > li.list-item { --top: ~"calc(var(--drop) - var(--peek))"; }
/* the open card keeps the hover while the mouse is over its words, so it never flickers shut */
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content { pointer-events: auto; }
/* at rest the last card is open, so every card before it sits lower */
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item { --top: ~"calc(var(--drop) - var(--peek))"; }
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover ~ li.list-item { --top: ~"0px"; }

/* Photo */
#proof-spotlight-novule .list-item-media {
  position: absolute !important;
  z-index: 1 !important;
  top: var(--top) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--r) !important;
  background: var(--edge) !important;
  box-shadow: var(--depth) !important;
  pointer-events: auto;
  cursor: pointer;
  transition: ~"top .6s var(--spring) var(--d), left .6s var(--spring) var(--d)" !important;
  will-change: left, top;
}
#proof-spotlight-novule .list-item-media::before,
#proof-spotlight-novule .list-item-media::after { content: none !important; display: none !important; }
#proof-spotlight-novule .list-item-media-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--r);
}
#proof-spotlight-novule .list-item-media-inner img,
#proof-spotlight-novule .list-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 26% !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: ~"grayscale(var(--gray)) contrast(1.05)";
  transition: ~"filter .5s ease calc(var(--d) + .1s)" !important;
}
/* the tint, lifted when a card opens */
#proof-spotlight-novule .list-item-media-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--tint);
  mix-blend-mode: multiply;
  opacity: var(--tint-a);
  transition: ~"opacity .6s ease var(--d)";
}
#proof-spotlight-novule .list-item-media-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: ~"linear-gradient(180deg, rgba(91,26,43,0) 60%, rgba(91,26,43,.35) 100%)";
}

/* ===== Words. The whole card is the stage; the stub is drawn behind the words ===== */
#proof-spotlight-novule .list-item-content {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: ~"calc(var(--drop) + var(--pad)) 0 var(--pad) calc(var(--pad) + 10px)" !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none;
  opacity: 1 !important;
  visibility: visible !important;
}
/* the dark stub of the pass, scalloped on the left */
#proof-spotlight-novule .list-item-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: var(--drop);
  bottom: 0;
  width: var(--stub-w);
  background: var(--stub);
  border-radius: 0 26px 26px 0;
  -webkit-mask-image: ~"radial-gradient(circle at 0 16px, transparent 9px, #000 9.5px)";
  mask-image: ~"radial-gradient(circle at 0 16px, transparent 9px, #000 9.5px)";
  -webkit-mask-size: 100% 32px;
  mask-size: 100% 32px;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  opacity: 0;
  transition: none;
}
#proof-spotlight-novule .list-item-content__text-wrapper {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(min-content, 1fr));
  column-gap: 16px;
  row-gap: 0;
  width: ~"calc(var(--stub-w) - var(--pad) * 2 - 10px)" !important;
  max-width: none !important;
  margin: 0 !important;
}
#proof-spotlight-novule .list-item-content__description { display: contents !important; }
#proof-spotlight-novule .list-item-content__description p,
#proof-spotlight-novule .list-item-content__title {
  grid-column: ~"1 / -1";
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  text-align: left !important;
}
/* 1: eyebrow */
#proof-spotlight-novule .list-item-content__description p:nth-child(1) {
  order: 1;
  margin-bottom: 10px !important;
  color: var(--rose) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  line-height: 1.4 !important;
}
#proof-spotlight-novule .list-item-content__description p:nth-child(1) em { font-style: normal; }
/* 2: route code, EN ✈ FR */
#proof-spotlight-novule .list-item-content__description p:nth-child(2) {
  order: 2;
  margin-bottom: 8px !important;
  color: var(--cream) !important;
  font-family: var(--heading-font-font-family, Georgia, serif) !important;
  font-size: ~"clamp(2.8rem, 4.2vw, 4.6rem)" !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#proof-spotlight-novule .list-item-content__description p:nth-child(2) strong { font-weight: inherit; }
#proof-spotlight-novule .list-item-content__description p:nth-child(2) strong + strong::before {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  margin: 0 .45em 0 .25em;
  vertical-align: .02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' fill='%23fff7ec' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* title */
#proof-spotlight-novule .list-item-content__title {
  order: 3;
  color: var(--cream) !important;
  font-size: ~"clamp(1.3rem, 1.7vw, 1.8rem)" !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}
/* 3: "Included" label */
#proof-spotlight-novule .list-item-content__description p:nth-child(3) {
  order: 4;
  margin: 18px 0 6px !important;
  color: var(--rose) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  line-height: 1.4 !important;
}
/* features */
#proof-spotlight-novule .list-item-content__description p:nth-child(n+4):nth-last-child(n+2) {
  order: 5;
  grid-column: auto;
  color: var(--cream) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase;
  line-height: 1.3 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  margin-bottom: 6px !important;
}
/* last line: hello bubble on the photo */
#proof-spotlight-novule .list-item-content__description p:last-child:nth-child(n+5) {
  position: absolute;
  z-index: 3;
  left: ~"calc(var(--text-w) + 22px)";
  top: 22px;
  padding: 11px 20px !important;
  border-radius: 22px 22px 22px 6px;
  background: var(--cream);
  color: var(--wine) !important;
  font-family: var(--heading-font-font-family, Georgia, serif) !important;
  font-size: 1.6rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 3px 4px 0 var(--edge);
  transform: rotate(-3deg);
}
/* button */
#proof-spotlight-novule .list-item-content__button-wrapper { position: static !important; margin: 22px 0 0 !important; }
#proof-spotlight-novule .list-item-content__button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 7px 7px 7px 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--cream) !important;
  color: var(--wine) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transition: transform .3s var(--pop) !important;
}
#proof-spotlight-novule .list-item-content__button::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23FFF7EC' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .4s var(--pop);
}
#proof-spotlight-novule .list-item-content__button:hover { transform: translateY(-2px) !important; }
#proof-spotlight-novule .list-item-content__button:hover::after { transform: rotate(-45deg); }
#proof-spotlight-novule .proof-spotlight-rail { display: none !important; }

/* ===== Closed cards: words hidden, language name down the photo ===== */
#proof-spotlight-novule .list-item-content__text-wrapper > *,
#proof-spotlight-novule .list-item-content__description p,
#proof-spotlight-novule .list-item-content__button-wrapper { visibility: hidden; }
#proof-spotlight-novule .list-item-content__description p:nth-child(1) em {
  visibility: visible;
  position: absolute;
  left: 18px;
  top: ~"calc(var(--top) + 22px)";
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--cream);
  font-size: .82rem;
  letter-spacing: .28em;
  animation: ~"fadeIn .4s ease calc(var(--d) + .55s) backwards";
}

/* ===== Open card: first by default, or the one you hover ===== */
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover {
  flex: 1 1 var(--card-w) !important;
  --top: ~"0px" !important;
}
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-media,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-media { left: var(--text-w) !important; cursor: default; }
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-media-inner img,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-media-inner img { filter: none; }
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-media-inner::before,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-media-inner::before { opacity: 0; }
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content::before,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content::before { opacity: 1; transition: ~"opacity .3s ease calc(var(--d) + .35s)"; }
/* everything appears together, in one gentle stagger, once the card has opened */
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__text-wrapper > *,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__text-wrapper > *,
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__description p,
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__button-wrapper,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__button-wrapper { visibility: visible; }
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__button-wrapper,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__button-wrapper { pointer-events: auto; }
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:nth-child(1) em,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__description p:nth-child(1) em {
  position: static;
  writing-mode: horizontal-tb;
  transform: none;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  animation: none;
}
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:nth-child(1),
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__description p:nth-child(1) { animation: ~"rise .5s var(--spring) calc(var(--d) + .45s) backwards"; }
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:nth-child(2),
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__description p:nth-child(2) { animation: ~"rise .5s var(--spring) calc(var(--d) + .5s) backwards"; }
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__title,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__title { animation: ~"rise .5s var(--spring) calc(var(--d) + .55s) backwards"; }
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:nth-child(n+3),
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__description p:nth-child(n+3) { animation: ~"rise .5s var(--spring) calc(var(--d) + .6s) backwards"; }
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__button-wrapper,
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__button-wrapper { animation: ~"rise .5s var(--spring) calc(var(--d) + .65s) backwards"; }
#proof-spotlight-novule .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:last-child:nth-child(n+5),
#proof-spotlight-novule .user-items-list-simple > li.list-item:hover .list-item-content__description p:last-child:nth-child(n+5) { animation: ~"popIn .6s var(--pop) calc(var(--d) + .35s) backwards"; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.4) rotate(-10deg); } }

@media (prefers-reduced-motion: reduce) {
  #proof-spotlight-novule *, #proof-spotlight-novule *::before, #proof-spotlight-novule *::after { animation: none !important; transition: none !important; }
}

/* ===== Smaller laptops: features stack as a list so nothing squeezes ===== */
@media (min-width: 1024px) and (max-width: 1279px) {
  #proof-spotlight-novule .list-item-content__text-wrapper { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Tablets and phones: stacked cards, words underneath ===== */
@media (max-width: 1023px) {
  #proof-spotlight-novule .user-items-list { padding: 100px 6vw 20px !important; }
  #proof-spotlight-novule .list-section-title { position: relative !important; width: auto !important; margin: 0 0 26px !important; }
  #proof-spotlight-novule .list-section-title p,
  #proof-spotlight-novule .list-section-title h1,
  #proof-spotlight-novule .list-section-title h2,
  #proof-spotlight-novule .list-section-title h3 { font-size: ~"clamp(2.6rem, 7vw, 3.6rem)" !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule .user-items-list-simple { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; height: auto !important; padding: 0 8px 8px 0 !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item { --top: ~"0px"; pointer-events: auto; border-radius: var(--r) !important; background: var(--stub) !important; box-shadow: var(--depth) !important; overflow: hidden !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-media { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; height: 340px !important; box-shadow: none !important; border-radius: 0 !important; cursor: default; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-media-inner { border-radius: 0; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-media-inner img { filter: none !important; transform: none !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-media-inner::before { opacity: 0 !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-content { position: static !important; padding: 26px 24px 30px !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-content::before { display: none !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-content__text-wrapper { width: 100% !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-content *,
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-content__button-wrapper { visibility: visible !important; opacity: 1 !important; animation: none !important; transition: none !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-content__description p:nth-child(1) em { position: static !important; writing-mode: horizontal-tb !important; transform: none !important; color: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-content__description p:nth-child(2) { font-size: ~"clamp(2.4rem, 11vw, 3.4rem)" !important; }
  html body #proof-spotlight-novule#proof-spotlight-novule li.list-item .list-item-content__description p:last-child:nth-child(n+5) { left: 16px !important; top: 16px !important; font-size: 1.3rem !important; }
}

03ServiceThe cube

A 3D cube of tutor folders with big 3D words either side. Tap it to hear the word.

Section IDflip-book

Paste in: Settings, Developer tools, Code injection, Header

Ready to paste

<style>
/* Tutor Cube Hero v27 by Novule. Colours follow the section's colour theme. */
#flip-book{
--fb-ink:var(--headingLargeColor);
--fb-side-front:hsl(var(--accent-hsl));
--fb-side-depth:hsl(var(--darkAccent-hsl));
--fb-heading:var(--heading-font-font-family);
--fb-body:var(--body-font-font-family);
--fb-cube:clamp(290px,33vw,600px);
--fb-bold:.06em;
--fb-line:1.6px;                                   /* the crisp outline on the words and folders */
--fb-line-c:hsl(var(--darkAccent-hsl));
--fb-top:110px;
--fb-y:20px}
#flip-book.fb-ready{display:block!important;padding:0!important;min-height:0!important}
#flip-book.fb-ready>.content-wrapper{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
#flip-book .fb-stage{position:relative;z-index:1;width:100%;height:100vh;height:100svh;min-height:640px;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}

/* background treatments for the section's own background image (BG_MODE in the footer) */
#flip-book .fb-wash{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:hsl(var(--white-hsl))}
#flip-book .fb-wash img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;display:block}
#flip-book .fb-wash::after{content:"";position:absolute;inset:0}
#flip-book.fb-bg-knockout .fb-wash img{display:none}
#flip-book.fb-bg-frosted .fb-wash img{filter:blur(26px) saturate(1.1)}
#flip-book.fb-bg-frosted .fb-wash::after{background:hsl(var(--white-hsl));opacity:.55}
#flip-book.fb-bg-duotone .fb-wash img{filter:grayscale(1) contrast(1.05)}
#flip-book.fb-bg-duotone .fb-wash::after{background:hsl(var(--accent-hsl));mix-blend-mode:multiply;opacity:.88}
#flip-book.fb-bg-photo .fb-wash{background:none}

/* the cube */
#flip-book .fb-mid{position:absolute;left:50%;top:var(--fb-cy,calc(50% + var(--fb-y)));width:var(--fb-cube);height:calc(var(--fb-cube) * 1.15);transform:translate(-50%,-50%);z-index:2;perspective:1500px;perspective-origin:50% 40%;cursor:grab;will-change:transform,opacity}
#flip-book .fb-mid.is-drag{cursor:grabbing}
#flip-book .fb-floor{position:absolute;left:50%;top:calc(100% + 26px);width:160%;height:56px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(40,0,10,.24),transparent);filter:blur(8px);pointer-events:none}
#flip-book .fb-cube{position:absolute;inset:0;transform-style:preserve-3d}
#flip-book .fb-fc{position:absolute;inset:0;overflow:hidden;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:hsl(var(--lightAccent-hsl))}
#flip-book .fb-fc img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;-webkit-user-drag:none;pointer-events:none}
#flip-book .fb-fc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,0,6,.45));pointer-events:none}
#flip-book .fb-fc em{position:absolute;left:14px;bottom:12px;z-index:1;font-style:normal;font-family:var(--fb-body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff}
#flip-book .fb-shade{position:absolute;inset:0;background:#000;pointer-events:none;border-radius:10px}

/* cube designs (CUBE_STYLE in the footer) */
#flip-book .fb-fc .pf{position:absolute;overflow:hidden;display:block}
#flip-book .fb-fc .pf img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
/* framed: gallery frame */
#flip-book .cs-framed .fb-fc{background:#fffdf8;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
#flip-book .cs-framed .fb-fc::after{display:none}
#flip-book .cs-framed .pf{inset:9% 9% 20% 9%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
#flip-book .cs-framed em{left:0;right:0;bottom:6.5%;text-align:center;color:hsl(var(--accent-hsl));letter-spacing:.24em}
/* folder + word: folder with photo and the greeting underneath */
#flip-book .cs-folderword .fb-fc{background:none;overflow:visible;border-radius:0}
#flip-book .cs-folderword .fb-fc::after{display:none}
#flip-book .cs-folderword .tabw{position:absolute;left:0;top:.5%;width:54%;height:10%;transform-origin:50% 100%;transform-style:preserve-3d;z-index:1}
#flip-book .cs-folderword .tab{position:absolute;inset:0;border-radius:12px 16px 0 0;background:hsl(var(--accent-hsl));display:flex;align-items:center;padding-left:14px}
#flip-book .cs-folderword .tab em{position:static;font-size:11px;color:hsl(var(--white-hsl))}
#flip-book .cs-folderword .body{position:absolute;left:0;right:0;top:9%;bottom:0;border-radius:0 16px 16px 16px;background:hsl(var(--accent-hsl));padding:9px;display:flex;flex-direction:column}
#flip-book .cs-folderword .ph{display:block;flex:1;min-height:0;border-radius:4px 10px 10px 10px;overflow:hidden}
#flip-book .cs-folderword .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
#flip-book .cs-folderword .wd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 6px 6px;color:hsl(var(--white-hsl))}
#flip-book .cs-folderword .wd strong{font-family:var(--fb-heading);font-weight:400;font-size:calc(var(--fb-cube) * .14 * var(--wf,1));line-height:1;white-space:nowrap}
#flip-book .cs-folderword .wd small{font-family:var(--fb-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;text-align:right}
#flip-book .cs-folderword .fb-fc:nth-child(even) .tab,#flip-book .cs-folderword .fb-fc:nth-child(even) .body{background:hsl(var(--lightAccent-hsl))}
#flip-book .cs-folderword .fb-fc:nth-child(even) .tab em,#flip-book .cs-folderword .fb-fc:nth-child(even) .wd{color:hsl(var(--darkAccent-hsl))}
#flip-book .cs-folderword .fb-shade{top:9%;border-radius:0 16px 16px 16px}
/* folder thickness: real side walls */
#flip-book .cs-folderword .fb-fc{transform-style:preserve-3d;--wc:hsl(var(--accent-hsl))}
#flip-book .cs-folderword .fb-fc:nth-child(even){--wc:color-mix(in srgb,hsl(var(--lightAccent-hsl)),hsl(var(--accent-hsl)) 40%)}
#flip-book .cs-folderword .w{position:absolute;display:block;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:color-mix(in srgb,var(--wc),#000 42%)}
#flip-book .cs-folderword .wt,#flip-book .cs-folderword .tt{background:color-mix(in srgb,var(--wc),#000 18%)}
#flip-book .cs-folderword .wb{background:color-mix(in srgb,var(--wc),#000 58%)}
#flip-book .cs-folderword .wt{left:16px;right:16px;top:calc(9% - var(--fd));height:var(--fd);transform-origin:50% 100%;transform:rotateX(90deg)}
#flip-book .cs-folderword .wb{left:16px;right:16px;top:100%;height:var(--fd);transform-origin:50% 0;transform:rotateX(-90deg)}
#flip-book .cs-folderword .wl{top:calc(9% + 4px);bottom:16px;left:calc(-1 * var(--fd));width:var(--fd);transform-origin:100% 50%;transform:rotateY(-90deg)}
#flip-book .cs-folderword .wr{top:calc(9% + 16px);bottom:16px;left:100%;width:var(--fd);transform-origin:0 50%;transform:rotateY(90deg)}
#flip-book .cs-folderword .tt{left:12px;right:16px;top:calc(-1 * var(--fd));height:var(--fd);transform-origin:50% 100%;transform:rotateX(90deg)}
#flip-book .cs-folderword .tlw{top:12px;bottom:0;left:calc(-1 * var(--fd));width:var(--fd);transform-origin:100% 50%;transform:rotateY(-90deg)}
#flip-book .cs-folderword .trw{top:16px;bottom:0;left:100%;width:var(--fd);transform-origin:0 50%;transform:rotateY(90deg)}
#flip-book .cs-folderword .tab,#flip-book .cs-folderword .body{transform:translateZ(.5px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
#flip-book .cs-folderword .body{border-radius:0 12px 12px 12px}
#flip-book .cs-folderword .away .w,#flip-book .cs-folderword .side .tabw .w{visibility:hidden}
#flip-book .cs-folderword .tab{border-radius:10px 12px 0 0}
/* crisp lines on the folder edges */
#flip-book .cs-folderword .tab{box-shadow:inset 0 0 0 var(--fb-line) var(--fb-line-c),inset 0 2.5px 0 rgba(255,255,255,.24)}
#flip-book .cs-folderword .body{box-shadow:inset 0 0 0 var(--fb-line) var(--fb-line-c),inset 0 2.5px 0 rgba(255,255,255,.2)}
#flip-book .cs-folderword .fb-fc:nth-child(even) .tab,#flip-book .cs-folderword .fb-fc:nth-child(even) .body{box-shadow:inset 0 0 0 var(--fb-line) hsl(var(--accent-hsl)),inset 0 2px 0 rgba(255,255,255,.35)}
#flip-book .cs-folderword .ph{box-shadow:0 0 0 var(--fb-line) var(--fb-line-c)}
#flip-book .cs-folderword .fb-fc:nth-child(even) .ph{box-shadow:0 0 0 var(--fb-line) hsl(var(--accent-hsl))}
#flip-book .cs-folderword .tab{padding-right:10px}
#flip-book .cs-folderword .tab em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#flip-book .cs-folderword .fb-fc>*{backface-visibility:hidden;-webkit-backface-visibility:hidden}
#flip-book .cs-folderword .fb-shade{transform:translateZ(1px)}
/* ring: four folders turning, every tutor visible */
#flip-book .fb-ring .fb-cube{transform-style:preserve-3d}
#flip-book .fb-ring .fb-fc{left:21%;right:21%;top:21%;bottom:21%;inset:21%}
#flip-book .fb-ring.cs-folderword .wd strong{font-size:calc(var(--fb-cube) * .085 * var(--wf,1))}
#flip-book .fb-ring.cs-folderword .wd small{font-size:9px;letter-spacing:.12em}
#flip-book .fb-ring.cs-folderword .tab em{font-size:9.5px}
#flip-book .fb-ring.cs-folderword .tab{padding-left:10px}
#flip-book .fb-ring.cs-folderword .tabw{width:74%}
#flip-book .fb-ring.cs-folderword .body{padding:6px;gap:6px}
#flip-book .fb-ring .hear{height:24px;padding:0 7px;right:7px;bottom:7px}
#flip-book .fb-ring .fb-floor{width:200%}
/* folder */
#flip-book .cs-folder .fb-fc{background:none;overflow:visible;border-radius:0}
#flip-book .cs-folder .fb-fc::after{display:none}
#flip-book .cs-folder .tab{position:absolute;left:0;top:0;width:52%;height:12%;border-radius:12px 16px 0 0;background:hsl(var(--accent-hsl));display:flex;align-items:center;padding-left:14px}
#flip-book .cs-folder .tab em{position:static;font-size:11px;color:hsl(var(--white-hsl))}
#flip-book .cs-folder .body{position:absolute;left:0;right:0;top:10%;bottom:0;border-radius:0 14px 14px 14px;overflow:hidden;border:7px solid hsl(var(--accent-hsl));background:hsl(var(--accent-hsl))}
#flip-book .cs-folder .body img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:0 8px 8px 8px}
#flip-book .cs-folder .fb-fc:nth-child(even) .tab,#flip-book .cs-folder .fb-fc:nth-child(even) .body{background:hsl(var(--lightAccent-hsl));border-color:hsl(var(--lightAccent-hsl))}
#flip-book .cs-folder .fb-fc:nth-child(even) .tab em{color:hsl(var(--darkAccent-hsl))}
#flip-book .cs-folder .fb-shade{top:10%;border-radius:0 14px 14px 14px}
/* polaroid */
#flip-book .cs-polaroid .fb-fc{background:#fff;border-radius:3px}
#flip-book .cs-polaroid .fb-fc::after{display:none}
#flip-book .cs-polaroid .pf{inset:6% 6% 22% 6%}
#flip-book .cs-polaroid em{left:0;right:0;bottom:6%;text-align:center;font-family:'Caveat','Comic Sans MS',cursive;font-size:24px;letter-spacing:0;text-transform:none;color:#3a2a2c}
/* photo + word */
#flip-book .cs-word .fb-fc{background:hsl(var(--accent-hsl))}
#flip-book .cs-word .fb-fc:nth-child(even){background:hsl(var(--lightAccent-hsl))}
#flip-book .cs-word .fb-fc::after{display:none}
#flip-book .cs-word .pf{left:0;right:0;top:0;height:70%}
#flip-book .cs-word strong{position:absolute;left:14px;right:14px;bottom:12%;font-family:var(--fb-heading);font-weight:400;font-size:calc(var(--fb-cube) * .15);line-height:1;color:hsl(var(--white-hsl))}
#flip-book .cs-word .fb-fc:nth-child(even) strong{color:hsl(var(--darkAccent-hsl))}
#flip-book .cs-word em{bottom:5%;opacity:.8}
#flip-book .cs-word .fb-fc:nth-child(even) em{color:hsl(var(--darkAccent-hsl))}
/* arch */
#flip-book .cs-arch .fb-fc{background:hsl(var(--lightAccent-hsl));border-radius:6px}
#flip-book .cs-arch .fb-fc:nth-child(even){background:hsl(var(--accent-hsl))}
#flip-book .cs-arch .fb-fc::after{display:none}
#flip-book .cs-arch .pf{inset:10% 12% 18% 12%;border-radius:999px 999px 8px 8px}
#flip-book .cs-arch em{left:0;right:0;bottom:6.5%;text-align:center;color:hsl(var(--darkAccent-hsl))}
#flip-book .cs-arch .fb-fc:nth-child(even) em{color:hsl(var(--white-hsl))}
/* solid block: seen from above with coloured top */
#flip-book .fb-capt,#flip-book .fb-capb{position:absolute;left:0;background:hsl(var(--accent-hsl))}
#flip-book .fb-capt{background:linear-gradient(135deg,hsl(var(--accent-hsl)),hsl(var(--darkAccent-hsl)))}
#flip-book .cs-block .fb-fc{border-radius:0}
#flip-book .cs-block .fb-shade{border-radius:0}
/* sliced */
#flip-book .fb-slice{position:absolute;left:0;right:0;height:33.34%;transform-style:preserve-3d}
#flip-book .cs-sliced .fb-fc{border-radius:0;background-repeat:no-repeat}
#flip-book .cs-sliced .fb-fc::after{display:none}
#flip-book .cs-sliced .fb-slice:first-child .fb-fc{border-radius:10px 10px 0 0}
#flip-book .cs-sliced .fb-slice:last-child .fb-fc{border-radius:0 0 10px 10px}
/* glass */
#flip-book .cs-glass .fb-fc{background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.12));backface-visibility:visible;-webkit-backface-visibility:visible;border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 0 30px rgba(255,255,255,.35);backdrop-filter:blur(2px);transition:opacity .3s}
#flip-book .cs-glass .fb-fc::after{display:none}
#flip-book .cs-glass .pf{inset:12%;border-radius:8px;box-shadow:0 10px 24px rgba(40,0,10,.18)}
#flip-book .cs-glass em{left:12%;bottom:4%;color:hsl(var(--accent-hsl))}
#flip-book .cs-glass .gl{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);pointer-events:none}
#flip-book .fb-glow{position:absolute;left:50%;top:50%;width:160%;height:160%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,hsla(var(--lightAccent-hsl),.55),transparent);z-index:-1;pointer-events:none}

/* tap to hear */
#flip-book .fb-mid:focus-visible{outline:3px solid hsl(var(--accent-hsl));outline-offset:14px;border-radius:12px}
#flip-book .cs-folderword .ph{position:relative}
#flip-book .hear{position:absolute;right:10px;bottom:10px;display:none;align-items:center;gap:3px;height:30px;padding:0 10px;border-radius:99px;background:hsla(var(--white-hsl),.92);box-shadow:0 6px 14px rgba(0,0,0,.15)}
#flip-book .can-speak .hear{display:flex}
#flip-book .hear i{display:block;width:3px;height:8px;border-radius:2px;background:hsl(var(--accent-hsl))}
#flip-book .hear i:nth-child(2){height:14px}#flip-book .hear i:nth-child(3){height:11px}#flip-book .hear i:nth-child(4){height:6px}
#flip-book .speaking .hear i{animation:fbWave .5s ease-in-out infinite alternate}
#flip-book .speaking .hear i:nth-child(2){animation-delay:.12s}#flip-book .speaking .hear i:nth-child(3){animation-delay:.24s}#flip-book .speaking .hear i:nth-child(4){animation-delay:.36s}
@keyframes fbWave{from{transform:scaleY(.4)}to{transform:scaleY(1.6)}}
#flip-book .speaking .fb-cube{animation:fbPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes fbPop{40%{scale:1.04}}
#flip-book .fb-hint{position:absolute;left:50%;top:calc(var(--fb-cy,calc(50% + var(--fb-y))) + var(--fb-ch,calc(var(--fb-cube) * 1.15)) / 2 + 92px);transform:translateX(-50%);z-index:4;font-family:var(--fb-body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fb-ink);opacity:.55;white-space:nowrap;transition:opacity .5s;pointer-events:none}
#flip-book .fb-hint.gone{opacity:0!important}

/* name under the cube */
#flip-book .fb-cap{position:absolute;left:50%;top:calc(var(--fb-cy,calc(50% + var(--fb-y))) + var(--fb-ch,calc(var(--fb-cube) * 1.15)) / 2 + 50px);transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none!important;color:var(--fb-ink)!important;font-family:var(--fb-body);font-size:15px;transition:opacity .3s,transform .3s}
#flip-book .fb-cap b{font-family:var(--fb-heading);font-weight:400;font-size:22px;color:hsl(var(--accent-hsl))}
#flip-book .fb-cap i{font-style:normal;opacity:.75}
#flip-book .fb-cap .ar{display:inline-flex;width:32px;height:32px;border-radius:50%;align-items:center;justify-content:center;background:var(--primaryButtonBackgroundColor);color:var(--primaryButtonTextColor);font-size:14px;transition:transform .3s}
#flip-book .fb-cap:hover .ar{transform:rotate(-45deg)}
#flip-book .fb-cap.sw{opacity:0;transform:translate(-50%,6px)}
#flip-book.fb-bg-duotone .fb-cap{color:hsl(var(--white-hsl))!important}
#flip-book.fb-bg-duotone .fb-cap b{color:hsl(var(--lightAccent-hsl))}

/* corners: headline + button bottom left, tutor details top right */
#flip-book .fb-corners .fb-cap,#flip-book .fb-corners .fb-hint{display:none}
#flip-book .fb-intro{position:absolute;left:max(24px,4vw);bottom:var(--fb-bb,46px);z-index:5;max-width:min(560px,calc(50vw - var(--fb-cube) * .4 - 5vw));transition:opacity .3s}
#flip-book .fb-head{margin:0;font-family:var(--fb-heading);font-weight:400;font-size:clamp(22px,2.2vw,38px);line-height:1.06;letter-spacing:-.005em;color:hsl(var(--accent-hsl));text-wrap:balance}
#flip-book .fb-sub{margin:10px 0 0;font-family:var(--fb-body);font-size:15px;line-height:1.45;color:var(--fb-ink);opacity:.75}
#flip-book .fb-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:22px}
#flip-book .fb-btn{position:relative;display:inline-flex;align-items:center;height:48px;margin-bottom:4px;padding:0 24px;margin-right:53px;border-radius:999px;background:hsl(var(--accent-hsl));color:hsl(var(--white-hsl))!important;font-family:var(--fb-body);font-size:15px;text-decoration:none!important;white-space:nowrap;box-shadow:0 4px 0 hsl(var(--darkAccent-hsl));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
#flip-book .fb-btn:after{content:'\2192';position:absolute;left:calc(100% + 5px);top:0;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:hsl(var(--lightAccent-hsl));color:hsl(var(--accent-hsl));font-size:19px;box-shadow:0 4px 0 hsl(var(--darkAccent-hsl));transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
#flip-book .fb-btn:hover{transform:translateY(-2px)}
#flip-book .fb-btn:hover:after{transform:translateX(4px) rotate(-45deg)}
#flip-book .fb-btn:active{transform:translateY(3px)}
#flip-book .fb-tip{display:block;margin-top:14px;font-family:var(--fb-body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fb-ink);opacity:.55;transition:opacity .5s}
#flip-book .fb-tip.gone{opacity:0}
#flip-book .fb-meta{position:absolute;right:max(24px,4vw);top:var(--fb-mt,calc(var(--fb-hb,110px) + var(--fb-gap,16px)));z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;font-family:var(--fb-body);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:hsl(var(--accent-hsl));transition:opacity .3s}
#flip-book .fb-meta:before{content:'';width:min(260px,22vw);height:1.5px;background:currentColor;margin-bottom:14px;opacity:.85}
#flip-book .fb-ml{font-family:var(--fb-heading);font-weight:400;font-size:17px;letter-spacing:0;text-transform:none}
#flip-book .fb-m1,#flip-book .fb-m2{transition:opacity .25s,transform .25s}
#flip-book .fb-meta.sw .fb-m1,#flip-book .fb-meta.sw .fb-m2{opacity:0;transform:translateY(4px)}
#flip-book .fb-dots{position:absolute;right:max(24px,4vw);bottom:var(--fb-bb,46px);z-index:5;display:flex;gap:6px;transition:opacity .3s}
#flip-book .fb-dots button{width:36px;height:36px;border-radius:50%;border:1.5px solid hsl(var(--accent-hsl));background:hsl(var(--white-hsl));color:hsl(var(--accent-hsl));font-family:var(--fb-heading);font-size:12px;letter-spacing:0;cursor:pointer;padding:0;transition:background .2s,color .2s,transform .3s cubic-bezier(.3,1.7,.5,1)}
#flip-book .fb-dots button:hover{transform:translateY(-2px)}
#flip-book .fb-dots button.on{background:hsl(var(--accent-hsl));color:hsl(var(--white-hsl))}

/* 3D side words */
#flip-book .fb-side{position:absolute;top:var(--fb-cy,calc(50% + var(--fb-y)));margin:0;font-family:var(--fb-heading);font-weight:400;font-size:clamp(64px,13vw,280px);line-height:1;color:var(--fb-ink);pointer-events:none;z-index:3;white-space:nowrap;will-change:transform,opacity;perspective:900px}
#flip-book .fb-left{left:3vw;transform-origin:right center}
#flip-book .fb-right{right:3vw;transform-origin:left center}
#flip-book .x3w{display:inline-block;position:relative;transform-style:preserve-3d}
#flip-book .x3{--ex:.0055em;--ey:.0055em;display:block;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.5,1.6,.5,1)}
#flip-book .fb-right.out .x3,#flip-book .fb-left.out .x3{transform:rotateX(-95deg) scale(.6);transition:transform .22s ease-in}
#flip-book .x3 .sz{visibility:hidden}
#flip-book .x3 .ly{position:absolute;left:0;top:0;-webkit-text-stroke:var(--fb-bold) currentColor}
#flip-book .x3 .sz{-webkit-text-stroke:var(--fb-bold) transparent}
#flip-book .x3 .lf{color:var(--fb-side-front)}
#flip-book .x3 .ln{color:var(--fb-line-c);-webkit-text-stroke:calc(var(--fb-bold) + var(--fb-line) * 2) var(--fb-line-c)}
#flip-book .x3.ink{--fb-side-depth:hsl(var(--accent-hsl))}
#flip-book .x3.ink .lf{color:var(--fb-ink)}
#flip-book .x3.blush{--fb-side-depth:hsl(var(--accent-hsl))}
#flip-book .x3.cream .lf{color:hsl(var(--white-hsl))}
#flip-book .x3.blush .lf{color:hsl(var(--lightAccent-hsl))}
#flip-book .x3.tutorfill .lf{-webkit-text-stroke:0;color:transparent;background:linear-gradient(hsla(var(--darkAccent-hsl),.25),hsla(var(--darkAccent-hsl),.25)),var(--x3-img) 50% 25%/cover;-webkit-background-clip:text;background-clip:text;transition:background-image .3s}
#flip-book .x3.bgfill .lf{-webkit-text-stroke:0;color:transparent;background-image:linear-gradient(hsla(var(--accent-hsl),.62),hsla(var(--accent-hsl),.62)),var(--x3-bg);background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}

@media (max-width:767px){
#flip-book .fb-ring{--fb-cube:54vw}
#flip-book .fb-hint{top:calc(50% + var(--fb-cube) * .575 + 76px);font-size:11px}
#flip-book{--fb-cube:60vw;--fb-top:90px;--fb-y:0px}
#flip-book .fb-stage{min-height:620px}
#flip-book .fb-side{left:0;right:0;text-align:center;font-size:19vw}
#flip-book .fb-left{top:calc(var(--fb-top) + 6px);transform-origin:center}
#flip-book .fb-right{top:auto;bottom:40px;transform-origin:center}
#flip-book .fb-cap{font-size:13px;top:calc(50% + var(--fb-cube) * .575 + 40px)}
#flip-book .fb-cap b{font-size:18px}
#flip-book .fb-corners .fb-cap,#flip-book .fb-corners .fb-hint{display:flex}
#flip-book .fb-corners .fb-hint{display:block}
#flip-book .fb-intro,#flip-book .fb-meta,#flip-book .fb-dots{display:none}
}

/* a little white space before your Proof Spotlight section */
#proof-spotlight-novule .user-items-list{padding-top:36px!important}



/* ---------- v21: finished 3D edges (walls meet the corners, no gaps) ---------- */
#flip-book .cs-folderword .body{border-radius:0 7px 7px 7px}
#flip-book .cs-folderword .tab{border-radius:7px 9px 0 0}
#flip-book .cs-folderword .wt{left:3px;right:3px}
#flip-book .cs-folderword .wb{left:3px;right:3px}
#flip-book .cs-folderword .wl{top:9%;bottom:3px}
#flip-book .cs-folderword .wr{top:calc(9% + 3px);bottom:3px}
#flip-book .cs-folderword .tt{left:2px;right:3px}
#flip-book .cs-folderword .tlw{top:2px;bottom:-1px}
#flip-book .cs-folderword .trw{top:3px;bottom:0}
#flip-book .cs-folderword .wt{top:calc(9% - var(--fd) + 1.5px)}
#flip-book .cs-folderword .tt{top:calc(1.5px - var(--fd))}
#flip-book .cs-folderword .body{box-shadow:inset 0 0 0 var(--fb-line) var(--fb-line-c)}
#flip-book .cs-folderword .tab{box-shadow:inset 0 0 0 var(--fb-line) var(--fb-line-c)}
/* ---------- v22: see the folders slightly from above, so the top edges show their thickness ---------- */
#flip-book .fb-mid{perspective-origin:50% -20%!important}
/* ---------- v23: never chop the top of the folders ---------- */
#flip-book,#flip-book .content-wrapper,#flip-book .section-border{overflow:visible!important}
#flip-book .fb-stage{overflow:visible!important;overflow-x:clip!important;overflow-y:visible!important}
#flip-book .cs-folderword .tab{border-radius:2px 9px 0 0}

/* ---------- v20: Say it bubble ---------- */
#flip-book .fb-mid.has-say .hear{display:none!important}
#flip-book .fb-say{position:absolute;right:-21%;bottom:15%;z-index:6;display:flex;align-items:center;gap:10px;margin:0;padding:9px 15px 9px 9px;border:1.5px solid hsl(var(--accent-hsl));border-radius:20px 20px 20px 5px;background:hsl(var(--white-hsl));color:hsl(var(--darkAccent-hsl));font:inherit;text-align:left;cursor:pointer;box-shadow:0 14px 26px -16px hsla(var(--darkAccent-hsl),.7),0 3px 0 hsl(var(--accent-hsl));transition:transform .35s cubic-bezier(.3,1.7,.5,1),opacity .25s;animation:fbSayIn .7s cubic-bezier(.3,1.6,.5,1) .6s both}
#flip-book .fb-say:hover{transform:translateY(-3px) rotate(-1.5deg)}
#flip-book .fb-say:active{transform:translateY(2px)}
#flip-book .fb-say:focus-visible{outline:2px solid hsl(var(--accent-hsl));outline-offset:4px}
#flip-book .fb-say.sw{opacity:0;transform:translateY(6px) scale(.96)}
#flip-book .fb-pl{flex:none;width:34px;height:34px;border-radius:50%;background:hsl(var(--accent-hsl));display:grid;place-items:center}
#flip-book .fb-pl:after{content:'';margin-left:3px;border-left:10px solid hsl(var(--white-hsl));border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
#flip-book .fb-st{display:flex;flex-direction:column;line-height:1.1}
#flip-book .fb-st small{font-family:var(--fb-body);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:hsl(var(--accent-hsl));opacity:.75;margin-bottom:3px}
#flip-book .fb-st b{font-family:var(--fb-heading);font-weight:400;font-size:19px;white-space:nowrap}
#flip-book .fb-st b em{font-family:var(--fb-body);font-style:normal;font-size:13px;opacity:.7;margin-left:3px}
#flip-book .fb-wv{display:flex;align-items:center;gap:3px;height:26px}
#flip-book .fb-wv i{display:block;width:3px;height:7px;border-radius:2px;background:hsl(var(--accent-hsl));animation:fbWave 1.1s ease-in-out infinite alternate}
#flip-book .fb-wv i:nth-child(2){animation-delay:-.25s}#flip-book .fb-wv i:nth-child(3){animation-delay:-.55s}#flip-book .fb-wv i:nth-child(4){animation-delay:-.8s}#flip-book .fb-wv i:nth-child(5){animation-delay:-.4s}#flip-book .fb-wv i:nth-child(6){animation-delay:-.95s}
#flip-book .speaking .fb-wv i{animation-duration:.32s}
#flip-book .speaking .fb-pl{animation:fbPulse .6s ease-out infinite}
@keyframes fbWave{to{height:22px}}
@keyframes fbPulse{0%{box-shadow:0 0 0 0 hsla(var(--accent-hsl),.45)}100%{box-shadow:0 0 0 10px hsla(var(--accent-hsl),0)}}
@keyframes fbSayIn{from{opacity:0;transform:translateY(14px) scale(.85)}}
@media (max-width:767px){#flip-book .fb-say{right:-4%;bottom:6%;padding:7px 12px 7px 7px;gap:8px}#flip-book .fb-pl{width:28px;height:28px}#flip-book .fb-st b{font-size:16px}}
@media (prefers-reduced-motion:reduce){#flip-book .fb-say,#flip-book .fb-wv i{animation:none}}

/* ---------- v25: header is see-through for as long as the hero is on screen, so it never hides the cube ---------- */
#header{transition:background-color .2s ease,box-shadow .2s ease}
html.fb-top #header,html.fb-top #header .header-background,html.fb-top #header .header-inner{background-color:transparent!important;background-image:none!important;box-shadow:none!important;border-color:transparent!important}
/* ---------- v24: tab top edge stays put while the cube turns (no popping) ---------- */
#flip-book .cs-folderword .fb-fc.side .tabw .w.tt{visibility:visible}
#flip-book .cs-folderword .fb-fc.away .tabw .w.tt{visibility:hidden}

/* ---------- v27: folder edges fade smoothly as a folder turns away, nothing pops or vanishes ---------- */
#flip-book .cs-folderword .fb-fc .w{visibility:visible!important;opacity:var(--wv,1);transition:none!important}
#flip-book .cs-folderword .fb-fc .tabw .w{opacity:calc(var(--wv,1) * var(--tv,1))}
</style>

Paste in: Settings, Developer tools, Code injection, Footer

Ready to paste

<script>
/* Tutor Cube Hero v27 by Novule. Everything is edited in the List section:
   Section title    "Hey = Ehi, Hi = Hola, Hello = Bonjour"  -> word pairs: English on the left, the translation on the right
                    "Say, Sí!, Oui, Sì!"  -> "Say" stays on the left, the other words take turns on the right
                    (commas, ? or | all work as separators)
   One List item per tutor, in the same order as the words:
     Item title       -> tutor's name (e.g. Connor)
     Item description -> line 1 their language (e.g. Italian)
                         line 2 the word on the folder (e.g. Ehi)
                         line 3 a small line (e.g. means hello)
                         line 4 optional: how to say it, between slashes (e.g. /eh-ee/)
                         (or all on one line with dots: Italian · Ehi · means hello)
     Item image       -> their photo, on a face of the cube
     Item button      -> optional: where their folder links to
   One List item WITHOUT an image -> the headline: its title is the big line bottom left,
                         its description (optional) is a small line under it
   Section button (turn it on in the List section) -> the button bottom left
   Section background image (Squarespace section settings) -> treated with BG_MODE
   Smart touches: the cube opens on the tutor who speaks the visitor's browser language,
   and tapping the folder says the greeting out loud. Add ?hello=fr (or es, it...) to the page address to demo a language. */
(function () {
var SECTION = '#flip-book';   /* the section's Anchor Link (section settings) must be flip-book */
var WORD_SECONDS = 3;        /* how long each tutor and word stays */
var TILT = true;             /* cube and words lean towards the mouse */
var CUBE_STYLE = 'folderword'; /* cube design: 'folderword', 'folder', 'photo', 'framed', 'polaroid', 'word', 'arch', 'block', 'sliced', 'glass' */
var GAP = 0;                 /* space between the header and the top of the cube, in px */
var LAYOUT = 'corners';      /* 'corners' = headline + button bottom left, tutor details top right. 'centre' = name under the cube */
var HEADLINE = 'Learn it from a person, not an app.'; /* used only if there is no List item without an image */
var META_LABEL = 'Your first word'; /* small title above the tutor details, top right ('' to hide) */
var FOLDER_DEPTH = 22;       /* how thick the folders are, in px (0 = flat) */
var SHAPE = 'cube';          /* 'cube' = a closed cube, 'ring' = four folders turning in a ring */
var SHRINK = .45;            /* how much the cube and words shrink as you scroll away (0 = no shrink) */
var TAB_OPEN = 0;            /* how far the name tab tips forward, like it is about to open (0 = flat) */
var WORD_STYLE = 'straight'; /* 3D words: 'straight' (face forward, depth follows the mouse) or 'tilted' */
var REST_ANGLE = 22;         /* how much the cube shows its side at rest (0 = flat on) */
var EXTRUDE = true;          /* chunky 3D side words */
var DEPTH = 26;              /* how deep the 3D words are */
var FIT_HEIGHT = true;       /* hero is only as tall as it needs to be, so there is no empty gap before the next section */
var BOTTOM_SPACE = 8;        /* extra space under the hint before the next section, in px */
var BG_MODE = 'knockout';    /* section background image: 'knockout' (only inside the words), 'frosted', 'duotone', 'photo' */
var WORD_FACE = 'blush';     /* front of the 3D words: 'ink', 'blush', 'wine', 'cream', 'tutor' (photo of the tutor on show) or 'bg' (section background photo) */
var LINE = 'Your {lang} tutor'; /* the line under the name, {lang} is the item description */
var GREET_VISITOR = true;    /* open on the tutor who speaks the visitor's language */
var SPEAK = true;            /* tap the folder to hear the greeting */
var SAY_IT = true;           /* the little 'Say it' bubble on the corner of the cube (tap it to hear the word) */
var SAY_LABEL = 'Say it';    /* small label in the bubble */
var HINT = 'Tap the folder to hear it'; /* small hint under the name ('' to hide) */
var LANGS = { english: 'en', spanish: 'es', french: 'fr', italian: 'it', portuguese: 'pt', german: 'de', dutch: 'nl', swedish: 'sv', norwegian: 'no', danish: 'da', finnish: 'fi', polish: 'pl', turkish: 'tr', greek: 'el', romanian: 'ro', russian: 'ru', ukrainian: 'uk', arabic: 'ar', hebrew: 'he', hindi: 'hi', japanese: 'ja', korean: 'ko', chinese: 'zh', mandarin: 'zh', cantonese: 'zh-HK', thai: 'th', vietnamese: 'vi', indonesian: 'id', swahili: 'sw', yoruba: 'yo', czech: 'cs', hungarian: 'hu' };
var state = null;
function cfg(k, v) { return (window.FB_CFG && window.FB_CFG[k] != null) ? window.FB_CFG[k] : v; }
function txt(el) { return el ? el.textContent.replace(/\s+/g, ' ').trim() : ''; }
function imgSrc(img) { if (!img) return ''; var u = img.getAttribute('data-src') || img.currentSrc || img.src || ''; if (u.indexOf('data:') === 0) return ''; return u.split('?')[0] + (u.indexOf('squarespace-cdn') > -1 ? '?format=1000w' : ''); }
function el(tag, cls, html) { var e = document.createElement(tag); if (cls) e.className = cls; if (html != null) e.innerHTML = html; return e; }
function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
function mod(a, n) { return ((a % n) + n) % n; }
function x3(word, face, flat) {
var n = cfg('DEPTH', DEPTH), h = '<span class="x3w"><span class="x3 ' + face + '">';
for (var k = n; k >= 1; k--) h += '<span class="ly" style="transform:' + (flat ? 'translate(calc(var(--ex) * ' + k + '), calc(var(--ey) * ' + k + '))' : 'translateZ(' + (-k * 2.6).toFixed(1) + 'px)') + ';color:color-mix(in srgb, var(--fb-side-depth), #000 ' + Math.round(22 + k / n * 50) + '%)">' + esc(word) + '</span>';
return h + '<span class="ly ln">' + esc(word) + '</span><span class="ly lf">' + esc(word) + '</span><span class="sz">' + esc(word) + '</span></span></span>';
}
function build() {
var s = document.querySelector(SECTION);
if (!s || state) return;
if (document.body.classList.contains('sqs-edit-mode-active')) return;
var items = Array.prototype.slice.call(s.querySelectorAll('li.list-item'));
if (!items.length) return;
var EX = cfg('EXTRUDE', EXTRUDE), MODE = cfg('BG_MODE', BG_MODE), FACE = cfg('WORD_FACE', WORD_FACE), WS = cfg('WORD_STYLE', WORD_STYLE);
var btn = s.querySelector('.list-section-button-container a');
var data = items.map(function (li) {
var b = li.querySelector('.list-item-content__button-container a, a.list-item-content__button');
var dEl = li.querySelector('.list-item-content__description'), ps = [];
if (dEl) { var tmp = document.createElement('div'); tmp.innerHTML = dEl.innerHTML.replace(/<br\s*\/?>/gi, '\n').replace(/<\/(p|div|li|h\d)>/gi, '\n'); ps = (tmp.textContent || '').split('\n').map(function (x) { return x.replace(/\s+/g, ' ').trim(); }).filter(function (x) { return x; }); }
if (ps.length === 1 && /[\u00B7\u2022|]/.test(ps[0])) ps = ps[0].split(/[\u00B7\u2022|]/).map(function (x) { return x.trim(); }).filter(function (x) { return x; });
var title = txt(li.querySelector('.list-item-content__title')), raw = ps.join(' ');
ps = ps.filter(function (x) { return !/^\[.*\]$/.test(x); });
ps = ps.reduce(function (a, x) { var m = x.match(/^([A-Za-z]+)([A-Z\u00C0-\u00DE\u00A1\u00BF].*)$/); if (m && LANGS[m[1].toLowerCase()]) { a.push(m[1], m[2].trim()); } else a.push(x); return a; }, []);
var pr = ''; ps = ps.filter(function (x) { if (!pr && /^\/.+\/$/.test(x)) { pr = x; return false; } return true; });
var li2 = -1, lg = '';
ps.forEach(function (x, i) { var w = x.replace(/^learning\s+/i, '').toLowerCase().split(/[\s(]/)[0]; if (li2 < 0 && LANGS[w]) { li2 = i; lg = x.replace(/^learning\s+/i, ''); } });
if (li2 < 0 && ps.length) { li2 = 0; lg = ps[0].replace(/^learning\s+/i, ''); }
var rest = ps.filter(function (x, i) { return i !== li2; });
var nm = title, gr = rest[0] || '', sy = rest[1] || '';
if (/[!\u00A1\u00BF?]/.test(title) || /\[[^\]]*\]/.test(raw)) { gr = title; nm = ''; sy = rest[0] && !/[!\u00A1\u00BF?]/.test(rest[0]) && rest[0].split(' ').length > 1 ? rest[0] : ''; if (rest[0] && rest[0].split(' ').length === 1 && !/[!\u00A1\u00BF?]/.test(rest[0])) nm = rest[0]; }
return { img: imgSrc(li.querySelector('.list-item-media img')), name: nm, lang: lg, code: LANGS[lg.toLowerCase().split(/[\s(]/)[0]] || '', greet: gr, say: sy, pron: pr, sub: raw,
href: (b && b.getAttribute('href')) || (btn && btn.getAttribute('href')) || '' };
});
var headItem = null;
data = data.filter(function (d) { if (!d.img && !headItem) { headItem = d; return false; } return true; });
if (!data.length) return;
var picked = null, startStep = 0;
if (cfg('GREET_VISITOR', GREET_VISITOR)) {
var force = (location.search.match(/[?&]hello=([a-z-]+)/i) || [])[1] || cfg('FORCE_LANG', '');
var prefs = force ? [force] : (navigator.languages || [navigator.language || '']);
for (var pi2 = 0; pi2 < prefs.length && !picked; pi2++) {
var base = String(prefs[pi2]).toLowerCase(), b2 = base.split('-')[0];
for (var di = 0; di < data.length; di++) { var c = (data[di].code || '').toLowerCase(); if (c && (c === base || c.split('-')[0] === b2)) { picked = data[di]; startStep = di; break; } }
if (b2 === 'en' && !force) break;
}
}
var words = txt(s.querySelector('.list-section-title')).split(/[?,|]/).map(function (w) { return w.trim(); }).filter(function (w) { return w; });
var pairs = words.some(function (w) { return w.indexOf('=') > 0; });
var leftWords, rightWords;
if (pairs) {
leftWords = []; rightWords = [];
words.forEach(function (w) { var p = w.split('='); leftWords.push((p[0] || '').trim()); rightWords.push((p[1] || p[0] || '').trim()); });
} else {
if (words.length === 1 && words[0].indexOf(' ') > 0) { var sp = words[0].indexOf(' '); words = [words[0].slice(0, sp), words[0].slice(sp + 1)]; }
if (!words.length) words = ['Say', 'hello.'];
leftWords = [words[0]]; rightWords = words.slice(1);
if (!rightWords.length) rightWords = [''];
}
if (pairs) {
var clean = function (x) { return String(x || '').toLowerCase().replace(/[!\u00A1\u00BF?.]/g, '').trim(); };
var L2 = [], R2 = [];
data.forEach(function (d, i) {
var g = clean(d.greet), k = -1;
rightWords.forEach(function (r, j) { if (k < 0 && g && clean(r) === g) k = j; });
var mean = ((d.say || '').match(/^means\s+(.+)$/i) || [])[1];
R2.push(d.greet || rightWords[i % rightWords.length] || '');
L2.push(k >= 0 ? leftWords[k] : (mean ? mean.charAt(0).toUpperCase() + mean.slice(1) : (leftWords[i % leftWords.length] || '')));
});
leftWords = L2; rightWords = R2;
}
var leftWord = leftWords[0];
var bgEl = s.querySelector('.section-background img'), bg = bgEl ? (bgEl.getAttribute('data-src') || bgEl.currentSrc || bgEl.src || '').split('?')[0] : '';
if (bg.indexOf('data:') === 0) bg = '';
var fp = ((bgEl && bgEl.getAttribute('data-image-focal-point')) || '0.5,0.5').split(',').map(parseFloat);
if (bg && bg.indexOf('squarespace-cdn') > -1) bg += '?format=2500w';
if (FACE === 'auto') FACE = !bg ? 'wine' : (MODE === 'knockout' || MODE === 'frosted') ? 'bg' : MODE === 'duotone' ? 'cream' : 'wine';
var faceCls = FACE === 'bg' ? (bg ? 'bgfill' : 'wine') : FACE === 'tutor' ? 'tutorfill' : FACE;
var flat = WS === 'straight';

var stage = el('div', 'fb-stage');
if (bg) { stage.appendChild(el('div', 'fb-wash', MODE === 'knockout' ? '' : '<img src="' + esc(bg) + '" alt="" style="object-position:' + (fp[0] * 100) + '% ' + (fp[1] * 100) + '%">')); s.classList.add('fb-bg-' + MODE); }
var mid = el('div', 'fb-mid');
mid.appendChild(el('div', 'fb-floor'));
var CS = cfg('CUBE_STYLE', CUBE_STYLE), RING = cfg('SHAPE', SHAPE) === 'ring' && CS !== 'sliced';
if (RING) mid.classList.add('fb-ring');
mid.classList.add('cs-' + CS);
var cube = el('div', 'fb-cube');
var slices = [], faces;
function depthHTML() {
return cfg('FOLDER_DEPTH', FOLDER_DEPTH) ? '<i class="w wt"></i><i class="w wb"></i><i class="w wl"></i><i class="w wr"></i>' : '';
}
function tabHTML() {
return '<span class="tabw" style="transform:rotateX(' + (-cfg('TAB_OPEN', TAB_OPEN)) + 'deg)">' + (cfg('FOLDER_DEPTH', FOLDER_DEPTH) ? '<i class="w tt"></i><i class="w tlw"></i><i class="w trw"></i>' : '') + '<span class="tab"><em></em></span></span>';
}
function faceHTML() {
if (CS === 'framed') return '<span class="pf"><img alt="" draggable="false"></span><em></em><span class="fb-shade"></span>';
if (CS === 'folderword') return depthHTML() + tabHTML() + '<span class="body"><span class="ph"><img alt="" draggable="false"><span class="hear" aria-hidden="true"><i></i><i></i><i></i><i></i></span></span></span><span class="fb-shade"></span>';
if (CS === 'folder') return '<span class="tab"><em></em></span><span class="body"><img alt="" draggable="false"></span><span class="fb-shade"></span>';
if (CS === 'polaroid') return '<span class="pf"><img alt="" draggable="false"></span><em></em><span class="fb-shade"></span>';
if (CS === 'word') return '<span class="pf"><img alt="" draggable="false"></span><strong></strong><em></em><span class="fb-shade"></span>';
if (CS === 'arch') return '<span class="pf"><img alt="" draggable="false"></span><em></em><span class="fb-shade"></span>';
if (CS === 'glass') return '<span class="pf"><img alt="" draggable="false"></span><em></em><span class="gl"></span>';
return '<img alt="" draggable="false"><em></em><span class="fb-shade"></span>';
}
if (CS === 'sliced') {
for (var si = 0; si < 3; si++) { var sl = el('div', 'fb-slice'); sl.style.top = (si * 100 / 3) + '%'; slices.push({ el: sl, a: 0, f: [0, 1, 2, 3].map(function () { var f = el('div', 'fb-fc', '<span class="fb-shade"></span>'); sl.appendChild(f); return f; }) }); cube.appendChild(sl); }
faces = slices[0].f;
} else {
faces = [0, 1, 2, 3].map(function () { var f = el('div', 'fb-fc', faceHTML()); f.style.setProperty('--fd', cfg('FOLDER_DEPTH', FOLDER_DEPTH) + 'px'); cube.appendChild(f); return f; });
}
if (CS === 'block') { cube.appendChild(el('div', 'fb-capt')); cube.appendChild(el('div', 'fb-capb')); }
mid.appendChild(cube);
if (CS === 'glass') mid.appendChild(el('div', 'fb-glow'));
stage.appendChild(mid);
var leftEl = el('p', 'fb-side fb-left', EX ? x3(leftWord, faceCls, flat) : esc(leftWord));
var rightEl = el('p', 'fb-side fb-right', EX ? x3(rightWords[0], faceCls, flat) : esc(rightWords[0]));
stage.appendChild(leftEl); stage.appendChild(rightEl);
if (flat) stage.classList.add('fb-flat');
var cap = el('a', 'fb-cap');
stage.appendChild(cap);
var canSpeak = cfg('SPEAK', SPEAK) && 'speechSynthesis' in window && typeof SpeechSynthesisUtterance !== 'undefined';
if (canSpeak) { mid.classList.add('can-speak'); try { speechSynthesis.getVoices(); } catch (err) {} }
var hint = null, corners = cfg('LAYOUT', LAYOUT) === 'corners', intro = null, meta = null, dots = null;
if (corners) {
stage.classList.add('fb-corners');
var hl = headItem ? (headItem.name || headItem.greet) : cfg('HEADLINE', HEADLINE), hs = headItem ? headItem.sub : '';
intro = el('div', 'fb-intro', (hl ? '<h2 class="fb-head">' + esc(hl) + '</h2>' : '') + (hs ? '<p class="fb-sub">' + esc(hs) + '</p>' : '') + (canSpeak && cfg('HINT', HINT) ? '<span class="fb-tip">' + esc(cfg('HINT', HINT)) + '</span>' : '') + (btn ? '<div class="fb-row"><a class="fb-btn" href="' + esc(btn.getAttribute('href') || '#') + '">' + esc(txt(btn)) + '</a></div>' : ''));
stage.appendChild(intro);
meta = el('div', 'fb-meta', (cfg('META_LABEL', META_LABEL) ? '<b class="fb-ml">' + esc(cfg('META_LABEL', META_LABEL)) + '</b>' : '') + '<span class="fb-m1"></span><span class="fb-m2"></span>');
stage.appendChild(meta);
if (data.length > 1) { dots = el('div', 'fb-dots', data.map(function (d, i) { return '<button type="button" data-i="' + i + '" aria-label="' + esc(d.lang || d.name) + '">' + esc((d.code || d.lang.replace(/[^A-Za-z\u00C0-\u00FF]/g, '') || d.name || '?').slice(0, 2).toUpperCase()) + '</button>'; }).join('')); stage.appendChild(dots); }
} else if (canSpeak && cfg('HINT', HINT)) { hint = el('span', 'fb-hint', esc(cfg('HINT', HINT))); stage.appendChild(hint); }
var say = null;
if (canSpeak && cfg('SAY_IT', SAY_IT)) {
say = el('button', 'fb-say', '<span class="fb-pl"></span><span class="fb-st">' + (cfg('SAY_LABEL', SAY_LABEL) ? '<small>' + esc(cfg('SAY_LABEL', SAY_LABEL)) + '</small>' : '') + '<b></b></span><span class="fb-wv"><i></i><i></i><i></i><i></i><i></i><i></i></span>');
say.type = 'button';
mid.appendChild(say); mid.classList.add('has-say');
say.addEventListener('pointerdown', function (e) { e.stopPropagation(); });
say.addEventListener('click', function (e) { e.stopPropagation(); speak(); });
}
mid.setAttribute('tabindex', '0'); mid.setAttribute('role', 'button');
s.appendChild(stage);
s.classList.add('fb-ready');
if (!window.__fbHdr) { window.__fbHdr = function () { var hs = document.querySelector(SECTION + '.fb-ready'), hd = document.querySelector('#header, header.header'), hb = hd ? hd.getBoundingClientRect().bottom : 0; document.documentElement.classList.toggle('fb-top', !!hs && hs.getBoundingClientRect().bottom > hb + 2); }; window.addEventListener('scroll', window.__fbHdr, { passive: true }); window.addEventListener('resize', window.__fbHdr); }
window.__fbHdr();

var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var mobile = window.matchMedia('(max-width: 767px)');
var lw = EX ? leftEl.querySelector('.x3w') : null, rw = EX ? rightEl.querySelector('.x3w') : null;
state = { s: s, stage: stage, A: 0, T: 0, v: 0, step: null, drag: false, mx: 0, my: 0, tx: 0, ty: 0, raf: 0, last: 0, t0: performance.now(), visible: true, timer: 0 };

function setFace(k, step) {
var d = data[mod(step, data.length)];
if (CS === 'sliced') { slices.forEach(function (sl) { sl.f[mod(k, 4)].style.backgroundImage = d.img ? 'url(' + d.img + ')' : ''; }); return; }
var f = faces[mod(k, 4)], im = f.querySelector('img');
if (d.img && im.getAttribute('src') !== d.img) im.src = d.img;
var em = f.querySelector('em'); if (em) em.textContent = (CS === 'polaroid' || CS === 'folderword') && d.name ? d.name + (d.lang ? ' \u00B7 ' + d.lang : '') : d.lang;
var st = f.querySelector('strong'); if (st) { st.textContent = d.greet || rightWords[mod(step, rightWords.length)] || ''; st.style.setProperty('--wf', Math.min(1, 6 / Math.max(1, st.textContent.length)).toFixed(3)); }
var sm = f.querySelector('.wd small'); if (sm) sm.textContent = d.say || (d.lang ? 'means hello in ' + d.lang : '');
}
function speak() {
if (!canSpeak || !state) return;
var d = data[mod(state.step, data.length)], word = (d.greet || rightWords[mod(state.step, rightWords.length)] || '').replace(/[\u00A1!\u00BF?.]/g, '').trim();
if (!word) return;
try {
speechSynthesis.cancel();
var u = new SpeechSynthesisUtterance(word), code = d.code || 'en';
u.lang = code; u.rate = .9;
var vs = speechSynthesis.getVoices().filter(function (v) { return v.lang && v.lang.toLowerCase().indexOf(code.toLowerCase().split('-')[0]) === 0; });
if (vs.length) u.voice = vs[0];
mid.classList.add('speaking');
u.onend = u.onerror = function () { mid.classList.remove('speaking'); };
speechSynthesis.speak(u);
setTimeout(function () { mid.classList.remove('speaking'); }, 2500);
} catch (err) {}
if (hint) hint.classList.add('gone');
var tp = stage.querySelector('.fb-tip'); if (tp) tp.classList.add('gone');
}
function tutorFill(d) { if (faceCls === 'tutorfill' && d.img) stage.style.setProperty('--x3-img', 'url(' + d.img + ')'); }
function capHTML(d) { return '<b>' + esc(d.name) + '</b><i>' + esc(cfg('LINE', LINE).replace('{lang}', d.lang)) + (d === picked && !state.moved ? ' \u00B7 picked for you' : '') + '</i><span class="ar">&#8594;</span>'; }
function setSay(d, step) {
if (!say) return;
var w = d.greet || rightWords[mod(step, rightWords.length)] || '';
say.querySelector('b').innerHTML = esc(w) + (d.pron ? ' <em>' + esc(d.pron) + '</em>' : '');
say.setAttribute('aria-label', 'Hear ' + w);
}
function setMeta(d, step) {
setSay(d, step);
if (!meta) return;
var w = d.greet || rightWords[mod(step, rightWords.length)] || '';
meta.querySelector('.fb-m1').textContent = w + (d.say ? ' \u00B7 ' + d.say : (w ? ' \u00B7 means hello' : ''));
meta.querySelector('.fb-m2').textContent = (d.lang || '') + (d.name ? (d.lang ? ', with ' : 'With ') + d.name : '');
if (dots) Array.prototype.forEach.call(dots.querySelectorAll('button'), function (b, i) { b.classList.toggle('on', i === mod(step, data.length)); });
}
function setWord(step, first) {
var d = data[mod(step, data.length)], w = rightWords[mod(step, rightWords.length)];
for (var k = -1; k <= 2; k++) setFace(step + k, step + k);
mid.setAttribute('aria-label', (canSpeak ? 'Hear ' : '') + (d.greet || w) + ', ' + d.name + ', ' + d.lang + ' tutor');
if (first) { cap.innerHTML = capHTML(d); cap.href = d.href || '#'; tutorFill(d); setMeta(d, step);
if (pairs) { var lw0 = leftWords[mod(step, leftWords.length)]; Array.prototype.forEach.call(leftEl.querySelectorAll('.ly,.sz'), function (n) { n.textContent = lw0; }); Array.prototype.forEach.call(rightEl.querySelectorAll('.ly,.sz'), function (n) { n.textContent = w; }); fit(); }
return; }
var lwNew = leftWords[mod(step, leftWords.length)];
var swapLeft = pairs && leftWords.length > 1;
rightEl.classList.add('out'); cap.classList.add('sw'); if (meta) meta.classList.add('sw'); if (say) say.classList.add('sw'); if (swapLeft) leftEl.classList.add('out');
setTimeout(function () {
if (!state) return;
if (EX) Array.prototype.forEach.call(rightEl.querySelectorAll('.ly,.sz'), function (n) { n.textContent = w; }); else rightEl.textContent = w;
if (swapLeft) { if (EX) Array.prototype.forEach.call(leftEl.querySelectorAll('.ly,.sz'), function (n) { n.textContent = lwNew; }); else leftEl.textContent = lwNew; }
cap.innerHTML = capHTML(d); cap.href = d.href || '#'; setMeta(d, step); if (meta) meta.classList.remove('sw'); if (say) say.classList.remove('sw');
tutorFill(d);
fit(); alignBg();
rightEl.classList.remove('out'); cap.classList.remove('sw'); leftEl.classList.remove('out');
}, 240);
}
function layout() {
var W = mid.clientWidth, H = mid.clientHeight;
var all = CS === 'sliced' ? slices.reduce(function (a, s2) { return a.concat(s2.f); }, []) : faces;
if (!RING) all.forEach(function (f, i) { f.style.transform = 'rotateY(' + ((i % 4) * 90) + 'deg) translateZ(' + (W / 2) + 'px)'; });
slices.forEach(function (sl, si) { sl.f.forEach(function (f) { f.style.backgroundSize = W + 'px ' + H + 'px'; f.style.backgroundPosition = '50% ' + (-si * H / 3) + 'px'; }); });
var ct = cube.querySelector('.fb-capt'), cb = cube.querySelector('.fb-capb');
if (ct) { ct.style.cssText = 'width:' + W + 'px;height:' + W + 'px;top:' + ((H - W) / 2) + 'px;transform:rotateX(90deg) translateZ(' + (H / 2) + 'px)'; cb.style.cssText = 'width:' + W + 'px;height:' + W + 'px;top:' + ((H - W) / 2) + 'px;transform:rotateX(-90deg) translateZ(' + (H / 2) + 'px)'; }
}
function place() {
if (mobile.matches) { stage.style.removeProperty('--fb-cy'); stage.style.removeProperty('--fb-ch'); stage.style.height = ''; mid.style.width = ''; mid.style.height = ''; return; }
var hd = document.querySelector('#header, header.header, header');
stage.style.height = '';
var R = stage.getBoundingClientRect(), hb = hd ? hd.getBoundingClientRect().bottom - R.top + window.scrollY * 0 : 110;
if (hb < 0 || hb > R.height * .4) hb = 110;
mid.style.width = ''; mid.style.height = '';
var W = mid.clientWidth, H = mid.clientHeight, gap = cfg('GAP', GAP);
var maxH = R.height - hb - gap - (corners ? 96 : 120);
if (H > maxH && maxH > 160) { W = maxH / 1.15; H = maxH; mid.style.width = W + 'px'; mid.style.height = H + 'px'; }
stage.style.setProperty('--fb-cy', (hb + gap + H / 2) + 'px');
stage.style.setProperty('--fb-ch', H + 'px');
stage.style.setProperty('--fb-hb', hb + 'px');
stage.style.setProperty('--fb-gap', gap + 'px');
stage.style.removeProperty('--fb-mt'); stage.style.removeProperty('--fb-bb');
if (corners) { clearTimeout(state.al); state.al = setTimeout(alignCorners, 1300); }
if (cfg('FIT_HEIGHT', FIT_HEIGHT)) stage.style.height = Math.round(hb + gap + H + (corners ? 110 : 50 + 26 + (hint ? 44 : 6)) + cfg('BOTTOM_SPACE', BOTTOM_SPACE)) + 'px';
}
function fit() {
var ws = [leftEl, rightEl];
ws.forEach(function (w) { w.style.fontSize = ''; w.style.left = ''; w.style.right = ''; });
if (mobile.matches) return;
var SW = stage.clientWidth, half = mid.clientWidth * (RING ? .8 : flat ? .66 : .72), gap = Math.max(14, SW * .012);
var M = corners ? Math.max(24, SW * .04) : SW * .025;
var room = SW / 2 - half - gap - M;
half = mid.clientWidth * (RING ? .8 : flat ? .62 : .72);
room = SW / 2 - half - gap - M;
var max = parseFloat(getComputedStyle(leftEl).fontSize), size = max;
var extra = (cfg('DEPTH', DEPTH) * .0055 * 1.3 + .08) * max;
leftWords.concat(rightWords).forEach(function (wd) {
var probe = el('span', '', esc(wd));
probe.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;font:inherit';
leftEl.appendChild(probe); var wid = probe.offsetWidth + extra; leftEl.removeChild(probe);
if (wid > room) size = Math.min(size, max * room / wid);
});
size = Math.max(40, size);
if (size < max) ws.forEach(function (w) { w.style.fontSize = size + 'px'; });
if (corners) { leftEl.style.right = 'auto'; leftEl.style.left = M + 'px'; rightEl.style.left = 'auto'; rightEl.style.right = M + 'px'; }
else { leftEl.style.left = 'auto'; leftEl.style.right = (SW / 2 + half + gap) + 'px'; rightEl.style.right = 'auto'; rightEl.style.left = (SW / 2 + half + gap) + 'px'; }
}
function alignCorners() {
if (!state || !corners || mobile.matches) return;
if (Math.abs(state.T - state.A) > 1 || state.drag || progress() > 0) { clearTimeout(state.al); state.al = setTimeout(alignCorners, 500); return; }
var sr = stage.getBoundingClientRect(), top = Infinity, bot = -Infinity, bob = parseFloat(cube.parentNode.style.getPropertyValue('--bob')) || 0;
var fr = null, lo = 9;
faces.forEach(function (f) { var sh = f.querySelector('.fb-shade'), o = sh ? parseFloat(sh.style.opacity || 0) : 0; if (o < lo) { lo = o; fr = f; } });
if (fr) { var rt = (fr.querySelector('.tab') || fr).getBoundingClientRect(), rb = (fr.querySelector('.body') || fr).getBoundingClientRect(); top = rt.top; bot = rb.bottom; }
if (!isFinite(top)) return;
stage.style.setProperty('--fb-mt', Math.round(top - bob - sr.top) + 'px');
stage.style.setProperty('--fb-bb', Math.max(16, Math.round(sr.bottom - (bot - bob))) + 'px');
}
var bgSize = null;
function alignBg() {
if (faceCls !== 'bgfill' || !bgSize) return;
var R = stage.getBoundingClientRect();
var sc = Math.max(R.width / bgSize[0], R.height / bgSize[1]), w = bgSize[0] * sc, h = bgSize[1] * sc;
var ox = (R.width - w) * fp[0], oy = (R.height - h) * fp[1];
Array.prototype.forEach.call(stage.querySelectorAll('.x3 .lf'), function (n) {
var r = n.getBoundingClientRect();
n.style.backgroundSize = '100% 100%, ' + w.toFixed(0) + 'px ' + h.toFixed(0) + 'px';
n.style.backgroundPosition = '0 0, ' + (ox - (r.left - R.left)).toFixed(1) + 'px ' + (oy - (r.top - R.top)).toFixed(1) + 'px';
});
}
if (faceCls === 'bgfill') { stage.style.setProperty('--x3-bg', 'url(' + bg + ')'); var pi = new Image(); pi.onload = function () { bgSize = [pi.naturalWidth, pi.naturalHeight]; alignBg(); }; pi.src = bg; }
function progress() { var r = stage.getBoundingClientRect(); return clamp(-r.top / (r.height * .85), 0, 1); }
function render(now) {
var tt = (now - state.t0) / 1000, p = progress();
var W = mid.clientWidth, rest = cfg('REST_ANGLE', REST_ANGLE);
var ang = state.A + rest + state.tx * 18 + p * 50;
var rx = (CS === 'block' ? -20 : CS === 'folderword' ? -11 : -6) - state.ty * 10;
if (CS === 'sliced') {
cube.style.transform = 'translateZ(' + (-W / 2) + 'px) rotateX(' + rx.toFixed(2) + 'deg)';
slices.forEach(function (sl, si) { sl.a += (ang - sl.a) * (si === 0 ? .2 : si === 1 ? .11 : .065); if (state.fr === undefined) sl.a = ang; sl.el.style.transform = 'rotateY(' + sl.a.toFixed(2) + 'deg)';
sl.f.forEach(function (f, k) { var c = Math.cos((sl.a + k * 90) * Math.PI / 180); f.querySelector('.fb-shade').style.opacity = clamp((1 - c) * .32, 0, .55).toFixed(3); }); });
} else if (RING) {
var H2 = mid.clientHeight, RX = W * .45, RZ = W * .42, RY = H2 * .08;
cube.style.transform = 'translateY(var(--bob, 0px)) rotateX(' + (-7 - state.ty * 6).toFixed(2) + 'deg) rotateY(' + (state.tx * 6).toFixed(2) + 'deg)';
faces.forEach(function (f, k) {
var t = (ang + k * 90) * Math.PI / 180, sn = Math.sin(t), c = Math.cos(t), sh = f.querySelector('.fb-shade');
f.style.transform = 'translate3d(' + (sn * RX).toFixed(1) + 'px,' + (c * RY).toFixed(1) + 'px,' + (c * RZ).toFixed(1) + 'px) rotateY(' + (sn * 26).toFixed(2) + 'deg)';
if (sh) sh.style.opacity = ((1 - c) * .22).toFixed(3);
});
} else {
cube.style.transform = 'translateY(var(--bob, 0px)) translateZ(' + (-W / 2) + 'px) rotateX(' + rx.toFixed(2) + 'deg) rotateY(' + ang.toFixed(2) + 'deg)';
faces.forEach(function (f, k) {
var a = (ang + k * 90) * Math.PI / 180, c = Math.cos(a), sh = f.querySelector('.fb-shade');
if (sh) sh.style.opacity = clamp((1 - c) * .32, 0, .55).toFixed(3);
f.classList.toggle('away', c < .05);
f.classList.toggle('side', c < .8); f.style.setProperty('--wv', clamp(c / .12, 0, 1).toFixed(3)); f.style.setProperty('--tv', clamp((c - .45) / .35, 0, 1).toFixed(3));
if (CS === 'glass') f.style.opacity = (c > 0 ? 1 : .35).toString();
});
}
var SK = cfg('SHRINK', SHRINK), sc = 1 - p * SK * .8, op = clamp(1.25 - p * 1.6, 0, 1), y = mobile.matches ? '' : 'translateY(-50%) ';
leftEl.style.transform = y + 'scale(' + sc.toFixed(3) + ')'; leftEl.style.opacity = clamp(1.3 - p * 1.3, 0, 1).toFixed(3);
rightEl.style.transform = y + 'scale(' + sc.toFixed(3) + ')'; rightEl.style.opacity = clamp(1.3 - p * 1.3, 0, 1).toFixed(3);
mid.style.transform = 'translate(-50%,-50%) translateY(' + (p * 60).toFixed(1) + 'px) scale(' + (1 - p * SK).toFixed(3) + ')';
mid.style.opacity = clamp(1.4 - p * 1.2, 0, 1).toFixed(3);
cap.style.opacity = op.toFixed(3);
if (intro) intro.style.opacity = op.toFixed(3);
if (meta) meta.style.opacity = op.toFixed(3);
if (dots) dots.style.opacity = op.toFixed(3);
if (hint && !hint.classList.contains('gone')) hint.style.opacity = (op * .55).toFixed(3);
if (lw && flat) {
var sw2 = reduced ? 0 : Math.sin(tt * .7) * .25;
var ex = ((1.1 - state.tx * .9 + sw2) * .005).toFixed(4) + 'em', ey = ((1.1 - state.ty * .7) * .005).toFixed(4) + 'em';
[lw, rw].forEach(function (w) { var x = w.firstChild; x.style.setProperty('--ex', ex); x.style.setProperty('--ey', ey); });
} else if (lw) {
var sw = reduced ? 0 : Math.sin(tt * .7);
lw.style.transform = 'rotateY(' + (24 + state.tx * 16 + sw * 8).toFixed(2) + 'deg) rotateX(' + (8 - state.ty * 12).toFixed(2) + 'deg)';
rw.style.transform = 'rotateY(' + (-24 + state.tx * 16 - sw * 8).toFixed(2) + 'deg) rotateX(' + (8 - state.ty * 12).toFixed(2) + 'deg)';
}
if (!reduced) cube.parentNode.style.setProperty('--bob', (Math.sin(tt * 1.3) * 6).toFixed(2) + 'px');
}
function tick(now) {
state.raf = 0;
if (!state.visible || document.hidden) { state.last = 0; return; }
var dt = state.last ? Math.min(.1, (now - state.last) / 1000) : 0;
state.last = now;
if (!state.drag) { state.v += ((state.T - state.A) * 60 - state.v * 11) * dt; state.A += state.v * dt; }
var k = Math.min(1, dt * 5);
state.tx += (state.mx - state.tx) * k; state.ty += (state.my - state.ty) * k;
var step = Math.round(-state.A / 90);
if (step !== state.step) { var first = state.step === null; state.step = step; setWord(step, first); }
render(now);
state.fr = (state.fr || 0) + 1; if (faceCls === 'bgfill' && state.fr % 3 === 0) alignBg();
state.raf = requestAnimationFrame(tick);
}
function start() { if (!state.raf) state.raf = requestAnimationFrame(tick); }
function auto() { clearInterval(state.timer); if (reduced) return; state.timer = setInterval(function () { if (state && !state.drag && state.visible && !document.hidden) { state.T -= 90; state.moved = true; } }, cfg('WORD_SECONDS', WORD_SECONDS) * 1000); }
stage.addEventListener('pointermove', function (e) {
if (TILT && e.pointerType === 'mouse') { var r = stage.getBoundingClientRect(); state.mx = ((e.clientX - r.left) / r.width - .5) * 2; state.my = ((e.clientY - r.top) / r.height - .5) * 2; }
if (!state.drag) return;
var now = performance.now(), dx = e.clientX - state.lastX, dA = dx * 180 / Math.max(300, mid.clientWidth * 2.2);
state.A += dA; var dt = Math.max(.008, (now - state.lastT) / 1000); state.v = state.v * .5 + (dA / dt) * .5;
state.lastX = e.clientX; state.lastT = now;
});
stage.addEventListener('pointerleave', function () { state.mx = 0; state.my = 0; });
if (dots) dots.addEventListener('click', function (e) {
var b = e.target.closest('button[data-i]'); if (!b) return;
var i = +b.getAttribute('data-i'), cur = state.step || 0, d = mod(i - cur, data.length);
if (d > data.length / 2) d -= data.length;
state.T = -90 * (cur + d); state.moved = true; auto(); start();
});
[meta, intro, dots].forEach(function (n) { if (n) n.addEventListener('pointerdown', function (e) { e.stopPropagation(); }); });
mid.addEventListener('keydown', function (e) {
if (e.key === 'ArrowRight') { state.T -= 90; state.moved = true; auto(); start(); e.preventDefault(); }
else if (e.key === 'ArrowLeft') { state.T += 90; state.moved = true; auto(); start(); e.preventDefault(); }
else if (e.key === 'Enter' || e.key === ' ') { speak(); e.preventDefault(); }
});
mid.addEventListener('pointerdown', function (e) {
if (e.button !== 0) return;
state.drag = true; state.lastX = e.clientX; state.lastT = performance.now(); state.v = 0; state.downX = e.clientX; state.downY = e.clientY; state.downT = performance.now(); mid.classList.add('is-drag');
try { stage.setPointerCapture(e.pointerId); } catch (err) {}
});
function end(e) {
if (!state.drag) return;
state.drag = false; mid.classList.remove('is-drag');
var tap = e && e.type === 'pointerup' && Math.abs(e.clientX - state.downX) < 6 && Math.abs(e.clientY - state.downY) < 6 && performance.now() - state.downT < 400;
if (tap) { state.v = 0; state.T = Math.round(state.A / 90) * 90; speak(); start(); return; }
state.moved = true;
state.T = Math.round((state.A + clamp(state.v, -900, 900) * .18) / 90) * 90;
state.v = 0; state.last = 0; start(); auto();
}
stage.addEventListener('pointerup', end); stage.addEventListener('pointercancel', end); stage.addEventListener('lostpointercapture', end);
state.onScroll = function () { if (state) start(); };
state.onResize = function () { if (state) { place(); layout(); fit(); alignBg(); } };
window.addEventListener('scroll', state.onScroll, { passive: true });
window.addEventListener('resize', state.onResize);
if ('IntersectionObserver' in window) { state.io = new IntersectionObserver(function (en) { state.visible = en[0].isIntersecting; if (state.visible) { state.last = 0; start(); } }); state.io.observe(stage); }
document.addEventListener('visibilitychange', function () { if (state && !document.hidden) { state.last = 0; start(); } });
place(); layout(); fit();
if (document.fonts && document.fonts.ready) document.fonts.ready.then(function () { if (state) { fit(); alignBg(); } });
state.A = -90 * startStep + (reduced ? 0 : 90); state.T = -90 * startStep;
start(); auto();
}
function teardown() {
if (!state) return;
if (state.raf) cancelAnimationFrame(state.raf);
if (state.io) state.io.disconnect();
clearInterval(state.timer);
try { if ('speechSynthesis' in window) speechSynthesis.cancel(); } catch (err) {}
window.removeEventListener('scroll', state.onScroll);
window.removeEventListener('resize', state.onResize);
state.stage.remove();
document.documentElement.classList.remove('fb-top');
state.s.classList.remove('fb-ready', 'fb-bg-knockout', 'fb-bg-frosted', 'fb-bg-duotone', 'fb-bg-photo');
state = null;
}
window.TutorCube = { build: build, teardown: teardown };
new MutationObserver(function () { if (document.body.classList.contains('sqs-edit-mode-active')) teardown(); else build(); }).observe(document.body, { attributes: true, attributeFilter: ['class'] });
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', build); else build();
window.addEventListener('load', build);
window.addEventListener('mercury:load', function () { teardown(); build(); });
})();

</script>

04FAQFolder accordion

Every question is a file folder that opens to show its answer.

Section IDfolder-faq

Paste in: Settings, Developer tools, Code injection, Footer (CSS included)

Ready to paste

<style>
/* ==========================================================
   FOLDER FAQ  ·  Novule  ·  v2.3 (one block for Footer code injection)
   One List section with the Anchor Link: folder-faq
   Item title = question, item description = answer.
   Bold a word in the section title to turn it into the tilted label.
   Folders run the full width of the page and grow open.
   Colours follow your Squarespace site colours.
   ========================================================== */
#folder-faq{
  --ff-acc:hsl(var(--accent-hsl));
  --ff-light:hsl(var(--lightAccent-hsl));
  --ff-dark:hsl(var(--darkAccent-hsl));
  --ff-cream:hsl(var(--white-hsl));
  --ff-back:color-mix(in srgb, hsl(var(--lightAccent-hsl)), hsl(var(--darkAccent-hsl)) 14%);
  --ff-line:2.5px;
  --ff-head:var(--heading-font-font-family);
  --ff-body:var(--body-font-font-family);
}

/* ---------- title + the bold word label ---------- */
#folder-faq .list-section-title{text-align:center!important}
#folder-faq .list-section-title strong{
  display:inline-block;font-weight:inherit;
  margin:.12em .08em 0;padding:.12em .42em .2em;
  background:var(--ff-acc);color:var(--ff-cream);
  border:var(--ff-line) solid var(--ff-dark);border-radius:.16em;
  box-shadow:.09em .1em 0 var(--ff-dark);
  transform:rotate(-3deg);transform-origin:50% 60%;
  transition:transform .45s cubic-bezier(.3,1.7,.5,1);
}
#folder-faq .list-section-title strong:hover{transform:rotate(1deg) scale(1.03)}

/* ---------- hide the normal list once the folders are built ---------- */
#folder-faq.ff-ready .user-items-list-item-container{display:none!important}
#folder-faq .ff{box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:clamp(20px,2vw,28px);font-family:var(--ff-body);color:var(--ff-dark)}
#folder-faq .ff button{font:inherit;-webkit-tap-highlight-color:transparent}
#folder-faq .ff button:focus-visible{outline:3px solid var(--ff-acc);outline-offset:4px}

/* ---------- one folder ---------- */
#folder-faq .ff-f{position:relative;padding-top:22px}
#folder-faq .ff-bk{position:absolute;left:0;right:0;top:18px;bottom:10px;background:var(--ff-back);border:var(--ff-line) solid var(--ff-dark);border-radius:4px 18px 18px 18px}
#folder-faq .ff-bk:before{content:'';position:absolute;left:-2.5px;top:-18px;width:clamp(120px,14vw,190px);height:20px;background:var(--ff-back);border:var(--ff-line) solid var(--ff-dark);border-bottom:0;border-radius:10px 14px 0 0}
#folder-faq .ff-bk:after{content:'';position:absolute;left:0;top:-2.5px;width:calc(clamp(120px,14vw,190px) - 5px);height:5px;background:var(--ff-back)}
#folder-faq .ff-fr{position:relative;z-index:1;margin-top:14px;background:var(--ff-light);color:var(--ff-dark);border:var(--ff-line) solid var(--ff-dark);border-radius:8px 8px 18px 18px;box-shadow:0 6px 0 -1px var(--ff-dark);transition:background .35s,color .35s,transform .35s cubic-bezier(.3,1.6,.5,1)}
#folder-faq .ff-f:hover .ff-fr{transform:translateY(-2px)}
#folder-faq .ff-row{appearance:none;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);width:100%;padding:clamp(20px,2.2vw,30px) clamp(20px,2.6vw,36px);background:none;border:0;color:inherit;text-align:left;cursor:pointer}
#folder-faq .ff-row b{font-family:var(--ff-head);font-weight:400;font-size:13px;letter-spacing:.08em;flex:none;width:clamp(26px,3vw,40px);opacity:.8}
#folder-faq .ff-row span{flex:1;font-family:var(--ff-head);font-size:clamp(17px,1.7vw,24px);line-height:1.25}
#folder-faq .ff-pm{flex:none;position:relative;width:22px;height:22px}
#folder-faq .ff-pm:before,#folder-faq .ff-pm:after{content:'';position:absolute;left:0;right:0;top:50%;height:2.5px;margin-top:-1.25px;background:currentColor;border-radius:2px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
#folder-faq .ff-pm:after{transform:rotate(90deg)}
#folder-faq .ff-ex{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.3,1,.4,1)}
#folder-faq .ff-ex > div{overflow:hidden;min-height:0}
#folder-faq .ff-a{padding:0 clamp(20px,2.6vw,36px) clamp(22px,2.4vw,32px) calc(clamp(20px,2.6vw,36px) + clamp(26px,3vw,40px) + clamp(12px,1.6vw,22px));font-size:clamp(16px,1.25vw,18px);line-height:1.65;max-width:calc(62ch + 120px);color:inherit}
#folder-faq .ff-a p{margin:0 0 .8em;color:inherit}
#folder-faq .ff-a p:last-child{margin-bottom:0}
#folder-faq .ff-a a{color:var(--ff-light)}

/* open */
#folder-faq .ff-f.open .ff-fr{background:var(--ff-acc);color:var(--ff-cream)}
#folder-faq .ff-f.open .ff-ex{grid-template-rows:1fr}
#folder-faq .ff-f.open .ff-pm:after{transform:rotate(0)}

@media (max-width:767px){
  #folder-faq .ff-a{padding-left:clamp(20px,2.6vw,36px)}
}
@media (prefers-reduced-motion:reduce){
  #folder-faq .ff *{transition:none!important}
}
</style>
<script>
/* FOLDER FAQ v2.3 by Novule. Everything is edited in the List section:
   Section Anchor Link -> folder-faq
   Section title       -> heading. Bold a word (e.g. Answered.) to make it the tilted label.
                          If nothing is bold, the last line (or last word) becomes the label.
   Item title          -> the question
   Item description    -> the answer (links and line breaks are kept)
   Item image          -> not used, you can switch images off in the List settings */
(function () {
var SECTION = '#folder-faq';   /* the section's Anchor Link must be folder-faq */
var OPEN_FIRST = true;         /* open the first question to start */
var ONE_AT_A_TIME = true;      /* opening one folder closes the others */
var AUTO_LABEL = true;         /* no bold word in the title? label the last line or last word */

var built = null;
function el(tag, cls, html) { var e = document.createElement(tag); if (cls) e.className = cls; if (html != null) e.innerHTML = html; return e; }
function txt(e) { return e ? e.textContent.replace(/\s+/g, ' ').trim() : ''; }
function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
function num(i) { return (i < 9 ? '0' : '') + (i + 1); }

function build() {
var s = document.querySelector(SECTION);
if (!s || built) return;
if (document.body.classList.contains('sqs-edit-mode-active')) return;
var list = s.querySelector('.user-items-list');
var lis = Array.prototype.slice.call(s.querySelectorAll('li.list-item'));
if (!list || !lis.length) return;
var data = lis.map(function (li) {
var d = li.querySelector('.list-item-content__description');
return { q: txt(li.querySelector('.list-item-content__title')), a: d ? d.innerHTML.trim() : '' };
}).filter(function (d) { return d.q; });
if (!data.length) return;

if (AUTO_LABEL) {
var tt = s.querySelector('.list-section-title');
if (tt && !tt.querySelector('strong, b')) {
var ps = tt.querySelectorAll('p'), last = ps.length ? ps[ps.length - 1] : tt;
var str = last.textContent.trim();
if (ps.length > 1) last.innerHTML = '<strong>' + esc(str) + '</strong>';
else { var sp = str.lastIndexOf(' '); if (sp > 0) last.innerHTML = esc(str.slice(0, sp + 1)) + '<strong>' + esc(str.slice(sp + 1)) + '</strong>'; }
}
}
var uid = 'ff' + Math.random().toString(36).slice(2, 7);
var wrap = el('div', 'ff');
var folders = data.map(function (d, i) {
var f = el('div', 'ff-f', '<div class="ff-bk"></div><div class="ff-fr"><button class="ff-row" type="button" aria-expanded="false" aria-controls="' + uid + '-a' + i + '"><b>' + num(i) + '</b><span>' + esc(d.q) + '</span><i class="ff-pm" aria-hidden="true"></i></button><div class="ff-ex" id="' + uid + '-a' + i + '" role="region"><div><div class="ff-a">' + d.a + '</div></div></div></div>');
var btn = f.querySelector('.ff-row');
btn.addEventListener('click', function () {
var open = !f.classList.contains('open');
if (ONE_AT_A_TIME) folders.forEach(function (g) { g.classList.remove('open'); g.querySelector('.ff-row').setAttribute('aria-expanded', 'false'); });
f.classList.toggle('open', open); btn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
wrap.appendChild(f); return f;
});
if (OPEN_FIRST && folders[0]) { folders[0].classList.add('open'); folders[0].querySelector('.ff-row').setAttribute('aria-expanded', 'true'); }
var ul = s.querySelector('.user-items-list-item-container');
if (ul && ul.parentNode) ul.parentNode.insertBefore(wrap, ul.nextSibling); else list.appendChild(wrap);
function align() { if (!ul) return; var cs = getComputedStyle(ul); ['paddingLeft', 'paddingRight', 'marginLeft', 'marginRight', 'maxWidth'].forEach(function (p) { wrap.style[p] = cs[p]; }); }
align(); window.addEventListener('resize', align);
s.classList.add('ff-ready');
built = { s: s, wrap: wrap };
}
function teardown() {
if (!built) return;
built.wrap.remove();
built.s.classList.remove('ff-ready');
built = null;
}

if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', build); else build();
window.addEventListener('load', build);
new MutationObserver(function () { if (document.body.classList.contains('sqs-edit-mode-active')) teardown(); else build(); }).observe(document.body, { attributes: true, attributeFilter: ['class'] });
window.addEventListener('mercury:load', function () { teardown(); build(); });
})();
</script>