/* Saddlewerkz Motion: pen and stamp. Handwriting is written in (a reveal that travels the way a pen does), ticks are stroked, the stamp lands with one overshoot, the tab slides out of the page edge. Nothing fades, floats or parallaxes. Everything is inert until motion.js adds .sw-js to , and inert under prefers-reduced-motion: the finished page is the default. Hooks are the CSS classes set on the Elementor elements: .sw-ink .sw-note .sw-sheet .sw-tick .sw-checklist .sw-stamp .sw-tab .sw-question .sw-stagger .sw-cover .sw-spine .sw-nav .sw-pages .sw-filter .sw-review .sw-count */ /* ---- material: the exercise-book card ribbing, the spine fold, the printed nav dots ---- */ .sw-cover { background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 6px, rgba(0,0,0,0.045) 6px 7px); } .sw-spine { background-image: linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.12)); } @media (min-width: 1025px) { .sw-nav .elementskit-navbar-nav > li + li::before { content: "\00B7"; position: absolute; left: -1.935vw; top: 50%; transform: translate(-50%, -50%); color: #3a3d44; font-size: max(13px, 1.116vw); } } /* ---- the phone nav: the page you are on is the filled-in tab ---- */ .sw-pages .elementor-widget.elementor-widget-button .elementor-button[aria-current="page"] { background-color: #e95927; } /* ---- the reviews filter: the pressed tab is filled in, hidden sheets leave the grid ---- */ .sw-filter .elementor-widget.elementor-widget-button .elementor-button[aria-pressed="true"] { background-color: #e95927; } .sw-review[hidden] { display: none; } /* the sheets are filed in three columns, each as tall as its text: Elementor's grid has no masonry, so this container is a multi-column block */ .sw-reviews.e-con { display: block; columns: 3; column-gap: 0; } .sw-reviews.e-con > .e-con { break-inside: avoid; } @media (max-width: 1024px) { .sw-reviews.e-con { columns: 2; } } @media (max-width: 767px) { .sw-reviews.e-con { columns: 1; } } /* ---- the stroked ticks: red on the sheet milestone, ballpoint blue in a ruled box on checklists ---- */ .sw-tick svg, .sw-checklist svg { fill: none !important; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .sw-tick .elementor-icon { color: #d8262c; } .sw-checklist .elementor-icon-list-icon { position: relative; box-sizing: border-box; width: clamp(10.8px, 1.71vw, 46.8px); height: clamp(10.8px, 1.71vw, 46.8px); border: 2px solid #0b0b0c; color: #2141b5; } .sw-checklist .elementor-icon-list-icon svg { position: absolute; left: -8%; top: -32%; width: 130% !important; height: 130% !important; } @media (max-width: 767px) { .sw-checklist .elementor-icon-list-icon { width: 22px; height: 22px; } } /* ---- the struck-through question: a pen line through printed text ---- */ .sw-question s { color: #3a3d44; text-decoration: line-through; text-decoration-color: #2141b5; text-decoration-thickness: 3px; } @media (prefers-reduced-motion: no-preference) { /* ---- pen: anything with .sw-ink is written in when it enters view ---- */ html.sw-js .sw-ink { --ink-t: 800ms; clip-path: inset(-0.2em 100% -0.3em -0.1em); transition: clip-path 0s; } html.sw-js .sw-ink.is-inked { clip-path: inset(-0.2em -0.1em -0.3em -0.1em); transition: clip-path var(--ink-t) cubic-bezier(0.2, 0, 0.2, 1) var(--ink-d, 0ms); } html.sw-js .sw-sheet .sw-ink { --ink-t: 700ms; } /* the cell delays are set by the script, row by row */ html.sw-js .sw-note { --ink-t: 1100ms; --ink-d: 5600ms; } html.sw-js .sw-question .sw-ink { --ink-t: 1200ms; --ink-d: 300ms; } @media (max-width: 767px) { html.sw-js .sw-sheet .sw-ink { --ink-t: 500ms; } } /* ---- the tick is stroked, not revealed ---- */ html.sw-js .sw-tick svg path, html.sw-js .sw-checklist svg path { stroke-dasharray: 80; stroke-dashoffset: 80; } html.sw-js .sw-tick.is-inked svg path, html.sw-js .sw-checklist .is-inked svg path { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms cubic-bezier(0.3, 0, 0.1, 1) var(--tick-d, 0ms); } html.sw-js .sw-sheet .sw-tick { --tick-d: 5300ms; } /* ---- the stamp lands: from above the page, one overshoot, settle ---- */ html.sw-js .sw-stamp img { opacity: 0; transform: rotate(-8deg) scale(1.35); } html.sw-js .sw-stamp.is-landed img { animation: sw-stamp-land 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 5900ms both; } @keyframes sw-stamp-land { 0% { opacity: 0; transform: rotate(-8deg) scale(1.35); } 55% { opacity: 1; transform: rotate(0deg) scale(0.96); } 100% { opacity: 1; transform: rotate(0deg) scale(1); } } /* ---- the tab slides out of the page edge on load (the side tab is rotated; its clip runs along its own box) ---- */ html.sw-js .sw-tab { clip-path: inset(0 0 100% 0); } html.sw-js .sw-tab.is-out { animation: sw-tab-out 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 600ms both; } html.sw-js .sw-tab--flat { clip-path: inset(0 100% 0 0); } html.sw-js .sw-tab--flat.is-out { animation-name: sw-tab-out-flat; } @keyframes sw-tab-out { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes sw-tab-out-flat { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* ---- the struck-through question ---- */ html.sw-js .sw-question s { text-decoration-color: transparent; transition: text-decoration-color 300ms linear 200ms; } html.sw-js .sw-question.is-inked s { text-decoration-color: #2141b5; } }