/* Queen Bubbles Bee — site styles Palette: honey gold, bubble blue, cream, charcoal. Fonts: Caprasimo (display, headings only) + Atkinson Hyperlegible Next (body). */ :root { --cream: #fff8ec; --cream-deep: #fbeed6; --paper: #fffdf8; --honey: #f5b83d; --honey-soft: #fbd98c; /* #8a5700 until 16 Sept. The 13px bold uppercase gold labels (.eyebrow, .product-cat, .lesson-kicker, .offer-kicker) are the tightest text pair on the site, and at #8a5700 on a cream sheet the .eyebrow on course.html at 390px measured 4.34:1 - under the 4.5:1 AA floor, on the stylesheet that was live at the time and with every piece of decoration switched off. 12% darker takes the pair to 6.63:1 and leaves roughly a point of headroom under a floating bubble instead of five hundredths, which is what the comb rung below needs in order not to be standing on a pair that has none. site/browser-tests/honeycomb-v3/contrast.py, 5,474 runs, 3 negative controls. */ --honey-deep: #7a4c00; --bubble: #bfe6f5; --bubble-soft: #e3f4fb; --bubble-mid: #6ec1e4; --bubble-deep: #1b5e85; --charcoal: #2b2724; --ink: #2b2724; --ink-soft: #5e5750; --line: rgba(43, 39, 36, 0.14); --line-strong: rgba(43, 39, 36, 0.28); --error: #a12c1b; --error-bg: #fbe7e2; --success: #1e6b3a; --success-bg: #e3f3e7; --focus: #1b5e85; /* ---- Golden honeycomb ground, v2 (see "Honeycomb ground" below) ---- The wall is now PALER than the cell, which is the single change that stopped this reading as an outline drawing of honeycomb and started it reading as honeycomb: on real comb the wax ridge is the lightest thing in the picture and the cup behind it is the deepest. Generated by site/browser-tests/honeycomb-v2/tilegen2.py - edit the geometry THERE and re-run apply.py, never by hand-editing the data URI. */ /* The drawn honeycomb that used to live here (a 40 KB inline SVG data URI) was deleted on 17 Sept: the background is the owner's photograph now, and a drawn comb nobody paints is 40 KB every visitor downloads for nothing. --comb-base is what is left of it: the wax colour, used as the flat page colour underneath the photograph so an overscrolled or still-loading page is never white. */ --comb-base: #e7c074; /* The cream sheet every block of real text sits on. 0.94 alpha: over the darkest pixel the v2 ground can produce anywhere - rgb(152, 99, 13), found by photographing the real body background with every sheet stripped off, at 1440 and at 390, over the whole scrollable page - it composites to rgb(249, 243, 230), which is 13.37:1 against --ink and 6.63:1 against --honey-deep (5.51:1 while --honey-deep was #8a5700). (On the ground that is live today those are 13.31:1 and 5.48:1, so v2's paler wax ridge made both very slightly better, not worse.) Do not lower this alpha without re-running site/browser-tests/honeycomb-v2/sheet.py and contrast.py. */ --sheet: rgba(255, 252, 244, 0.94); --sheet-edge: rgba(138, 87, 0, 0.32); --sheet-inset: clamp(0.6rem, 2.2vw, 1.5rem); --sheet-radius: calc(var(--radius) * 1.15); --sheet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 6px -2px rgba(74, 45, 2, 0.28), 0 22px 46px -24px rgba(74, 45, 2, 0.6); --font-display: "Caprasimo", "Cooper Black", "Bookman Old Style", Georgia, serif; --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 1.25rem; --radius-sm: 0.75rem; --shadow: 0 1px 0 rgba(43, 39, 36, 0.06), 0 10px 30px -12px rgba(43, 39, 36, 0.18); --gutter: clamp(1rem, 4vw, 2rem); --wrap: 62rem; color-scheme: light; /* ---------- THE LAYER SCALE (read this before you type a z-index) ---------- Seven rungs, and every z-index in this file is one of them. Nothing on the site is allowed a bare number, because the whole scheme turns on ONE rule: THE FLOATING BUBBLES SIT ABOVE THE WORDS AND BELOW ANYTHING YOU CLICK. 0 --z-ground the honeycomb, and the per-section .bubbles decorations 1 --z-sheet (reserved) the cream sheets and everything written on them 2 --z-sky the site-wide floating bubbles (see "Floating sky" below) 3 --z-control every interactive thing: buttons, links, fields, summaries 4 --z-sticky the shop toolbar, which must clear a scrolled bubble 5 --z-header the site header, which must clear everything below it 100 --z-skip the skip link TWO THINGS WILL BREAK IT, so they are spelled out: (a) A NEW STACKING CONTEXT AROUND TEXT TRAPS THE CONTROLS INSIDE IT. The cream sheets (.hero > .wrap and friends) used to be z-index: 1. A positioned box with a z-index is a stacking context, and nothing inside one can climb past its parent's rung - so every button on the site was pinned to rung 1, under the bubbles at rung 2, and no z-index on the button could have saved it. The sheets are z-index: auto now and still paint over the .bubbles at rung 0 because they come after them in the markup. If you give a sheet, a card or a band a z-index again, put it on --z-control or higher, or raise the whole card the way .product-card does below. (b) transform / filter / opacity / isolation do the same thing silently. .product-card grows a transform on :hover, which would have dropped its "Add to bag" under a bubble for exactly as long as the pointer was on it. It is raised to --z-control as a whole card for that reason. The belt to this pair of braces is pointer-events: none on the bubble layer, so a click passes through even if the layering is ever wrong. tests/bubble-click-test.js proves both halves; run it if you touch this. */ --z-ground: 0; --z-sheet: 1; --z-sky: 2; --z-control: 3; --z-sticky: 4; --z-header: 5; --z-skip: 100; /* ---------- Floating sky: the SIX bubble recipes ---------- One radial-gradient is one bubble: an off-centre highlight, a barely-there body and a thin rim, all in the brand blues. The peak alpha in each recipe is the number that decides whether text under a bubble stays readable, so each one is written down next to the stop it belongs to. NO recipe is allowed a stop above 0.155, which is the ceiling the 15 Sept measurement was taken at; two recipes were added for v2 and both sit under it. Measured worst case on the real pages is in the "Floating sky" block below. */ /* Bubble recipes, v4. Every one fades to zero at 86% of its box so the gradient can never paint the box's straight edges - that was the bug that put pale rectangles behind the hero text. Rim is the heaviest pixel in each. */ --bub-strong: radial-gradient(circle closest-side at 41% 36%, rgba(255, 255, 255, 0.300) 0 8%, rgba(255, 255, 255, 0.135) 17%, rgba(227, 244, 251, 0.100) 44%, rgba(110, 193, 228, 0.190) 62%, rgba(27, 94, 133, 0.340) 74%, rgba(110, 193, 228, 0.153) 80%, rgba(110, 193, 228, 0) 86%); --bub-mid: radial-gradient(circle closest-side at 41% 36%, rgba(255, 255, 255, 0.260) 0 8%, rgba(255, 255, 255, 0.117) 17%, rgba(227, 244, 251, 0.085) 44%, rgba(110, 193, 228, 0.162) 62%, rgba(27, 94, 133, 0.280) 74%, rgba(110, 193, 228, 0.126) 80%, rgba(110, 193, 228, 0) 86%); --bub-soft: radial-gradient(circle closest-side at 41% 36%, rgba(255, 255, 255, 0.190) 0 8%, rgba(255, 255, 255, 0.086) 17%, rgba(227, 244, 251, 0.070) 44%, rgba(110, 193, 228, 0.133) 62%, rgba(27, 94, 133, 0.200) 74%, rgba(110, 193, 228, 0.090) 80%, rgba(110, 193, 228, 0) 86%); --bub-faint: radial-gradient(circle closest-side at 41% 36%, rgba(255, 255, 255, 0.220) 0 8%, rgba(255, 255, 255, 0.099) 17%, rgba(255, 248, 236, 0.060) 44%, rgba(245, 184, 61, 0.114) 62%, rgba(138, 82, 0, 0.240) 74%, rgba(245, 184, 61, 0.108) 80%, rgba(245, 184, 61, 0) 86%); --bub-tiny: radial-gradient(circle closest-side at 41% 36%, rgba(255, 255, 255, 0.320) 0 8%, rgba(255, 255, 255, 0.144) 17%, rgba(227, 244, 251, 0.055) 44%, rgba(110, 193, 228, 0.104) 62%, rgba(27, 94, 133, 0.320) 74%, rgba(110, 193, 228, 0.144) 80%, rgba(110, 193, 228, 0) 86%); --bub-wide: radial-gradient(circle closest-side at 41% 36%, rgba(255, 255, 255, 0.150) 0 8%, rgba(255, 255, 255, 0.068) 17%, rgba(227, 244, 251, 0.055) 44%, rgba(110, 193, 228, 0.104) 62%, rgba(27, 94, 133, 0.160) 74%, rgba(110, 193, 228, 0.072) 80%, rgba(110, 193, 228, 0) 86%); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } html { background-color: var(--comb-base); } body { margin: 0; min-height: 100vh; color: var(--ink); /* A STACKING CONTEXT ON PURPOSE, AND IT IS LOAD-BEARING. body owns the comb - the honeycomb below is body's own background - and a negative z-index is painted immediately after its stacking context's background and before every in-flow block inside it. Making body a stacking context is therefore what creates the rung that means "on the comb, under the paper", which is where the honey and the bees live. Take these two lines away and every bee is behind the comb and invisible. See "The comb rung" further down. Nothing else moves: body already spans the whole page, so every absolutely positioned box on the site resolves to the same rectangle it did before, and 185 viewport captures of all fourteen pages are pixel-identical. */ position: relative; z-index: 0; /* The ground is .qbb-scene now - a fixed layer, painted immediately after this background and before every sheet - so body itself only needs the wax colour behind it. The three gradient washes and the drawn hexagon tile that used to be here were deleted with the drawing they belonged to. */ background-color: var(--comb-base); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; overflow-wrap: break-word; } img, svg { max-width: 100%; height: auto; } [hidden] { display: none !important; } h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.6em; color: var(--charcoal); } h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; } h1, h2, h3 { text-wrap: balance; } p, li { text-wrap: pretty; } h1 { font-size: clamp(2.2rem, 1.2rem + 4.2vw, 3.9rem); line-height: 1.04; } h2 { font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.6rem); } h3 { font-size: 1.22rem; font-weight: 700; } h4 { font-size: 1.05rem; font-weight: 700; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-left: 1.3em; } li + li { margin-top: 0.3em; } a { color: var(--bubble-deep); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } a:hover { color: var(--charcoal); text-decoration-color: var(--honey); text-decoration-thickness: 0.14em; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: var(--z-skip); background: var(--charcoal); color: var(--cream); padding: 0.6rem 1rem; border-radius: 0.5rem; font-weight: 700; text-decoration: none; } .skip-link:focus { top: 1rem; color: var(--cream); } /* THE SKIP LINK IS THE ONE FOCUS RING THAT LANDS ON BARE HONEYCOMB. Every other focusable thing on the site sits inside a cream sheet, so its 3px --focus ring is measured at 6.48-6.64:1. The skip link is positioned at left:1rem; top:1rem, OUTSIDE the header pill (which starts at x=144 at 1440px), so on the golden ground the same ring measured 2.11:1 at its worst point and 1.14:1 against the darkest mortar pixel - under the 3:1 that WCAG 2.4.11 and 1.4.11 ask for, and it is the first control a keyboard user reaches on every page. On the old flat --cream ground it was 6.66:1. The fix is a DOUBLE RING, so the indicator never has to contrast with the backdrop at all: one box-shadow paints cream from the pill's edge out to 9px, and the outline paints over it at 3-6px. A keyboard user sees charcoal pill -> cream 3px -> blue ring 3px -> cream 3px -> honeycomb, so both edges of the blue ring meet --cream (6.66:1) whatever the ground underneath is doing. */ .skip-link:focus-visible, .skip-link:focus { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 9px var(--cream); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 48rem; } /* The section padding is now the honeycomb GAP between two cream sheets; the sheet (.section > .wrap) carries the breathing room that used to live here. */ .section { padding-block: clamp(1rem, 2.4vw, 1.9rem); position: relative; } .section-tight { padding-block: clamp(0.7rem, 1.6vw, 1.2rem); } /* Back-to-back sections on the same cream ground share one gap instead of stacking two. */ .section + .section-tight, .section-tight + .section-tight { padding-top: 0; } .section-tight + .section { padding-top: clamp(1rem, 3vw, 2rem); } .section-head { max-width: 42rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .section-head.center { margin-inline: auto; text-align: center; } .lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); color: var(--ink-soft); } .muted { color: var(--ink-soft); } .small { font-size: 0.92rem; } .center { text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--honey-deep); margin: 0 0 0.9rem; } .eyebrow::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--bubble-mid) 70%); border: 1px solid rgba(27, 94, 133, 0.35); } /* ---------- Brand mark (the Royal Seal logo, an in every page) ---------- */ .brand-mark { display: inline-block; width: 3rem; height: 3rem; flex: none; object-fit: contain; } /* ---------- The giving banner ---------- Owner, 17 Sept, his words exactly: "Queen Bubbles Bee is donating 1% of all profits from merchandise and course sales to non-profit organizations involved with saving the bees!" It runs across the very top of all fourteen pages, above the header, and it is always there - not dismissible, because a promise you can close is a promise people miss. It is a real band of colour rather than a transparent strip, so the photographed comb behind it never runs under the sentence: the contrast here is measured against the band, not against a bee. */ .give-banner { position: relative; z-index: var(--z-header); background: linear-gradient(to right, #f2a71b, #ffd36b 42%, #f7b731 74%, #e8960f); border-bottom: 1px solid rgba(96, 57, 6, 0.32); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; } .give-banner p { /* margin-inline stays auto (from .wrap) so the sentence sits centred over the column of tiles; a plain "margin: 0" here pinned the .wrap box to the left edge on wide screens (owner, 6 Oct 2026). */ margin-block: 0; margin-inline: auto; padding-block: 0.5rem; color: #3d2404; font-weight: 700; font-size: clamp(0.8rem, 1.55vw, 0.95rem); line-height: 1.35; text-align: center; text-wrap: balance; } @media print { .give-banner { display: none; } } /* ---------- Header ---------- */ .site-header { background: transparent; position: relative; z-index: var(--z-header); padding-block: clamp(0.5rem, 1.4vw, 0.9rem); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 0.8rem; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--charcoal); } .brand:hover { color: var(--charcoal); } .brand-name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } .site-nav li + li { margin: 0; } .site-nav a { display: inline-block; padding: 0.45rem 0.8rem; border-radius: 999px; color: var(--charcoal); text-decoration: none; font-weight: 600; font-size: 0.98rem; } .site-nav a:hover { background: var(--cream-deep); } .site-nav a[aria-current="page"] { background: var(--bubble); } .site-nav { margin-left: auto; } .nav-cta { display: inline-block; padding: 0.45rem 0.95rem; border-radius: 999px; white-space: nowrap; background: var(--charcoal); color: var(--cream); text-decoration: none; font-weight: 700; font-size: 0.98rem; } .nav-cta:hover { background: #45403b; color: var(--cream); } .nav-cta[aria-current="page"] { background: var(--bubble-deep); color: #fff; } .header-inner { gap: 0.75rem 0.75rem; width: calc(100% - 2 * var(--sheet-inset)); margin-inline: auto; background-color: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: var(--sheet-radius); box-shadow: var(--sheet-shadow); background-clip: padding-box; padding-block: 0.6rem; } @media (max-width: 55.99rem) { .header-inner { padding-block: 0.7rem 0.45rem; gap: 0.35rem 0.75rem; } .nav-cta { margin-left: auto; padding: 0.4rem 0.85rem; font-size: 0.93rem; } .site-nav { order: 3; width: 100%; margin-left: -0.55rem; } .site-nav ul { gap: 0; } .site-nav a { padding: 0.4rem 0.55rem; font-size: 0.93rem; } .brand-name { font-size: 1.15rem; } .brand-mark { width: 2.6rem; height: 2.6rem; } } @media (max-width: 24rem) { .brand-name { font-size: 1rem; } .brand { gap: 0.4rem; } } [tabindex="-1"]:focus { outline: none; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--paper); --btn-fg: var(--charcoal); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.9rem; padding: 0.65rem 1.35rem; font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; color: var(--btn-fg); background: var(--btn-bg); border: 2px solid var(--charcoal); border-radius: 999px; box-shadow: 0 3px 0 var(--charcoal); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease; } .btn:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: 0 4px 0 var(--charcoal); } .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--charcoal); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: 0 3px 0 var(--charcoal); } .btn-primary { --btn-bg: var(--honey); } .btn-primary:hover { --btn-bg: #f7c55e; } .btn-blue { --btn-bg: var(--bubble); } .btn-blue:hover { --btn-bg: #d2eef9; } .btn-dark { --btn-bg: var(--charcoal); --btn-fg: var(--cream); } .btn-dark:hover { --btn-bg: #45403b; } .btn-lg { min-height: 3.4rem; padding: 0.8rem 1.8rem; font-size: 1.1rem; } .btn-sm { min-height: 2.3rem; padding: 0.35rem 0.95rem; font-size: 0.93rem; box-shadow: 0 2px 0 var(--charcoal); } .btn-block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; } .btn-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--bubble-deep); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; } .btn-link:hover { color: var(--charcoal); text-decoration-color: var(--honey); } /* ---------- Decorative bubbles ---------- 19 SEPTEMBER 2026: the per-section `.bubbles` containers are GONE from every page - the six `.bubble b1..b6` that sat in the corners of a section and drifted. Owner: "have the bubbles ONLY originate from Queen Bubbles Bee's wand outward". A bubble in the corner of a section has no source, which is the thing he ruled out, so the markup was deleted rather than hidden. THE RULES BELOW ARE KEPT ON PURPOSE, because `.bubble` is still used by the two `.orbit` bubbles on the home page's hero logo - they are part of the Royal Seal lockup rather than background decoration, so they were left alone pending his word. If he wants those gone too, delete the two spans in index.html and this whole block goes with them. */ .bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95) 0 7%, rgba(255, 255, 255, 0) 16%), radial-gradient(circle at 50% 50%, rgba(227, 244, 251, 0.15) 0 45%, rgba(110, 193, 228, 0.38) 100%); border: 1.5px solid rgba(27, 94, 133, 0.22); box-shadow: inset -6px -10px 18px rgba(245, 184, 61, 0.14), inset 5px 6px 12px rgba(255, 255, 255, 0.5); animation: bubble-float 11s ease-in-out infinite; } .bubble.b1 { width: 7rem; height: 7rem; top: 12%; left: -2rem; } .bubble.b2 { width: 3.2rem; height: 3.2rem; top: 70%; left: -1rem; animation-delay: -3s; animation-duration: 9s; } .bubble.b3 { width: 1.6rem; height: 1.6rem; top: 5%; left: 52%; animation-delay: -6s; } .bubble.b4 { width: 4.5rem; height: 4.5rem; bottom: 8%; right: 4%; animation-delay: -2s; animation-duration: 13s; } .bubble.b5 { width: 2.2rem; height: 2.2rem; top: 8%; right: 18%; animation-delay: -5s; animation-duration: 10s; } .bubble.b6 { width: 1.1rem; height: 1.1rem; bottom: 5%; left: 47%; animation-delay: -7s; } @media (max-width: 40rem) { /* On phones the text runs edge to edge, so only the small top-right bubble stays. */ .bubbles .bubble.b1, .bubbles .bubble.b2, .bubbles .bubble.b3, .bubbles .bubble.b4, .bubbles .bubble.b6 { display: none; } .bubbles .bubble.b5 { top: 0.75rem; right: 0.75rem; width: 1.6rem; height: 1.6rem; } } .page-head .bubble.b3, .page-head .bubble.b6 { display: none; } @keyframes bubble-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0.4rem, -1rem, 0); } } /* z-index: auto, NOT 1, on purpose - see "THE LAYER SCALE" at the top. These still paint over the .bubbles at --z-ground because they follow them in the markup, and staying off the scale is what lets a button inside climb to --z-control and out from under a floating bubble. */ .section > .wrap, .hero > .wrap { position: relative; z-index: auto; } /* ---------- The other half of the click rule ---------- Everything a person clicks that has a SURFACE OF ITS OWN - a button, a field, a chip, a day pill, a , a table-of-contents row, a product card - is lifted onto --z-control, one rung ABOVE the floating bubbles, so a bubble is never painted over a control in the first place. (pointer-events: none already guarantees the click lands; this is what makes it LOOK right.) A LINK INSIDE A SENTENCE IS DELIBERATELY NOT ON THIS LIST. It has no background, so lifting it a rung changes nothing on screen - the bubble is behind its letters either way, exactly as it is behind the words around it, which is the half the owner said yes to - while position: relative on every inline link in a long legal page costs a re-raster on that page. .skip-link is not here because it lives higher still, on --z-skip. .product-card is here as a WHOLE CARD, not for its own sake but because it grows a transform on :hover - which makes it a stacking context, which would drop its "Add to bag" button back under the sky for exactly as long as the pointer was on it. Any future card that animates a transform needs the same line, or its controls go under the bubbles while you are pointing at them. Two controls that only LOOKED like they had a surface, .faq-item summary and .toc button, are given the --paper their parent card already shows behind them; those two declarations live with their own definitions further down this file (a rule up here would lose to their own later background). Both are invisible changes: 175 viewport screenshots across all 15 pages at 1440px and 390px are pixel-identical before and after. If you add another full-width transparent control, run the paint test again. */ .btn, .btn-link, .nav-cta, .brand, .filter-chip, .swatch, .product-card, .pill span, .toc button, .toc-toggle, button, summary, input, select, textarea, [role="button"], [role="link"], [role="tab"] { position: relative; z-index: var(--z-control); } /* ================= THE BACKGROUND SCENE ================================= Owner, 17 Sept: "use the actual beehive honeycomb pic i put in earlier for the other half of the background, with the real bees walking... Queen Bubbles Bee on the right side... bubbles actually starting at the front of her wand and moving outward". And: "i want that half of the background to look super realistic, while the side with Queen Bubbles Bee stays fantasy with no bees, only bubbles coming from her wand when she blows through it." WHAT REPLACED WHAT. The drawn honeycomb (gradients), the drawn honey drips and the twelve gradient bees are GONE. The comb is now the owner's own photograph. That is what answers "depth in the holes", "a lighter ridge around the outside of each piece" and "a slight dip in the centre of each hole" in one move: the photo already has real depth, real ridges and real honey sitting in the bottom of the cells, because it is a real comb. HOW THE TILE WAS MADE, so nobody has to guess later. bg-comb.webp is cut from the owner's photo (1019x349). The hex lattice repeats every 271px across and every 229px down - measured by 2D normalised cross-correlation over the whole image, not by eye - so the tile is exactly 542 x 229, which is two lattice periods across and one down. Before cutting, the photo's lighting gradient was divided out (image / 70px gaussian blur, mean restored) so the left edge and the right edge are the same brightness; without that step the seam shows as a bright stripe. The last 16px of each wrapping edge is cross-faded into the pixels one period away, which kills the residual mismatch. A 3x3 tiling was rendered and looked at: no seam, no mirror axis, no butterfly. An earlier mirror-tiled attempt WAS rejected for exactly that kaleidoscope artefact. THE TWO HALVES. .qbb-comb is the photograph, tiled edge to edge underneath everything. .qbb-queen is the owner's Queen Bubbles Bee artwork, anchored to the right, masked to fade out towards the left so her forest melts into the comb instead of ending on a hard line. Bees are confined to the left of that fade - her half stays fantasy, with nothing on it but her own bubbles. READABILITY. No long text ever sits on this. Every paragraph on the site is on a cream sheet (see "The cream sheet" below) and the scene shows in the gutters and between sheets. .qbb-veil is a cream wash over the photo that keeps the gutters calm and stops the comb competing with the sheets. LAYERS. .qbb-scene is z-index -1: a negative child paints ABOVE its parent's own background and BELOW every in-flow sheet, so it is behind all reading. .qbb-sky is --z-sky (2): the bubbles float OVER the words, which the owner asked for on 15 Sept, and still UNDER --z-control (3), so a bubble is never drawn on a button. pointer-events: none on both, so nothing is ever clicked. */ .qbb-scene, .qbb-sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; contain: layout paint style; } .qbb-scene { z-index: -1; } .qbb-sky { z-index: var(--z-sky); } /* ---- the photographed comb ---- */ .qbb-comb { position: absolute; inset: -4px; /* hide the sub-pixel edge of the tiling */ background-image: url("/bg-comb.webp"); background-repeat: repeat; background-size: 226px auto; /* one cell lands at about 57px */ background-position: 0 0; } /* ---- the cream wash ---- A LIGHT one. The first attempt washed the photograph out to a pale ghost and lost exactly the depth the owner asked for, so this is a thin warm glaze and a soft vignette, nothing more: enough to tie the gutters to the cream sheets, not enough to flatten the cells. Contrast is not this layer's job - every paragraph on the site is on an opaque sheet - so it does not need to be heavy. */ .qbb-veil { position: absolute; inset: 0; background: radial-gradient(135% 100% at 50% 38%, rgba(255, 250, 238, 0.04) 0%, rgba(255, 246, 228, 0.16) 66%, rgba(250, 234, 205, 0.30) 100%), linear-gradient(to bottom, rgba(255, 252, 244, 0.10), rgba(255, 246, 228, 0.16)); } /* ---- her half: the forest, then the Queen herself ------------------- Owner, 17 Sept: "the side with Queen Bubbles Bee stays fantasy with no bees, only bubbles coming from her wand when she blows through it." TWO PIECES, NOT ONE, and the reason matters. Her artwork is a 1376x768 landscape plate. Dropped in whole as a right-hand panel it is unusable: at a height that fills the window it is 1.8 windows WIDE, so either her face or her wand can be on screen but never both, and the content sheets cover the middle of the page where the rest of her would be. So the plate was cut in two. .qbb-forest is the part of her own picture she is NOT standing in - the left 28.5% - mirrored to double width, softened, and run up her whole half. Same palette, same light, same bubbles, no second Queen. .qbb-queen is her figure alone, cut from the plate and feathered out with an elliptical alpha ramp so there is no rectangle edge - she stands IN the forest instead of being pasted on top of it. WHERE SHE STANDS, and why the numbers are written as arithmetic instead of guesses. Her figure asset is 760x764 and her wand's bee ornament sits at (0.245, 0.30) of it. Everything below is derived from those two numbers, so moving her is one edit to --queen-h or --queen-off and the wand follows: her width = --queen-h x 0.7966 (the asset's aspect) her left edge = right edge of window + --queen-off - her width the wand = 0.245 of her width in from her left edge which gives the right-offset in the .qbb-wand rule. The wand lands just inside the right gutter, which is what makes the bubbles look blown rather than spawned in mid-air. */ :root { --queen-h: 97.4vh; --queen-w: calc(var(--queen-h) * 0.7966); --queen-off: 34vh; /* Every bubble's own --op is multiplied by this when it is painted. 1.45 on a desktop, more on a phone (see the phone block), 1 would be the old look. */ --op-boost: 1.45; } .qbb-forest { position: absolute; top: 0; right: 0; bottom: 0; width: min(52vw, 900px); background-image: url("/bg-forest.webp"); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0.88; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 16%, rgba(0,0,0,0.85) 40%, #000 62%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 16%, rgba(0,0,0,0.85) 40%, #000 62%); } .qbb-queen { position: absolute; bottom: 0; right: calc(-1 * var(--queen-off)); height: var(--queen-h); width: var(--queen-w); background-image: url("/bg-queen.webp"); background-repeat: no-repeat; background-size: contain; background-position: center bottom; } /* ---- the bees: real gait, local territory, comb side only ---- HOW A HONEY BEE ACTUALLY WALKS, which is what the owner asked for on 16 Sept ("the bees are moving like spiders, do a quick research of how bees actually move") and again on 17 Sept ("have the bees moving by moving their legs and wiggling around just a little bit"). 1. ALTERNATING TRIPOD. An insect does not move its legs one at a time. Front and hind leg on one side swing together WITH the middle leg of the other side; the other three hold the comb. Then they swap. So the six legs here are two groups of three - .qbb-legs-a is left-front, right-middle, left-hind; .qbb-legs-b is the other three - and the two groups run the SAME step animation exactly half a cycle apart. Three feet are always down. 2. SHORT BURSTS, THEN A STOP. A bee on comb walks a body length or two, stops, turns her head, grooms, walks again. Every walk track below is built from moves separated by HOLD frames - two identical keyframes in a row, which is how you write a pause in CSS - so each bee genuinely stands still for a few seconds at a time instead of sliding forever. 3. SHE TURNS TO FACE WHERE SHE IS GOING. The heading in each keyframe is the actual bearing of that leg of the journey, computed from the waypoints, not guessed - a bee does not travel sideways. 4. SHE STAYS HOME. Owner, 16 Sept: "Each bee can stay in its own general area and not try to make large movements to other areas of the screen". Every track is a wander of a few vw around that bee's own spot. Nobody crosses the screen, and nobody crosses onto the Queen's half. THREE SEPARATE TRANSFORMS, WHICH IS WHY NOTHING FIGHTS. The svg host uses the independent `translate` and `rotate` properties for the walk and the heading; the inner .qbb-body uses `transform` for the wiggle; each leg group uses its own `transform` for the step. They compose instead of overwriting, so no element is ever asked to hold two transforms at once. */ .qbb-bees { position: absolute; inset: 0; } .qbb-bee { position: absolute; display: block; height: auto; will-change: translate; animation-timing-function: ease-in-out; animation-iteration-count: infinite; /* The shadow is what puts her ON the comb instead of over it. Without it a bee reads as a sticker on a photograph; with it she has a body and the light in the photo (from the upper left) agrees with the light on her. */ filter: drop-shadow(2px 3px 2.5px rgba(74, 42, 4, 0.5)); } /* No two of them are quite the same colour, which is true of real bees and is also what stops fourteen identical sprites reading as wallpaper. */ .qbb-bee--2, .qbb-bee--9 { filter: drop-shadow(2px 3px 2.5px rgba(74,42,4,0.5)) saturate(0.86) brightness(0.94); } .qbb-bee--4, .qbb-bee--11 { filter: drop-shadow(2px 3px 2.5px rgba(74,42,4,0.5)) saturate(1.12) brightness(1.04); } .qbb-bee--6, .qbb-bee--13 { filter: drop-shadow(2px 3px 2.5px rgba(74,42,4,0.5)) hue-rotate(-6deg) brightness(0.97); } .qbb-bee--8, .qbb-bee--14 { filter: drop-shadow(2px 3px 2.5px rgba(74,42,4,0.5)) hue-rotate(5deg) saturate(0.94); } .qbb-bee-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* the art */ .qbb-abd { fill: url(#qbbAbd); } .qbb-band { fill: #4a2f0b; opacity: 0.82; } .qbb-tip { fill: #3c2508; } .qbb-tho { fill: url(#qbbTho); } .qbb-fuzz { fill: none; stroke: #c9973f; stroke-width: 2.1; stroke-linecap: round; opacity: 0.55; } .qbb-head { fill: #3a2609; } .qbb-eye { fill: #171003; } .qbb-shine { fill: #ffffff; opacity: 0.35; } .qbb-ant { fill: none; stroke: #2e1d06; stroke-width: 2.4; stroke-linecap: round; } .qbb-leg { fill: none; stroke: #2b1b06; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .qbb-wing { fill: url(#qbbWing); stroke: rgba(120, 150, 170, 0.30); stroke-width: 0.8; opacity: 0.52; } /* the step: two tripods, half a cycle apart, pivoting on the thorax */ .qbb-legs { transform-box: view-box; transform-origin: 72px 45px; animation: qbb-step var(--gait, 1.5s) ease-in-out infinite; } .qbb-legs-b { animation-delay: calc(var(--gait, 1.5s) / -2); } @keyframes qbb-step { 0%, 100% { transform: rotate(-4.2deg) translate(-1.3px, 0); } 50% { transform: rotate(4.2deg) translate(1.3px, 0); } } /* the wiggle: she is never perfectly still, even while stopped */ .qbb-body { transform-box: view-box; transform-origin: 70px 45px; animation: qbb-wiggle calc(var(--gait, 1.5s) * 4.3) ease-in-out infinite; } @keyframes qbb-wiggle { 0%, 100% { transform: rotate(-2.1deg); } 23% { transform: rotate(1.3deg); } 49% { transform: rotate(-0.7deg); } 74% { transform: rotate(2.3deg); } } /* the wings settle and lift a hair, the way a resting bee's do */ .qbb-wings { transform-box: view-box; transform-origin: 74px 45px; animation: qbb-wingset calc(var(--gait, 1.5s) * 6.7) ease-in-out infinite; } @keyframes qbb-wingset { 0%, 100% { transform: scaleY(1); } 46% { transform: scaleY(0.93); } } /* the antennae never stop testing the air */ .qbb-ant { transform-box: view-box; transform-origin: 117px 45px; animation: qbb-antenna calc(var(--gait, 1.5s) * 1.9) ease-in-out infinite; } @keyframes qbb-antenna { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } @keyframes qbb-walk-1 { 0% { translate: 0.00vw 0.00vh; rotate: -103.0deg; } 4.25% { translate: 0.00vw 0.00vh; rotate: -134.0deg; } 7.09% { translate: 0.00vw 0.00vh; rotate: -134.0deg; } 14.29% { translate: -1.91vw -1.98vh; rotate: -134.0deg; } 18.6% { translate: -1.91vw -1.98vh; rotate: -9.3deg; } 21.48% { translate: -1.91vw -1.98vh; rotate: -9.3deg; } 28.57% { translate: 1.12vw -2.48vh; rotate: -9.3deg; } 32.79% { translate: 1.12vw -2.48vh; rotate: 93.2deg; } 35.6% { translate: 1.12vw -2.48vh; rotate: 93.2deg; } 42.86% { translate: 1.01vw -0.53vh; rotate: 93.2deg; } 45.97% { translate: 1.01vw -0.53vh; rotate: 55.3deg; } 48.05% { translate: 1.01vw -0.53vh; rotate: 55.3deg; } 57.14% { translate: 2.24vw 1.25vh; rotate: 55.3deg; } 61.22% { translate: 2.24vw 1.25vh; rotate: 115.0deg; } 63.94% { translate: 2.24vw 1.25vh; rotate: 115.0deg; } 71.43% { translate: 0.81vw 4.32vh; rotate: 115.0deg; } 74.57% { translate: 0.81vw 4.32vh; rotate: -26.9deg; } 76.67% { translate: 0.81vw 4.32vh; rotate: -26.9deg; } 85.71% { translate: 2.31vw 3.56vh; rotate: -26.9deg; } 89.94% { translate: 2.31vw 3.56vh; rotate: -123.0deg; } 92.75% { translate: 2.31vw 3.56vh; rotate: -123.0deg; } 100% { translate: 0.00vw 0.00vh; rotate: -123.0deg; } } .qbb-bee--1 { left: 4vw; top: 11vh; width: 112px; --gait: 1.42s; animation-name: qbb-walk-1; animation-duration: 188s; animation-delay: -132s; } @keyframes qbb-walk-2 { 0% { translate: 0.00vw 0.00vh; rotate: -11.9deg; } 3.36% { translate: 0.00vw 0.00vh; rotate: 48.4deg; } 5.6% { translate: 0.00vw 0.00vh; rotate: 48.4deg; } 14.29% { translate: 2.05vw 2.31vh; rotate: 48.4deg; } 17.9% { translate: 2.05vw 2.31vh; rotate: -50.5deg; } 20.3% { translate: 2.05vw 2.31vh; rotate: -50.5deg; } 28.57% { translate: 3.59vw 0.44vh; rotate: -50.5deg; } 31.99% { translate: 3.59vw 0.44vh; rotate: 1.2deg; } 34.27% { translate: 3.59vw 0.44vh; rotate: 1.2deg; } 42.86% { translate: 5.00vw 0.47vh; rotate: 1.2deg; } 46.37% { translate: 5.00vw 0.47vh; rotate: -131.5deg; } 48.72% { translate: 5.00vw 0.47vh; rotate: -131.5deg; } 57.14% { translate: 3.90vw -0.78vh; rotate: -131.5deg; } 60.65% { translate: 3.90vw -0.78vh; rotate: -73.3deg; } 62.99% { translate: 3.90vw -0.78vh; rotate: -73.3deg; } 71.43% { translate: 4.71vw -3.47vh; rotate: -73.3deg; } 74.66% { translate: 4.71vw -3.47vh; rotate: 91.3deg; } 76.82% { translate: 4.71vw -3.47vh; rotate: 91.3deg; } 85.71% { translate: 4.67vw -1.61vh; rotate: 91.3deg; } 89.48% { translate: 4.67vw -1.61vh; rotate: 161.0deg; } 91.98% { translate: 4.67vw -1.61vh; rotate: 161.0deg; } 100% { translate: 0.00vw 0.00vh; rotate: 161.0deg; } } .qbb-bee--2 { left: 9vw; top: 26vh; width: 104px; --gait: 1.58s; animation-name: qbb-walk-2; animation-duration: 214s; animation-delay: -29s; } @keyframes qbb-walk-3 { 0% { translate: 0.00vw 0.00vh; rotate: 133.8deg; } 4.24% { translate: 0.00vw 0.00vh; rotate: -16.6deg; } 7.07% { translate: 0.00vw 0.00vh; rotate: -16.6deg; } 14.29% { translate: 1.22vw -0.36vh; rotate: -16.6deg; } 17.43% { translate: 1.22vw -0.36vh; rotate: 97.0deg; } 19.53% { translate: 1.22vw -0.36vh; rotate: 97.0deg; } 28.57% { translate: 0.89vw 2.34vh; rotate: 97.0deg; } 31.83% { translate: 0.89vw 2.34vh; rotate: 156.1deg; } 34% { translate: 0.89vw 2.34vh; rotate: 156.1deg; } 42.86% { translate: -2.18vw 3.70vh; rotate: 156.1deg; } 46.91% { translate: -2.18vw 3.70vh; rotate: 250.7deg; } 49.62% { translate: -2.18vw 3.70vh; rotate: 250.7deg; } 57.14% { translate: -2.84vw 1.80vh; rotate: 250.7deg; } 60.32% { translate: -2.84vw 1.80vh; rotate: 106.1deg; } 62.44% { translate: -2.84vw 1.80vh; rotate: 106.1deg; } 71.43% { translate: -3.30vw 3.36vh; rotate: 106.1deg; } 74.81% { translate: -3.30vw 3.36vh; rotate: 32.0deg; } 77.06% { translate: -3.30vw 3.36vh; rotate: 32.0deg; } 85.71% { translate: -1.54vw 4.46vh; rotate: 32.0deg; } 89.96% { translate: -1.54vw 4.46vh; rotate: -71.0deg; } 92.8% { translate: -1.54vw 4.46vh; rotate: -71.0deg; } 100% { translate: 0.00vw 0.00vh; rotate: -71.0deg; } } .qbb-bee--3 { left: 3vw; top: 42vh; width: 120px; --gait: 1.33s; animation-name: qbb-walk-3; animation-duration: 176s; animation-delay: -96s; } @keyframes qbb-walk-4 { 0% { translate: 0.00vw 0.00vh; rotate: -128.0deg; } 4.25% { translate: 0.00vw 0.00vh; rotate: -159.2deg; } 7.08% { translate: 0.00vw 0.00vh; rotate: -159.2deg; } 14.29% { translate: -2.67vw -1.02vh; rotate: -159.2deg; } 18.31% { translate: -2.67vw -1.02vh; rotate: -172.6deg; } 21% { translate: -2.67vw -1.02vh; rotate: -172.6deg; } 28.57% { translate: -5.00vw -1.32vh; rotate: -172.6deg; } 32.05% { translate: -5.00vw -1.32vh; rotate: -338.8deg; } 34.37% { translate: -5.00vw -1.32vh; rotate: -338.8deg; } 42.86% { translate: -1.98vw -0.15vh; rotate: -338.8deg; } 47.11% { translate: -1.98vw -0.15vh; rotate: -447.8deg; } 49.95% { translate: -1.98vw -0.15vh; rotate: -447.8deg; } 57.14% { translate: -1.89vw -2.59vh; rotate: -447.8deg; } 60.72% { translate: -1.89vw -2.59vh; rotate: -583.6deg; } 63.11% { translate: -1.89vw -2.59vh; rotate: -583.6deg; } 71.43% { translate: -4.10vw -0.50vh; rotate: -583.6deg; } 74.55% { translate: -4.10vw -0.50vh; rotate: -579.0deg; } 76.63% { translate: -4.10vw -0.50vh; rotate: -579.0deg; } 85.71% { translate: -5.00vw 0.24vh; rotate: -579.0deg; } 89.22% { translate: -5.00vw 0.24vh; rotate: -722.7deg; } 91.56% { translate: -5.00vw 0.24vh; rotate: -722.7deg; } 100% { translate: 0.00vw 0.00vh; rotate: -722.7deg; } } .qbb-bee--4 { left: 12vw; top: 57vh; width: 98px; --gait: 1.66s; animation-name: qbb-walk-4; animation-duration: 232s; animation-delay: -124s; } @keyframes qbb-walk-5 { 0% { translate: 0.00vw 0.00vh; rotate: -116.0deg; } 3.45% { translate: 0.00vw 0.00vh; rotate: -74.0deg; } 5.75% { translate: 0.00vw 0.00vh; rotate: -74.0deg; } 14.29% { translate: 0.56vw -1.95vh; rotate: -74.0deg; } 18.38% { translate: 0.56vw -1.95vh; rotate: 90.1deg; } 21.12% { translate: 0.56vw -1.95vh; rotate: 90.1deg; } 28.57% { translate: 0.56vw -0.37vh; rotate: 90.1deg; } 32.09% { translate: 0.56vw -0.37vh; rotate: -5.2deg; } 34.43% { translate: 0.56vw -0.37vh; rotate: -5.2deg; } 42.86% { translate: 2.65vw -0.56vh; rotate: -5.2deg; } 46.68% { translate: 2.65vw -0.56vh; rotate: -101.5deg; } 49.23% { translate: 2.65vw -0.56vh; rotate: -101.5deg; } 57.14% { translate: 1.94vw -4.03vh; rotate: -101.5deg; } 60.83% { translate: 1.94vw -4.03vh; rotate: -148.9deg; } 63.29% { translate: 1.94vw -4.03vh; rotate: -148.9deg; } 71.43% { translate: -0.71vw -5.63vh; rotate: -148.9deg; } 74.71% { translate: -0.71vw -5.63vh; rotate: -174.7deg; } 76.9% { translate: -0.71vw -5.63vh; rotate: -174.7deg; } 85.71% { translate: -2.58vw -5.80vh; rotate: -174.7deg; } 89.9% { translate: -2.58vw -5.80vh; rotate: -294.0deg; } 92.7% { translate: -2.58vw -5.80vh; rotate: -294.0deg; } 100% { translate: 0.00vw 0.00vh; rotate: -294.0deg; } } .qbb-bee--5 { left: 5vw; top: 72vh; width: 116px; --gait: 1.49s; animation-name: qbb-walk-5; animation-duration: 198s; animation-delay: -126s; } @keyframes qbb-walk-6 { 0% { translate: 0.00vw 0.00vh; rotate: 24.5deg; } 4.03% { translate: 0.00vw 0.00vh; rotate: -147.3deg; } 6.72% { translate: 0.00vw 0.00vh; rotate: -147.3deg; } 14.29% { translate: -1.48vw -0.95vh; rotate: -147.3deg; } 17.68% { translate: -1.48vw -0.95vh; rotate: -140.9deg; } 19.95% { translate: -1.48vw -0.95vh; rotate: -140.9deg; } 28.57% { translate: -3.84vw -2.87vh; rotate: -140.9deg; } 33% { translate: -3.84vw -2.87vh; rotate: 27.8deg; } 35.95% { translate: -3.84vw -2.87vh; rotate: 27.8deg; } 42.86% { translate: -2.62vw -2.22vh; rotate: 27.8deg; } 46.51% { translate: -2.62vw -2.22vh; rotate: 147.6deg; } 48.95% { translate: -2.62vw -2.22vh; rotate: 147.6deg; } 57.14% { translate: -4.09vw -1.29vh; rotate: 147.6deg; } 61.52% { translate: -4.09vw -1.29vh; rotate: 27.6deg; } 64.43% { translate: -4.09vw -1.29vh; rotate: 27.6deg; } 71.43% { translate: -1.58vw 0.02vh; rotate: 27.6deg; } 74.71% { translate: -1.58vw 0.02vh; rotate: 108.0deg; } 76.9% { translate: -1.58vw 0.02vh; rotate: 108.0deg; } 85.71% { translate: -2.08vw 1.56vh; rotate: 108.0deg; } 89.29% { translate: -2.08vw 1.56vh; rotate: -36.9deg; } 91.68% { translate: -2.08vw 1.56vh; rotate: -36.9deg; } 100% { translate: 0.00vw 0.00vh; rotate: -36.9deg; } } .qbb-bee--6 { left: 14vw; top: 86vh; width: 108px; --gait: 1.37s; animation-name: qbb-walk-6; animation-duration: 206s; animation-delay: -31s; } @keyframes qbb-walk-7 { 0% { translate: 0.00vw 0.00vh; rotate: -77.5deg; } 3.41% { translate: 0.00vw 0.00vh; rotate: -207.3deg; } 5.68% { translate: 0.00vw 0.00vh; rotate: -207.3deg; } 14.29% { translate: -2.03vw 1.05vh; rotate: -207.3deg; } 18.04% { translate: -2.03vw 1.05vh; rotate: -306.5deg; } 20.54% { translate: -2.03vw 1.05vh; rotate: -306.5deg; } 28.57% { translate: -1.03vw 2.40vh; rotate: -306.5deg; } 32.69% { translate: -1.03vw 2.40vh; rotate: -446.1deg; } 35.44% { translate: -1.03vw 2.40vh; rotate: -446.1deg; } 42.86% { translate: -0.85vw -0.27vh; rotate: -446.1deg; } 46.77% { translate: -0.85vw -0.27vh; rotate: -354.0deg; } 49.38% { translate: -0.85vw -0.27vh; rotate: -354.0deg; } 57.14% { translate: 0.55vw -0.12vh; rotate: -354.0deg; } 60.49% { translate: 0.55vw -0.12vh; rotate: -523.5deg; } 62.71% { translate: 0.55vw -0.12vh; rotate: -523.5deg; } 71.43% { translate: -2.61vw -1.06vh; rotate: -523.5deg; } 75.28% { translate: -2.61vw -1.06vh; rotate: -471.0deg; } 77.84% { translate: -2.61vw -1.06vh; rotate: -471.0deg; } 85.71% { translate: -3.74vw -4.01vh; rotate: -471.0deg; } 89.28% { translate: -3.74vw -4.01vh; rotate: -313.0deg; } 91.66% { translate: -3.74vw -4.01vh; rotate: -313.0deg; } 100% { translate: 0.00vw 0.00vh; rotate: -313.0deg; } } .qbb-bee--7 { left: 21vw; top: 16vh; width: 100px; --gait: 1.61s; animation-name: qbb-walk-7; animation-duration: 183s; animation-delay: -90s; } @keyframes qbb-walk-8 { 0% { translate: 0.00vw 0.00vh; rotate: -53.6deg; } 4.32% { translate: 0.00vw 0.00vh; rotate: 104.1deg; } 7.2% { translate: 0.00vw 0.00vh; rotate: 104.1deg; } 14.29% { translate: -0.90vw 3.59vh; rotate: 104.1deg; } 17.66% { translate: -0.90vw 3.59vh; rotate: 256.3deg; } 19.91% { translate: -0.90vw 3.59vh; rotate: 256.3deg; } 28.57% { translate: -1.62vw 0.66vh; rotate: 256.3deg; } 31.75% { translate: -1.62vw 0.66vh; rotate: 382.9deg; } 33.88% { translate: -1.62vw 0.66vh; rotate: 382.9deg; } 42.86% { translate: 1.22vw 1.86vh; rotate: 382.9deg; } 46.95% { translate: 1.22vw 1.86vh; rotate: 293.2deg; } 49.68% { translate: 1.22vw 1.86vh; rotate: 293.2deg; } 57.14% { translate: 2.41vw -0.90vh; rotate: 293.2deg; } 60.47% { translate: 2.41vw -0.90vh; rotate: 137.7deg; } 62.69% { translate: 2.41vw -0.90vh; rotate: 137.7deg; } 71.43% { translate: 0.58vw 0.76vh; rotate: 137.7deg; } 74.57% { translate: 0.58vw 0.76vh; rotate: 168.1deg; } 76.66% { translate: 0.58vw 0.76vh; rotate: 168.1deg; } 85.71% { translate: -1.55vw 1.21vh; rotate: 168.1deg; } 89.97% { translate: -1.55vw 1.21vh; rotate: 322.1deg; } 92.81% { translate: -1.55vw 1.21vh; rotate: 322.1deg; } 100% { translate: 0.00vw 0.00vh; rotate: 322.1deg; } } .qbb-bee--8 { left: 28vw; top: 33vh; width: 118px; --gait: 1.45s; animation-name: qbb-walk-8; animation-duration: 226s; animation-delay: -56s; } @keyframes qbb-walk-9 { 0% { translate: 0.00vw 0.00vh; rotate: 12.7deg; } 3.66% { translate: 0.00vw 0.00vh; rotate: -11.3deg; } 6.1% { translate: 0.00vw 0.00vh; rotate: -11.3deg; } 14.29% { translate: 1.55vw -0.31vh; rotate: -11.3deg; } 18.11% { translate: 1.55vw -0.31vh; rotate: 115.2deg; } 20.67% { translate: 1.55vw -0.31vh; rotate: 115.2deg; } 28.57% { translate: 0.21vw 2.55vh; rotate: 115.2deg; } 32.22% { translate: 0.21vw 2.55vh; rotate: 81.5deg; } 34.65% { translate: 0.21vw 2.55vh; rotate: 81.5deg; } 42.86% { translate: 0.60vw 5.15vh; rotate: 81.5deg; } 46.98% { translate: 0.60vw 5.15vh; rotate: 97.4deg; } 49.73% { translate: 0.60vw 5.15vh; rotate: 97.4deg; } 57.14% { translate: 0.51vw 5.80vh; rotate: 97.4deg; } 60.91% { translate: 0.51vw 5.80vh; rotate: 180.0deg; } 63.43% { translate: 0.51vw 5.80vh; rotate: 180.0deg; } 71.43% { translate: -1.49vw 5.80vh; rotate: 180.0deg; } 75% { translate: -1.49vw 5.80vh; rotate: 218.2deg; } 77.38% { translate: -1.49vw 5.80vh; rotate: 218.2deg; } 85.71% { translate: -3.21vw 4.45vh; rotate: 218.2deg; } 89.93% { translate: -3.21vw 4.45vh; rotate: 305.8deg; } 92.73% { translate: -3.21vw 4.45vh; rotate: 305.8deg; } 100% { translate: 0.00vw 0.00vh; rotate: 305.8deg; } } .qbb-bee--9 { left: 19vw; top: 48vh; width: 106px; --gait: 1.54s; animation-name: qbb-walk-9; animation-duration: 194s; animation-delay: -25s; } @keyframes qbb-walk-10 { 0% { translate: 0.00vw 0.00vh; rotate: 66.0deg; } 4.31% { translate: 0.00vw 0.00vh; rotate: 127.5deg; } 7.18% { translate: 0.00vw 0.00vh; rotate: 127.5deg; } 14.29% { translate: -2.01vw 2.62vh; rotate: 127.5deg; } 18.51% { translate: -2.01vw 2.62vh; rotate: 136.5deg; } 21.33% { translate: -2.01vw 2.62vh; rotate: 136.5deg; } 28.57% { translate: -4.53vw 5.01vh; rotate: 136.5deg; } 32.42% { translate: -4.53vw 5.01vh; rotate: 120.7deg; } 34.99% { translate: -4.53vw 5.01vh; rotate: 120.7deg; } 42.86% { translate: -5.00vw 5.80vh; rotate: 120.7deg; } 47.01% { translate: -5.00vw 5.80vh; rotate: 120.7deg; } 49.78% { translate: -5.00vw 5.80vh; rotate: 120.7deg; } 57.14% { translate: -5.00vw 5.80vh; rotate: 120.7deg; } 61.43% { translate: -5.00vw 5.80vh; rotate: 270.0deg; } 64.28% { translate: -5.00vw 5.80vh; rotate: 270.0deg; } 71.43% { translate: -5.00vw 4.06vh; rotate: 270.0deg; } 75.63% { translate: -5.00vw 4.06vh; rotate: 434.6deg; } 78.43% { translate: -5.00vw 4.06vh; rotate: 434.6deg; } 85.71% { translate: -4.56vw 5.67vh; rotate: 434.6deg; } 89.57% { translate: -4.56vw 5.67vh; rotate: 308.8deg; } 92.13% { translate: -4.56vw 5.67vh; rotate: 308.8deg; } 100% { translate: 0.00vw 0.00vh; rotate: 308.8deg; } } .qbb-bee--10 { left: 30vw; top: 64vh; width: 112px; --gait: 1.39s; animation-name: qbb-walk-10; animation-duration: 241s; animation-delay: -16s; } @keyframes qbb-walk-11 { 0% { translate: 0.00vw 0.00vh; rotate: 134.9deg; } 3.67% { translate: 0.00vw 0.00vh; rotate: 62.1deg; } 6.12% { translate: 0.00vw 0.00vh; rotate: 62.1deg; } 14.29% { translate: 1.12vw 2.11vh; rotate: 62.1deg; } 18.26% { translate: 1.12vw 2.11vh; rotate: 35.8deg; } 20.91% { translate: 1.12vw 2.11vh; rotate: 35.8deg; } 28.57% { translate: 2.27vw 2.94vh; rotate: 35.8deg; } 32.14% { translate: 2.27vw 2.94vh; rotate: -60.6deg; } 34.52% { translate: 2.27vw 2.94vh; rotate: -60.6deg; } 42.86% { translate: 3.13vw 1.43vh; rotate: -60.6deg; } 46.47% { translate: 3.13vw 1.43vh; rotate: -62.6deg; } 48.87% { translate: 3.13vw 1.43vh; rotate: -62.6deg; } 57.14% { translate: 4.18vw -0.61vh; rotate: -62.6deg; } 60.53% { translate: 4.18vw -0.61vh; rotate: -162.0deg; } 62.78% { translate: 4.18vw -0.61vh; rotate: -162.0deg; } 71.43% { translate: 2.71vw -1.08vh; rotate: -162.0deg; } 75.23% { translate: 2.71vw -1.08vh; rotate: -31.5deg; } 77.76% { translate: 2.71vw -1.08vh; rotate: -31.5deg; } 85.71% { translate: 4.32vw -2.07vh; rotate: -31.5deg; } 89.92% { translate: 4.32vw -2.07vh; rotate: -205.6deg; } 92.72% { translate: 4.32vw -2.07vh; rotate: -205.6deg; } 100% { translate: 0.00vw 0.00vh; rotate: -205.6deg; } } .qbb-bee--11 { left: 24vw; top: 79vh; width: 96px; --gait: 1.63s; animation-name: qbb-walk-11; animation-duration: 179s; animation-delay: -80s; } @keyframes qbb-walk-12 { 0% { translate: 0.00vw 0.00vh; rotate: -114.6deg; } 3.19% { translate: 0.00vw 0.00vh; rotate: -186.0deg; } 5.32% { translate: 0.00vw 0.00vh; rotate: -186.0deg; } 14.29% { translate: -1.27vw 0.13vh; rotate: -186.0deg; } 17.55% { translate: -1.27vw 0.13vh; rotate: -169.4deg; } 19.72% { translate: -1.27vw 0.13vh; rotate: -169.4deg; } 28.57% { translate: -2.96vw -0.19vh; rotate: -169.4deg; } 32.45% { translate: -2.96vw -0.19vh; rotate: -97.4deg; } 35.04% { translate: -2.96vw -0.19vh; rotate: -97.4deg; } 42.86% { translate: -3.37vw -3.37vh; rotate: -97.4deg; } 47.2% { translate: -3.37vw -3.37vh; rotate: -222.0deg; } 50.09% { translate: -3.37vw -3.37vh; rotate: -222.0deg; } 57.14% { translate: -5.00vw -1.90vh; rotate: -222.0deg; } 60.9% { translate: -5.00vw -1.90vh; rotate: -90.0deg; } 63.41% { translate: -5.00vw -1.90vh; rotate: -90.0deg; } 71.43% { translate: -5.00vw -2.79vh; rotate: -90.0deg; } 74.95% { translate: -5.00vw -2.79vh; rotate: 12.5deg; } 77.29% { translate: -5.00vw -2.79vh; rotate: 12.5deg; } 85.71% { translate: -2.62vw -2.27vh; rotate: 12.5deg; } 90.02% { translate: -2.62vw -2.27vh; rotate: 40.8deg; } 92.89% { translate: -2.62vw -2.27vh; rotate: 40.8deg; } 100% { translate: 0.00vw 0.00vh; rotate: 40.8deg; } } .qbb-bee--12 { left: 35vw; top: 22vh; width: 110px; --gait: 1.47s; animation-name: qbb-walk-12; animation-duration: 218s; animation-delay: -124s; } @keyframes qbb-walk-13 { 0% { translate: 0.00vw 0.00vh; rotate: 175.5deg; } 3.78% { translate: 0.00vw 0.00vh; rotate: 275.7deg; } 6.3% { translate: 0.00vw 0.00vh; rotate: 275.7deg; } 14.29% { translate: 0.16vw -1.60vh; rotate: 275.7deg; } 17.58% { translate: 0.16vw -1.60vh; rotate: 230.7deg; } 19.77% { translate: 0.16vw -1.60vh; rotate: 230.7deg; } 28.57% { translate: -1.96vw -4.18vh; rotate: 230.7deg; } 31.85% { translate: -1.96vw -4.18vh; rotate: 89.7deg; } 34.04% { translate: -1.96vw -4.18vh; rotate: 89.7deg; } 42.86% { translate: -1.95vw -2.37vh; rotate: 89.7deg; } 47.23% { translate: -1.95vw -2.37vh; rotate: 41.8deg; } 50.15% { translate: -1.95vw -2.37vh; rotate: 41.8deg; } 57.14% { translate: -0.67vw -1.23vh; rotate: 41.8deg; } 60.25% { translate: -0.67vw -1.23vh; rotate: -99.2deg; } 62.32% { translate: -0.67vw -1.23vh; rotate: -99.2deg; } 71.43% { translate: -1.04vw -3.49vh; rotate: -99.2deg; } 74.65% { translate: -1.04vw -3.49vh; rotate: -255.6deg; } 76.79% { translate: -1.04vw -3.49vh; rotate: -255.6deg; } 85.71% { translate: -1.66vw -1.05vh; rotate: -255.6deg; } 89.42% { translate: -1.66vw -1.05vh; rotate: -327.8deg; } 91.88% { translate: -1.66vw -1.05vh; rotate: -327.8deg; } 100% { translate: 0.00vw 0.00vh; rotate: -327.8deg; } } .qbb-bee--13 { left: 33vw; top: 90vh; width: 102px; --gait: 1.56s; animation-name: qbb-walk-13; animation-duration: 201s; animation-delay: -106s; } @keyframes qbb-walk-14 { 0% { translate: 0.00vw 0.00vh; rotate: 111.0deg; } 3.58% { translate: 0.00vw 0.00vh; rotate: 85.3deg; } 5.97% { translate: 0.00vw 0.00vh; rotate: 85.3deg; } 14.29% { translate: 0.23vw 2.85vh; rotate: 85.3deg; } 18.22% { translate: 0.23vw 2.85vh; rotate: 248.4deg; } 20.85% { translate: 0.23vw 2.85vh; rotate: 248.4deg; } 28.57% { translate: -0.81vw 0.21vh; rotate: 248.4deg; } 32.34% { translate: -0.81vw 0.21vh; rotate: 419.4deg; } 34.84% { translate: -0.81vw 0.21vh; rotate: 419.4deg; } 42.86% { translate: 0.59vw 2.57vh; rotate: 419.4deg; } 47.26% { translate: 0.59vw 2.57vh; rotate: 591.7deg; } 50.2% { translate: 0.59vw 2.57vh; rotate: 591.7deg; } 57.14% { translate: -1.32vw 0.16vh; rotate: 591.7deg; } 61.15% { translate: -1.32vw 0.16vh; rotate: 429.6deg; } 63.82% { translate: -1.32vw 0.16vh; rotate: 429.6deg; } 71.43% { translate: -0.36vw 2.74vh; rotate: 429.6deg; } 74.64% { translate: -0.36vw 2.74vh; rotate: 496.1deg; } 76.79% { translate: -0.36vw 2.74vh; rotate: 496.1deg; } 85.71% { translate: -1.57vw 3.90vh; rotate: 496.1deg; } 89.44% { translate: -1.57vw 3.90vh; rotate: 652.0deg; } 91.92% { translate: -1.57vw 3.90vh; rotate: 652.0deg; } 100% { translate: 0.00vw 0.00vh; rotate: 652.0deg; } } .qbb-bee--14 { left: 38vw; top: 45vh; width: 114px; --gait: 1.35s; animation-name: qbb-walk-14; animation-duration: 189s; animation-delay: -21s; } /* ---- the bubbles ------------------------------------------------------ Owner, 17 Sept: "lets have the bubbles floating around and they can float off screen and new ones come up from the bottom of the screen", and "if we can make the bubbles actually starting at the front of her wand and moving outward from there so it looks like she is blowing them that would be great". ONE POPULATION SINCE 19 SEPTEMBER. Owner: "have the bubbles ONLY originate from Queen Bubbles Bee's wand outward, they can go in all directions from there." There used to be a second set with no source at all - eighteen of them, rising from below the fold anywhere across the window. They are gone (see the deletion note further down) and `.qbb-wbub` is now the only bubble on the site. CONSEQUENCE, WRITTEN DOWN BECAUSE IT IS EASY TO MISS: on a phone her figure is hidden - there is no room for her - and her wand goes with it. With the sky deleted that means a phone shows NO bubbles at all. It follows from his instruction rather than contradicting it (if every bubble must come from her wand, no wand means no bubbles) but it is a visible change on the screen size most people use, and it is his to overrule. .qbb-wbub - her wand. These start at a single point, the tip of the wand in the artwork, at almost no size, and travel OUTWARD while growing - which is what blown bubbles do. Their delays are clustered into three groups rather than spread evenly, so they leave the wand in breaths, the way they would if she were actually blowing. The travel uses `translate` and the pop uses `transform`, two independent properties on the same element, so neither overwrites the other. Both are compositor-only: no layout, no repaint. */ .qbb-wbub { position: absolute; border-radius: 50%; will-change: translate; animation-iteration-count: infinite; } /* Six soaps. Every one is a closest-side radial gradient - a farthest-corner gradient paints the corners of its own box and shows up as a faint square over the text, which is a bug this site has had once already. */ .qbb-soap-1 { background: radial-gradient(circle closest-side at 38% 31%, rgba(255,255,255,0.96) 0 6%, rgba(255,255,255,0) 19%), radial-gradient(circle closest-side at 50% 50%, rgba(232,246,252,0.06) 0 52%, rgba(255,214,120,0.20) 78%, rgba(120,196,230,0.30) 95%, rgba(255,255,255,0) 100%); box-shadow: inset -4px -6px 11px rgba(245,184,61,0.10), inset 3px 4px 9px rgba(255,255,255,0.34); } .qbb-soap-2 { background: radial-gradient(circle closest-side at 33% 28%, rgba(255,255,255,0.92) 0 7%, rgba(255,255,255,0) 20%), radial-gradient(circle closest-side at 50% 50%, rgba(255,255,255,0.04) 0 50%, rgba(196,168,232,0.22) 76%, rgba(126,206,214,0.28) 96%, rgba(255,255,255,0) 100%); box-shadow: inset -5px -7px 12px rgba(160,140,220,0.10), inset 3px 4px 9px rgba(255,255,255,0.32); } .qbb-soap-3 { background: radial-gradient(circle closest-side at 41% 34%, rgba(255,255,255,0.90) 0 6%, rgba(255,255,255,0) 18%), radial-gradient(circle closest-side at 50% 50%, rgba(255,255,255,0.05) 0 54%, rgba(255,196,142,0.20) 80%, rgba(236,150,196,0.26) 96%, rgba(255,255,255,0) 100%); box-shadow: inset -4px -7px 11px rgba(232,150,120,0.10), inset 4px 4px 9px rgba(255,255,255,0.34); } .qbb-soap-4 { background: radial-gradient(circle closest-side at 36% 30%, rgba(255,255,255,0.94) 0 7%, rgba(255,255,255,0) 21%), radial-gradient(circle closest-side at 50% 50%, rgba(240,252,255,0.05) 0 51%, rgba(150,222,236,0.22) 77%, rgba(255,222,140,0.27) 96%, rgba(255,255,255,0) 100%); box-shadow: inset -5px -6px 12px rgba(120,190,220,0.10), inset 3px 4px 9px rgba(255,255,255,0.33); } .qbb-soap-5 { background: radial-gradient(circle closest-side at 44% 27%, rgba(255,255,255,0.88) 0 6%, rgba(255,255,255,0) 17%), radial-gradient(circle closest-side at 50% 50%, rgba(255,255,255,0.04) 0 53%, rgba(206,236,176,0.20) 79%, rgba(168,190,240,0.26) 96%, rgba(255,255,255,0) 100%); box-shadow: inset -4px -7px 10px rgba(150,180,140,0.10), inset 4px 4px 9px rgba(255,255,255,0.32); } .qbb-soap-6 { background: radial-gradient(circle closest-side at 30% 33%, rgba(255,255,255,0.95) 0 8%, rgba(255,255,255,0) 22%), radial-gradient(circle closest-side at 50% 50%, rgba(255,252,240,0.05) 0 50%, rgba(255,206,118,0.22) 78%, rgba(146,212,236,0.28) 96%, rgba(255,255,255,0) 100%); box-shadow: inset -5px -7px 12px rgba(245,184,61,0.11), inset 4px 4px 9px rgba(255,255,255,0.35); } /* her wand: out from one point, growing, in breaths */ .qbb-wand { position: absolute; /* 0.30 down her figure, and 0.245 in from her left edge - see "WHERE SHE STANDS" above. Both are the measured position of the bee on her wand in bg-queen.webp, not a guess. */ top: calc(100vh - var(--queen-h, 97.4vh) * 0.5604); right: calc(var(--queen-h, 97.4vh) * 0.7966 * 0.755 - var(--queen-off, 34vh)); width: 0; height: 0; } .qbb-wbub { top: 0; left: 0; animation-name: qbb-blow; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } /* THE OPACITY BOOST. Owner, 19 September 2026: "increase the opacity of the bubbles so they can be seen easier - do this on both the website and the phone versions but even more visible on the phone version." Rather than editing twenty-four hand-written --op values twice over, every one of them is multiplied by --op-boost at the moment it is painted. One number per screen size, and the relative weighting between the bubbles - which is what stops them reading as a row of identical dots - is preserved exactly. CSS clamps opacity above 1, so a boost can never produce an invalid value. */ @keyframes qbb-blow { 0% { translate: 0 0; scale: 0.10; opacity: 0; } 7% { opacity: calc(var(--op, 0.7) * var(--op-boost, 1)); } 78% { opacity: calc(var(--op, 0.7) * var(--op-boost, 1)); } 100% { translate: var(--bx, -22vw) var(--by, -12vh); scale: 1; opacity: 0; } } /* ---- EVERY BUBBLE COMES OUT OF HER WAND. NOTHING SPAWNS IN MID-AIR. ---- Owner, 19 September 2026: "on the background of the website please have the bubbles ONLY originate from Queen Bubbles Bee's wand outward, they can go in all directions from there." WHAT WAS HERE: eighteen `.qbb-bub` that started below the fold anywhere across the window and rose out of the top. They were a second, separate population with no source - which is the thing he is ruling out. The whole block is deleted rather than hidden, and the `qbb-rise` / `qbb-sway` keyframes with it, so nobody can switch them back on by accident. WHAT IS HERE NOW: twenty-four from the wand instead of nine, thrown in every direction round the clock rather than only up and to the left. The wand sits about 25vh in from the right edge, so a bubble aimed rightwards leaves the window almost immediately; the rightward throws are therefore SHORTER, which is how every direction can be represented and every bubble still be seen. The delays stay clustered into three groups, so she blows them in breaths. */ /* twenty-four from the wand, in three breaths, in every direction */ .qbb-wbub--1 { width: 30px; height: 30px; --bx: 3.3vw; --by: 0.2vh; --op: 0.46; animation-duration: 15.0s; animation-delay: -0.0s; } .qbb-wbub--2 { width: 36px; height: 36px; --bx: 7.3vw; --by: -1.8vh; --op: 0.59; animation-duration: 17.2s; animation-delay: -5.8s; } .qbb-wbub--3 { width: 44px; height: 44px; --bx: 5.8vw; --by: -1.7vh; --op: 0.73; animation-duration: 15.6s; animation-delay: -11.4s; } .qbb-wbub--4 { width: 52px; height: 52px; --bx: 3.1vw; --by: -2.5vh; --op: 0.56; animation-duration: 17.8s; animation-delay: -1.9s; } .qbb-wbub--5 { width: 26px; height: 26px; --bx: 2.1vw; --by: -1.8vh; --op: 0.69; animation-duration: 16.1s; animation-delay: -7.7s; } .qbb-wbub--6 { width: 30px; height: 30px; --bx: 2.2vw; --by: -9.8vh; --op: 0.53; animation-duration: 18.3s; animation-delay: -13.3s; } .qbb-wbub--7 { width: 36px; height: 36px; --bx: 1.2vw; --by: -8.2vh; --op: 0.66; animation-duration: 16.6s; animation-delay: -3.8s; } .qbb-wbub--8 { width: 44px; height: 44px; --bx: -7.1vw; --by: -10.9vh; --op: 0.49; animation-duration: 15.0s; animation-delay: -9.6s; } .qbb-wbub--9 { width: 52px; height: 52px; --bx: -5.9vw; --by: -7.9vh; --op: 0.63; animation-duration: 17.2s; animation-delay: -15.2s; } .qbb-wbub--10 { width: 26px; height: 26px; --bx: -23.6vw; --by: -11.5vh; --op: 0.46; animation-duration: 15.6s; animation-delay: -5.7s; } .qbb-wbub--11 { width: 30px; height: 30px; --bx: -20.5vw; --by: -8.9vh; --op: 0.59; animation-duration: 17.8s; animation-delay: -11.5s; } .qbb-wbub--12 { width: 36px; height: 36px; --bx: -19.8vw; --by: -1.7vh; --op: 0.73; animation-duration: 16.1s; animation-delay: -17.1s; } .qbb-wbub--13 { width: 44px; height: 44px; --bx: -14.9vw; --by: -0.8vh; --op: 0.56; animation-duration: 18.3s; animation-delay: -7.6s; } .qbb-wbub--14 { width: 52px; height: 52px; --bx: -28.7vw; --by: 7.2vh; --op: 0.69; animation-duration: 16.6s; animation-delay: -13.4s; } .qbb-wbub--15 { width: 26px; height: 26px; --bx: -23.6vw; --by: 6.8vh; --op: 0.53; animation-duration: 15.0s; animation-delay: -19.0s; } .qbb-wbub--16 { width: 30px; height: 30px; --bx: -12.9vw; --by: 10.3vh; --op: 0.66; animation-duration: 17.2s; animation-delay: -9.5s; } .qbb-wbub--17 { width: 36px; height: 36px; --bx: -9.2vw; --by: 8.1vh; --op: 0.49; animation-duration: 15.6s; animation-delay: -15.3s; } .qbb-wbub--18 { width: 44px; height: 44px; --bx: -4.5vw; --by: 19.6vh; --op: 0.63; animation-duration: 17.8s; animation-delay: -20.9s; } .qbb-wbub--19 { width: 52px; height: 52px; --bx: -2.4vw; --by: 16.7vh; --op: 0.46; animation-duration: 16.1s; animation-delay: -11.4s; } .qbb-wbub--20 { width: 26px; height: 26px; --bx: 4.5vw; --by: 7.0vh; --op: 0.59; animation-duration: 18.3s; animation-delay: -17.2s; } .qbb-wbub--21 { width: 30px; height: 30px; --bx: 4.0vw; --by: 5.3vh; --op: 0.73; animation-duration: 16.6s; animation-delay: -22.8s; } .qbb-wbub--22 { width: 36px; height: 36px; --bx: 2.6vw; --by: 1.3vh; --op: 0.56; animation-duration: 15.0s; animation-delay: -13.3s; } .qbb-wbub--23 { width: 44px; height: 44px; --bx: 6.4vw; --by: 2.8vh; --op: 0.69; animation-duration: 17.2s; animation-delay: -19.1s; } .qbb-wbub--24 { width: 52px; height: 52px; --bx: 6.4vw; --by: 0.6vh; --op: 0.53; animation-duration: 15.6s; animation-delay: -24.7s; } .qbb-wbub--1 { width: 36px; height: 36px; --bx: -19.5vw; --by: -0.3vh; --op: 0.57; animation-duration: 17.1s; animation-delay: -0s; } .qbb-wbub--2 { width: 36px; height: 36px; --bx: -19vw; --by: -14.2vh; --op: 0.51; animation-duration: 17.4s; animation-delay: -6.1s; } .qbb-wbub--3 { width: 52px; height: 52px; --bx: -23.1vw; --by: -14.2vh; --op: 0.73; animation-duration: 16.4s; animation-delay: -11.5s; } .qbb-wbub--4 { width: 36px; height: 36px; --bx: -24.3vw; --by: -13.6vh; --op: 0.5; animation-duration: 15.2s; animation-delay: -1.8s; } .qbb-wbub--5 { width: 36px; height: 36px; --bx: -28.7vw; --by: -18.7vh; --op: 0.68; animation-duration: 17.9s; animation-delay: -8.4s; } .qbb-wbub--6 { width: 52px; height: 52px; --bx: -24.4vw; --by: 3.2vh; --op: 0.67; animation-duration: 16.8s; animation-delay: -13.8s; } .qbb-wbub--7 { width: 44px; height: 44px; --bx: -13.7vw; --by: -6.1vh; --op: 0.59; animation-duration: 17.5s; animation-delay: -4.2s; } .qbb-wbub--8 { width: 36px; height: 36px; --bx: -26.7vw; --by: -23vh; --op: 0.51; animation-duration: 17s; animation-delay: -10s; } .qbb-wbub--9 { width: 36px; height: 36px; --bx: -17.1vw; --by: 0.7vh; --op: 0.59; animation-duration: 18.2s; animation-delay: -17.1s; } /* ---- phones ---------------------------------------------------------- The Queen's artwork is a landscape picture; on a 390px screen a right-hand panel of it is a crop of her sleeve and nothing else, so she is dropped and the comb runs the full width. Six bees instead of fourteen, and her wand stream goes with her - which, since 19 September, is every bubble there is. */ @media (max-width: 48rem) { /* ---- 19 SEPTEMBER 2026: SHE IS ON THE PHONE NOW ----------------------- Owner: "show a small version of her and reduce the honeycomb to 25% of the background and then make the tiles in the center slightly smaller to allow for Queen Bubbles Bee to be visible down the right side, just like on the computer, then we can still have her blowing bubbles from her wand". Before this, a phone hid her, her wand and (once the sky was deleted) every bubble on the site. Three moves put her back: 1. A STRIP IS OPENED DOWN THE RIGHT. The cream sheets used to be centred with an equal gutter each side. On a phone they now sit left and leave --queen-strip clear on the right, which is the "tiles in the center slightly smaller" part. 6rem is the smallest strip she still reads in; it costs the text about 7% of its width, which is the price of having her here at all. 2. SHE IS SIZED TO THAT STRIP, not guessed at. --queen-off is written as (her width - the strip), so EXACTLY 6rem of her shows however tall she is made. Change --queen-h alone and everything else follows, including her wand, because the wand's position is already derived from her size (see "WHERE SHE STANDS"). 3. THE COMB TAKES THE LEFT QUARTER and its cells shrink. A full-bleed comb behind a narrower sheet would only show as two slivers; at 25% of the width it is a band you can actually read as honeycomb, and 132px cells (was 176px) keep whole cells inside a band that narrow. */ /* THESE NEED THE :root SELECTOR. A custom property written bare inside a media query - no selector round it - is invalid CSS and is thrown away silently. Written that way first, and the phone rendered her at the DESKTOP height of 97.4vh, ghosting through the text, while --queen-strip stayed undefined and took the sheet rule down with it. Nothing errored; it just quietly did not happen. */ :root { /* HER SIZE AND THE STRIP ARE COUPLED, and it is not obvious which way. Only the RIGHT --queen-strip pixels of her are on screen, and her wand is 24.5% in from her LEFT edge - so the BIGGER she is, the further her wand slides off the right of the screen. Measured: at 30vh her wand sits 47px in from the edge, at 44vh only 16px, which would have her blowing bubbles off the side of the phone. 34vh against a 6rem strip puts the wand 40px in, which is the largest she can be and still be blowing into the page. */ --queen-h: 34vh; --queen-strip: 6rem; --queen-off: calc(var(--queen-h) * 0.7966 - var(--queen-strip)); /* Owner: "even more visible on the phone version." */ --op-boost: 2.1; } .qbb-queen, .qbb-queen-veil, .qbb-wand { display: block; } .qbb-comb { inset: -4px auto -4px -4px; width: 25%; background-size: 132px auto; } .qbb-forest { width: 62vw; } .qbb-bee--7, .qbb-bee--8, .qbb-bee--9, .qbb-bee--10, .qbb-bee--11, .qbb-bee--12, .qbb-bee--13, .qbb-bee--14 { display: none; } .qbb-bee { width: 84px; } /* The sheet geometry is NOT here. The base .wrap sheet rule is declared later in this file, so an override written at this point loses on source order - it was written here first, and the phone rendered with a full-width sheet and the Queen ghosting through it. It now lives at the very end of the file, under "PHONE: the strip down the right". */ } /* Between a phone and a laptop she is there, but narrower, so the comb and the bees keep a half of their own. */ @media (min-width: 48.0625rem) and (max-width: 64rem) { .qbb-queen, .qbb-queen-veil { width: min(50vw, 640px); } .qbb-bee--12, .qbb-bee--13, .qbb-bee--14 { display: none; } } /* ---- A BUBBLE NEVER CROSSES A PRODUCT PHOTO --------------------------- Owner, 19 September 2026: "dont have the bubbles float over the merchandise photos, have them pop when they get to the edge of any of the photos of merchandise. I dont want them in front of the merchandise ever because they alter the view of the product and makes people think that is what they will get when they order the product - seems illegal at worst and unethical at best." He is right, and it is the FTC's view too: a product image is a representation of the thing being sold, and decorating it changes what the buyer thinks they are buying. So this is done twice over, and the two halves fail in opposite directions. THE BRACE, here in CSS, is absolute and needs no JavaScript: every frame that holds a photograph of merchandise is lifted to --z-control (3), above the sky at --z-sky (2). A bubble cannot paint on a product photo even if the script below never runs, is blocked, or throws. This is the half that actually keeps the promise. .detail-media is `position: sticky`, which makes a stacking context whatever its z-index, so raising only the frame inside it would do nothing - the whole sticky column has to come up. That is why it is in this list. THE BELT is the pop itself (see qbb-pop below and bubblePop() in app.js): the bubble bursts at the edge of the photo instead of sliding silently behind it. That is the part he asked for by name, and it is also what makes the rule visible rather than mysterious. */ .product-media, .product-img-frame, .detail-media, .detail-media-frame, .detail-thumb, .cart-thumb .cart-img-frame { position: relative; z-index: var(--z-control); } /* The burst. `transform` is free on a wand bubble - its travel is on `translate` and its growth on `scale` - so the pop composes with where the bubble already is instead of yanking it back to the wand. app.js freezes the current translate/scale inline before switching the animation, for the same reason. */ .qbb-wbub.is-popping { animation-name: qbb-pop; animation-duration: 260ms; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); animation-iteration-count: 1; /* THE DELAY HAS TO BE RESET AND THIS IS NOT OPTIONAL. Every bubble carries a large negative animation-delay from its own .qbb-wbub--N rule, which is how the stream is already in flight when the page loads. Inherited by a 260ms pop, a delay of -19s starts the burst nineteen seconds after it finished: the bubble vanishes instantly and animationend never arrives. Caught in a headless run that counted 145 "pops" in nine seconds, none of them visible. */ animation-delay: 0s; animation-fill-mode: forwards; } @keyframes qbb-pop { 0% { transform: scale(1); opacity: var(--op, 0.6); } 40% { transform: scale(1.22); opacity: 0.9; } 100% { transform: scale(0.2); opacity: 0; } } /* ---- reduced motion -------------------------------------------------- This is a calm-and-wellness brand and drifting decoration is exactly what hurts a vestibular-sensitive reader, so this is not a courtesy, it is the point. Everything stops where it stands: the comb, the Queen and the bees are all still there to look at, nothing moves. */ @media (prefers-reduced-motion: reduce) { .qbb-bee, .qbb-legs, .qbb-body, .qbb-wings, .qbb-ant, .qbb-wbub { animation: none !important; } .qbb-wbub { opacity: calc(var(--op, 0.7) * var(--op-boost, 1)); scale: 1; translate: var(--bx) var(--by); } } /* ---- print ----------------------------------------------------------- Nobody wants fourteen bees on a printed refund policy. */ @media print { .qbb-scene, .qbb-sky { display: none !important; } } /* ===================== end the background scene ===================== */ /* ---------- The cream sheet ---------- Long text never sits on the honeycomb. Every section that holds a paragraph, a heading, a price or a form field gets this opaque-enough cream surface and the honeycomb shows around it, between the sheets and out in the gutters. */ .hero > .wrap, .page-head > .wrap, .section > .wrap, .section-tight > .wrap, .learn-main > .wrap { position: relative; z-index: auto; /* never give this a number: it would trap every control inside it */ width: calc(100% - 2 * var(--sheet-inset)); margin-inline: auto; background-color: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: var(--sheet-radius); box-shadow: var(--sheet-shadow); background-clip: padding-box; } .section > .wrap { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .section-tight > .wrap { padding-block: clamp(1.75rem, 4vw, 3rem); } .hero > .wrap { padding-block: clamp(2rem, 6vw, 4.5rem); } .page-head > .wrap { padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.5rem); } .learn-main > .wrap { padding-block: clamp(1.5rem, 4vw, 2.5rem); } /* The tinted bands become tinted sheets so they float on the comb like the rest. */ .tint-blue > .wrap { background-color: var(--bubble-soft); border-color: rgba(27, 94, 133, 0.35); } .adaptive-section > .wrap { background-color: var(--cream-deep); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: clamp(1rem, 2.4vw, 1.9rem); } .hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .hero h1 { max-width: 16ch; } .hero .lede { max-width: 36rem; margin-bottom: 1.8rem; } .hero-art { position: relative; display: grid; place-items: center; max-width: 26rem; width: 100%; justify-self: center; } .hero-art picture { display: block; width: 100%; position: relative; } .hero-logo { display: block; width: 100%; height: auto; } .hero-art .orbit { position: absolute; border-radius: 50%; z-index: 1; } .hero-art .orbit.o1 { width: 13%; aspect-ratio: 1; height: auto; top: 0; right: 0; } .hero-art .orbit.o2 { width: 8%; aspect-ratio: 1; height: auto; top: 50%; left: -2%; animation-delay: -4s; } .hero-note { margin-top: 1.1rem; font-size: 0.95rem; color: var(--ink-soft); } /* 8 Oct 2026: the two questions above the hero intro, and the employer question above Group packs. */ .hero-asks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.45rem; max-width: 36rem; } .hero-asks li { position: relative; padding-left: 1.6rem; font-weight: 700; font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem); } .hero-asks li::before { content: "\2726"; position: absolute; left: 0; top: 0; color: var(--honey); } .group-ask { font-weight: 700; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); margin: 0 0 0.9rem; } @media (max-width: 52rem) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: 13rem; order: -1; } .hero-art .orbit.o2 { display: none; } .hero h1 { max-width: none; } } @media (max-width: 30rem) { .hero .btn-row .btn, .band .btn { width: 100%; } } /* ---------- Cards and grids ---------- */ .card { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: var(--shadow); } .grid-3 { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 62rem) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 52rem) { .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 34rem) { .grid-4 { grid-template-columns: minmax(0, 1fr); } } /* Breath / Pause / Reset */ .steps { counter-reset: step; } .step { position: relative; padding-top: 1.5rem; } .step-num { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; margin-bottom: 1rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--charcoal); background: radial-gradient(circle at 30% 26%, #fff 0 10%, rgba(255, 255, 255, 0) 22%), radial-gradient(circle at 50% 50%, var(--bubble-soft), var(--bubble) 80%); border: 2px solid var(--charcoal); } .step:nth-child(2) .step-num { background: radial-gradient(circle at 30% 26%, #fff 0 10%, rgba(255, 255, 255, 0) 22%), radial-gradient(circle at 50% 50%, #fde7b6, var(--honey) 85%); } .step h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin-bottom: 0.35rem; } .step p:last-child { margin-bottom: 0; } @media (max-width: 52rem) { .step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; padding-top: clamp(1.25rem, 3vw, 1.75rem); } .step .step-num { grid-row: 1; margin: 0; width: 2.9rem; height: 2.9rem; font-size: 1.3rem; } .step h3 { grid-row: 1; margin: 0; } .step p { grid-column: 1 / -1; margin-top: 0.75rem; } } /* Path cards */ .path-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .path-card .path-top { padding: 1.3rem 1.5rem 1.1rem; border-bottom: 1.5px solid var(--line); background: var(--honey-soft); } .path-card.path-seated .path-top { background: var(--bubble); } .path-card.path-adaptive .path-top { /* Honey header with a bubble-blue bubble: the Adaptive Path borrows from both. */ background: radial-gradient(circle at calc(100% - 2.6rem) calc(50% - 0.45rem), rgba(255, 255, 255, 0.95) 0 0.2rem, transparent 0.24rem), radial-gradient(circle at calc(100% - 2.2rem) 50%, var(--bubble) 0 1.25rem, var(--bubble-deep) 1.25rem calc(1.25rem + 2px), transparent calc(1.25rem + 2.5px)), var(--honey-soft); background-repeat: no-repeat; } .path-card.path-adaptive .path-top > * { padding-right: 3.4rem; } /* The top-up note under the Adaptive Path price. Set apart from the fine print above it so it reads as an offer rather than another condition of sale - it is the one line on that card that is good news. */ .offer-card .topup-note { margin-top: 0.75rem; padding: 0.7rem 0.9rem; background: var(--cream); border: 1.5px dashed var(--honey); border-radius: 12px; } /* THE $20 TOP-UP (21 September 2026). Deliberately NOT styled as a fourth path: it is an offer, and a card that looked like the other three would read as something the buyer already owns. The dashed border is the same language the site already uses for an offer (see .unlock-note above), so it reads as "available" rather than "yours". It only ever renders for somebody holding the Adaptive Path alone, and the server refuses the checkout for anybody else - hiding a card is presentation, never the gate. */ .path-card.path-topup { border-style: dashed; background: var(--paper); } .path-card.path-topup .path-top { background: var(--cream); border-bottom-style: dashed; } .path-card.path-topup .path-body button { margin-top: 0.4rem; align-self: flex-start; } .path-card .path-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.25rem; } .path-card h3, .path-card .path-title { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1.15; margin: 0; } .path-card .path-body { padding: 1.2rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .path-card .path-body p:last-child { margin-bottom: 0; } .path-card .path-for { font-weight: 700; margin-bottom: 0.2rem; } .unlock-note { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin: 1.75rem auto 0; padding: 0.7rem 1.2rem; max-width: max-content; background: var(--paper); border: 2px dashed var(--honey); border-radius: 999px; font-weight: 700; text-align: center; } /* Merch teaser (home) */ .drop { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .design-duo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .design-duo li + li { margin: 0; } .design-tile { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 0; padding: 1.1rem 1rem 0.9rem; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--paper); box-shadow: var(--shadow); } .design-tile img { display: block; width: 100%; height: auto; max-width: 13rem; aspect-ratio: 1; object-fit: contain; } .design-tile picture { display: flex; justify-content: center; width: 100%; } .design-tile-script { background: #fffdf8; } .design-tile-seal { background: var(--bubble-soft); } .design-tile-name { font-weight: 700; text-align: center; line-height: 1.25; } @media (max-width: 52rem) { .drop { grid-template-columns: minmax(0, 1fr); } } .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; background: var(--charcoal); color: var(--cream); white-space: nowrap; } .badge-honey { background: var(--honey); color: var(--charcoal); } .badge-blue { background: var(--bubble); color: var(--charcoal); } /* Bee Kind */ /* Was a pale #f1dcb0 hairline comb on cream-deep. It is now transparent so the site-wide decadent comb runs straight through the band with no seam, and the text inside rides the standard cream sheet. */ .bee-kind { background: transparent; border-block: 0; } .facts { max-width: 60rem; margin-inline: auto; } .fact h3 { display: flex; align-items: center; gap: 0.7rem; } .fact-icon { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--honey); border: 2px solid var(--charcoal); font-size: 1rem; } .fact-icon svg { width: 1.25rem; height: 1.25rem; } .fact p:last-child { margin-bottom: 0; } /* Blue band CTA */ .band { position: relative; overflow: hidden; border-radius: calc(var(--radius) * 1.5); background: var(--bubble); border: 2px solid var(--charcoal); padding: clamp(1.75rem, 5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 1.5rem 2.5rem; align-items: center; } .band h2 { margin-bottom: 0.4rem; } .band p { margin-bottom: 0; max-width: 38rem; } .band > *:not(.bubbles) { position: relative; z-index: auto; } /* auto: tree order already clears .bubbles */ .band .bubble.b2, .band .bubble.b3, .band .bubble.b6 { display: none; } .band .bubble.b1 { width: 6.5rem; height: 6.5rem; top: -2.6rem; left: auto; right: -2.2rem; } .band .bubble.b4 { width: 3.4rem; height: 3.4rem; bottom: -1.2rem; right: 16%; } .band .bubble.b5 { width: 1.6rem; height: 1.6rem; top: auto; bottom: 1.1rem; right: 5%; } @media (max-width: 46rem) { .band .bubble.b1 { display: block; width: 4.5rem; height: 4.5rem; top: -2rem; right: -1.6rem; } .band .bubble.b4, .band .bubble.b5 { display: none; } } @media (max-width: 46rem) { .band { grid-template-columns: minmax(0, 1fr); } } /* Notes and notices */ .note { border-left: 5px solid var(--honey); background: var(--paper); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1rem 1.25rem; color: var(--ink); } .note p:last-child { margin-bottom: 0; } .note > strong:first-child { display: block; margin-bottom: 0.2rem; } .notice { padding: 0.9rem 1.15rem; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); background: var(--paper); } .notice p:last-child { margin-bottom: 0; } .notice-info { background: var(--bubble-soft); border-color: rgba(27, 94, 133, 0.35); } .notice-success { background: var(--success-bg); border-color: rgba(30, 107, 58, 0.4); } .notice-warn { background: #fdf0d2; border-color: rgba(138, 87, 0, 0.4); } .notice-error { background: var(--error-bg); border-color: rgba(161, 44, 27, 0.4); } /* ---------- Forms ---------- */ .form { display: grid; gap: 1rem; } .field { display: grid; gap: 0.35rem; } .field label, .label { font-weight: 700; } .hint { font-size: 0.92rem; color: var(--ink-soft); margin: 0; } input[type="email"], input[type="text"], input[type="time"], input[type="date"], input[type="number"], select { width: 100%; min-height: 3rem; padding: 0.6rem 0.85rem; font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); } input:hover, select:hover { border-color: rgba(43, 39, 36, 0.5); } input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--charcoal); } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); } .check { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; align-items: start; font-weight: 400; } .check input { width: 1.3rem; height: 1.3rem; margin: 0.2rem 0 0; accent-color: var(--bubble-deep); } fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } legend { padding: 0; font-weight: 700; margin-bottom: 0.45rem; } .pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pill { position: relative; } .pill input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pill span { display: inline-block; padding: 0.55rem 1rem; border-radius: 999px; border: 2px solid var(--line-strong); background: #fff; font-weight: 600; cursor: pointer; } .pill span:hover { border-color: var(--charcoal); } .pill input:checked + span { background: var(--honey); border-color: var(--charcoal); } @media (max-width: 30rem) { .pill span { padding: 0.5rem 0.8rem; font-size: 0.95rem; } } .pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; } .form-status { margin: 0; font-weight: 600; min-height: 0; } .form-status:empty { display: none; } .form-status[data-state="error"] { color: var(--error); } .form-status[data-state="success"] { color: var(--success); } .form-status[data-state="info"] { color: var(--bubble-deep); } .inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: end; } @media (max-width: 30rem) { .inline-form { grid-template-columns: minmax(0, 1fr); } } /* ---------- Course sales page ---------- */ .course-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 56rem) { .course-hero-grid { grid-template-columns: minmax(0, 1fr); } } .buy-card { position: relative; border: 2px solid var(--charcoal); box-shadow: 0 6px 0 var(--charcoal); background: var(--paper); } .price { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.3rem; } .price-amount { font-family: var(--font-display); font-size: 3rem; line-height: 1; } .price-terms { color: var(--ink-soft); font-weight: 700; } .buy-card .price + .fine { margin-bottom: 1.25rem; padding-bottom: 1.1rem; border-bottom: 2px dotted var(--line-strong); } .buy-card .form { gap: 1.1rem; } .checklist { list-style: none; padding: 0; margin: 1rem 0 1.25rem; } .checklist li { position: relative; padding-left: 1.9rem; } .checklist li::before { content: ""; position: absolute; left: 0; top: 0.3rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--honey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%232b2724' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; border: 1.5px solid var(--charcoal); } .fine { font-size: 0.9rem; color: var(--ink-soft); margin: 0; } .module-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; } .module-list li { margin: 0; display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; align-items: center; padding: 1rem 1.2rem; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm); } @media (min-width: 62rem) { .module-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } .module-list li { grid-column: span 3; } .module-list li.extra { grid-column: span 2; align-items: start; } } @media (max-width: 30rem) { .module-list li { grid-template-columns: 2.6rem 1fr; gap: 0.8rem; align-items: start; padding: 0.9rem 1rem; } .module-list .mod-num { width: 2.6rem; height: 2.6rem; font-size: 1rem; } } .module-list .mod-num { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--bubble); border: 2px solid var(--charcoal); font-family: var(--font-display); font-size: 1.1rem; } .module-list li.extra .mod-num { background: var(--honey); font-size: 1.15rem; } .module-list h3 { margin: 0 0 0.2rem; font-size: 1.08rem; line-height: 1.3; } .module-list p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; } /* ---------- Prose (FAQ, legal, lessons) ---------- */ .prose { max-width: 46rem; } .prose h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3rem); } .prose h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.9rem); margin-top: 2.2rem; } .prose h3 { margin-top: 1.8rem; } .prose h4 { margin-top: 1.4rem; } .prose hr { border: 0; height: 0; border-top: 2px dotted var(--line-strong); margin: 2.25rem 0; } .prose blockquote { margin: 1.2rem 0; padding: 0.8rem 1.2rem; background: var(--bubble-soft); border-left: 5px solid var(--bubble-mid); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .prose blockquote p:last-child { margin-bottom: 0; } .prose code { background: var(--cream-deep); padding: 0.1em 0.35em; border-radius: 0.3em; font-size: 0.92em; } .table-wrap { overflow-x: auto; margin: 1.25rem 0; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; -webkit-overflow-scrolling: touch; } .table-wrap:focus-visible { outline-offset: 2px; } .prose table, .table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.96rem; } .prose th, .prose td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); } .prose th { background: var(--cream-deep); font-weight: 700; } .prose tr:last-child td { border-bottom: 0; } .legal-meta { color: var(--ink-soft); } .page-head { padding-block: clamp(1rem, 2.4vw, 1.9rem); position: relative; overflow: hidden; } .page-head h1 { margin-bottom: 0.4rem; } .page-head .lede { max-width: 40rem; margin-bottom: 0; } /* FAQ accordions */ .faq-list { display: grid; gap: 0.75rem; max-width: 50rem; margin-inline: auto; } .page-head.faq-head .wrap { max-width: calc(50rem + 2 * var(--gutter)); } .faq-item { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm); } .faq-item summary { list-style: none; cursor: pointer; padding: 1rem 3.2rem 1rem 1.2rem; font-weight: 700; font-size: 1.07rem; position: relative; border-radius: var(--radius-sm); /* The same --paper the .faq-item behind it already shows. It looks identical and it means a floating bubble cannot be drawn on this click target - see "the other half of the click rule" above. */ background: var(--paper); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { background: var(--cream-deep); } .faq-item summary:hover::after { background: var(--honey-soft); } .faq-item summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--bubble); border: 1.5px solid var(--charcoal); font-size: 1.2rem; line-height: 1; } .faq-item[open] summary::after { content: "\2212"; background: var(--honey); } .faq-item[open] summary { border-bottom: 1.5px dotted var(--line-strong); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .faq-body { padding: 1rem 1.2rem 0.4rem; } /* ---------- Social link banner (OFFER C) ---------- Shown at the top of the course page or the shop when somebody has arrived from a post. It says what the discount is and, above all, that there is nothing to type - the whole point of the link. Built by app.js (initSocialOffer), never present in the HTML, so a page with no offer has no empty box on it. */ .social-offer { margin: 0 auto 1.5rem; padding: 0.85rem 1.2rem; background: var(--bubble-soft); border: 1.5px solid var(--bubble-mid); border-radius: var(--radius-sm); color: var(--ink); } .social-offer-line { margin: 0; font-weight: 700; } /* The same band, but for the sentence shown when a link has finished, filled up or been switched off. It is news, not an offer, so it does not shout. */ .social-offer-quiet { background: var(--paper, #fff); border-color: var(--bubble-soft); } .social-offer-quiet .social-offer-line { font-weight: 400; } @media (max-width: 30rem) { .social-offer { padding: 0.75rem 0.9rem; } } /* ---------- Status card (success, unsubscribe, 404) ---------- */ .status-card { max-width: 40rem; margin-inline: auto; text-align: center; } .status-card .btn-row { justify-content: center; margin-bottom: 1.25rem; } .status-card .btn-row:last-child { margin-bottom: 0; } @media (max-width: 30rem) { .status-card .btn-row .btn, .lost .btn-row .btn { width: 100%; } } .status-card .form { text-align: left; } .loader { display: inline-flex; gap: 0.45rem; margin: 0.5rem 0 1.25rem; } .loader span { width: 1rem; height: 1rem; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0 20%, var(--bubble-mid) 80%); border: 1.5px solid rgba(27, 94, 133, 0.5); animation: loader-bob 1.2s ease-in-out infinite; } .loader span:nth-child(2) { animation-delay: 0.15s; } .loader span:nth-child(3) { animation-delay: 0.3s; } @keyframes loader-bob { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(-0.5rem); opacity: 1; } } .big-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 0.5rem; } /* ---------- Shop ---------- */ .shop-notice { margin-bottom: 1.5rem; } .shop-loading { display: flex; flex-direction: column; align-items: center; padding-block: 3rem; color: var(--ink-soft); } .shop-loading p { margin: 0; } /* "The shop opens soon" */ .shop-soon { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 1.5rem; align-items: start; } .soon-card { display: grid; gap: 1.5rem; } .soon-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: center; justify-items: center; padding: 1.25rem; border-radius: var(--radius-sm); background: var(--bubble-soft); } .soon-logos picture { display: flex; justify-content: center; width: 100%; } .soon-logos img { width: 100%; max-width: 15rem; height: auto; aspect-ratio: 1; object-fit: contain; } .soon-copy h2 { margin-bottom: 0.5rem; } .soon-copy p:last-child { margin-bottom: 0; } .soon-uplift h2 { margin-bottom: 1rem; } @media (max-width: 56rem) { .shop-soon { grid-template-columns: minmax(0, 1fr); } } /* Toolbar: category filters + bag button */ .shop-toolbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 0.75rem; margin: 0 calc(-1 * var(--gutter)) 0.5rem; padding: 0.65rem var(--gutter); background: var(--cream); border-bottom: 1px solid transparent; } .shop-filters { position: relative; display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 1; min-width: 0; } .filter-chip { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.6rem; padding: 0.35rem 0.9rem; font: inherit; font-weight: 700; font-size: 0.95rem; color: var(--charcoal); white-space: nowrap; background: #fff; border: 2px solid var(--line-strong); border-radius: 999px; cursor: pointer; } .filter-chip:hover { border-color: var(--charcoal); } .filter-chip[aria-pressed="true"] { background: var(--honey); border-color: var(--charcoal); } .filter-count { display: inline-grid; place-items: center; min-width: 1.6rem; padding: 0 0.35rem; border-radius: 999px; background: var(--cream-deep); font-size: 0.8rem; line-height: 1.5; } .filter-chip[aria-pressed="true"] .filter-count { background: rgba(255, 255, 255, 0.6); } .bag-button { flex: none; min-height: 2.6rem; padding: 0.35rem 0.95rem; box-shadow: 0 2px 0 var(--charcoal); } /* The floating bag (26 Sept 2026): always on screen on the catalogue and on every product page. */ .bag-floating { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: var(--z-header); min-height: 3rem; padding: 0.45rem 1.1rem; box-shadow: 0 6px 18px rgba(43, 39, 36, 0.28), 0 2px 0 var(--charcoal); } .bag-floating[hidden] { display: none; } #shop-catalog, #shop-detail { padding-bottom: 4.5rem; } .bag-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.3rem; border-radius: 999px; background: var(--honey); color: var(--charcoal); font-size: 0.85rem; } .shop-count { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.95rem; } /* 23 Sept 2026: logo, color and price-order tools beside the category chips. They wrap onto their own right-aligned line when the chips take the width, and scroll sideways on a phone like the chips do. */ .shop-toolbar { flex-wrap: wrap; } /* The slogan picker at the top of the Beehive (4 Oct 2026). */ .shop-slogans { margin: 0 0 1rem; padding: 0.85rem 1rem; border: 1px solid var(--line, #e6dcc8); border-radius: 14px; background: #fffaf0; } .shop-slogans-label { margin: 0 0 0.55rem; font-weight: 700; } .slogan-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .slogan-chip { font-style: italic; } .slogan-chip-plain { font-style: normal; } .slogan-field select { width: 100%; } .slogan-side { margin-top: 0.6rem; } .slogan-side-option { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0; cursor: pointer; } .shop-tools { order: 3; flex: 1 0 100%; display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem 0.9rem; flex-wrap: wrap; } .shop-toolbar > .bag-button { order: 2; } .shop-tool { display: flex; align-items: center; gap: 0.4rem; } .logo-tool { gap: 0.4rem; } .logo-chip-img { padding: 0.2rem 0.55rem; } .logo-tool-img { display: block; width: auto; height: 2rem; } .select-tool label { font-weight: 700; font-size: 0.9rem; color: var(--charcoal); } .select-tool select { min-height: 2.6rem; width: auto; min-width: 9.5rem; padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.95rem; border-radius: 999px; } .shop-empty { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; background: #fff; border: 2px dashed var(--line-strong); border-radius: 1rem; } .shop-empty p { margin: 0 0 1rem; font-weight: 700; } @media (max-width: 40rem) { .shop-toolbar { position: static; } .shop-tools { justify-content: flex-start; } .select-tool { flex: 1 1 9rem; } .select-tool select { flex: 1; min-width: 0; } } @media (max-width: 40rem) { .shop-toolbar { align-items: flex-start; } .shop-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0.2rem 0.25rem 0.3rem; margin: -0.2rem 0 -0.3rem -0.25rem; scroll-padding-inline: 0.25rem; mask-image: linear-gradient(to right, #000 85%, transparent); -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); } .shop-filters::-webkit-scrollbar { display: none; } .filter-chip { min-height: 2.5rem; padding: 0.3rem 0.75rem; font-size: 0.92rem; } .bag-button > span:first-of-type { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bag-button { padding: 0.35rem 0.7rem; } } /* Product grid */ .product-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .product-grid li + li { margin: 0; } @media (max-width: 68rem) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 48rem) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } } .product-card { padding: 0; overflow: hidden; display: flex; transition: transform 0.15s ease, box-shadow 0.15s ease; } .product-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(43, 39, 36, 0.06), 0 16px 34px -14px rgba(43, 39, 36, 0.28); } .product-link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; border-radius: var(--radius); } .product-link:hover { color: inherit; } .product-link:focus-visible { outline-offset: -3px; } .product-media { position: relative; border-bottom: 1.5px solid var(--line); } .product-img-frame { aspect-ratio: 1; display: grid; place-items: center; background: #fff; overflow: hidden; } .product-img-frame.has-logo { background: radial-gradient(circle at 50% 42%, #fff 0 30%, var(--bubble-soft) 75%); } .product-img-frame.has-logo.is-script { background: radial-gradient(circle at 50% 42%, #fff 0 30%, #fdeccb 80%); } .product-img { width: 100%; height: 100%; object-fit: contain; } .product-img.is-logo { width: 62%; height: 62%; } .product-badge { position: absolute; top: 0.6rem; left: 0.6rem; } .product-body { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; flex: 1; } .product-cat { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--honey-deep); } .product-name { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; line-height: 1.3; margin: 0; } .product-price { margin: 0.1rem 0 0; font-family: var(--font-display); font-size: 1.25rem; } .product-meta { margin: auto 0 0; padding-top: 0.35rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.55rem; font-size: 0.85rem; color: var(--ink-soft); } .card-swatches { display: inline-flex; align-items: center; gap: 0.2rem; } .card-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 1px solid rgba(43, 39, 36, 0.35); background: #fff; } .card-dot-more { font-size: 0.75rem; font-weight: 700; margin-left: 0.1rem; } @media (max-width: 30rem) { .product-body { padding: 0.7rem 0.75rem 0.8rem; } .product-name { font-size: 0.98rem; } .product-price { font-size: 1.1rem; } .product-cat { font-size: 0.7rem; } .product-badge { top: 0.45rem; left: 0.45rem; font-size: 0.7rem; padding: 0.15rem 0.5rem; } } /* Product detail */ .detail-back { margin: 0 0 1rem; } .back-link { font-weight: 700; } .detail-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } .detail-media { position: sticky; top: 1rem; } .detail-img-frame { aspect-ratio: 1; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .detail-img-frame.has-logo { background: radial-gradient(circle at 50% 42%, #fff 0 30%, var(--bubble-soft) 75%); } .detail-img-frame.has-logo.is-script { background: radial-gradient(circle at 50% 42%, #fff 0 30%, #fdeccb 80%); } .detail-img { width: 100%; height: 100%; object-fit: contain; } .detail-img.is-logo { width: 60%; height: 60%; } /* Other views of the same product. Printful sends the back and the other print spots too; the strip only appears when there really is more than one picture, so a single-photo product is unchanged. */ .detail-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.6rem; } .detail-thumbs[hidden] { display: none; } .detail-thumb { padding: 0; border: 2px solid transparent; border-radius: 0.6rem; background: var(--card, #fff); line-height: 0; cursor: pointer; overflow: hidden; box-shadow: 0 1px 3px rgba(60, 40, 5, 0.18); } .detail-thumb img { width: 4.5rem; height: 4.5rem; object-fit: cover; display: block; } .detail-thumb:hover { border-color: var(--comb-base, #e7c074); } .detail-thumb:focus-visible { outline: 3px solid var(--focus, #7a4d02); outline-offset: 2px; } .detail-thumb.is-on { border-color: var(--ink, #3b2a08); } @media (max-width: 34rem) { .detail-thumb img { width: 3.6rem; height: 3.6rem; } } .detail-caption { margin: 0.6rem 0 0; text-align: center; font-size: 0.92rem; color: var(--ink-soft); } .detail-title { font-size: clamp(2rem, 1.3rem + 2.4vw, 2.9rem); margin-bottom: 0.3rem; } .detail-title:focus { outline: none; } .detail-price { font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 0.75rem; } .detail-desc { color: var(--ink-soft); } /* The FTC disclosures: fibre content and country of origin. Kept legible rather than fine print - the rule asks for clear and conspicuous, and small grey text at the bottom is neither. */ .detail-specs { margin: 0.9rem 0 0; display: grid; gap: 0.35rem; } .detail-specs .spec-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; font-size: 0.95rem; } .detail-specs .spec-key { font-weight: 600; color: var(--ink); } .detail-specs .spec-val { color: var(--ink-soft); } @media (max-width: 34rem) { .detail-specs .spec-row { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } } /* Size chart on a product page: a closed accordion under Materials/Origin, table scrolls sideways on a phone. */ .size-chart { margin: 1rem 0 0; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm); } .size-chart summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 700; background: var(--paper); border-radius: var(--radius-sm); } .size-chart summary:hover { background: var(--cream-deep); } .size-chart[open] summary { border-bottom: 1.5px dotted var(--line-strong); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .size-chart-scroll { overflow-x: auto; padding: 0.6rem 1rem 0; } .size-chart table { border-collapse: collapse; font-size: 0.92rem; min-width: 100%; } .size-chart th, .size-chart td { padding: 0.35rem 0.55rem; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; } .size-chart thead th { font-weight: 700; color: var(--ink); } .size-chart tbody th { text-align: left; font-weight: 600; color: var(--ink); } .size-chart td { color: var(--ink-soft); } .size-chart .fine { margin: 0.6rem 1rem 0.8rem; } .detail-form { gap: 1.2rem; margin-top: 1.25rem; } .detail-static { margin: 0; } .detail-static-value { margin: 0; min-height: 3rem; display: flex; align-items: center; } .detail-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: 0.75rem; align-items: start; } .detail-fine { margin-top: 1.25rem; } @media (max-width: 52rem) { .detail-grid { grid-template-columns: minmax(0, 1fr); } .detail-media { position: static; max-width: 30rem; width: 100%; margin-inline: auto; } } .design-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .design-option { position: relative; display: block; cursor: pointer; } .design-option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .design-option-body { display: flex; align-items: center; gap: 0.6rem; height: 100%; padding: 0.5rem 0.75rem 0.5rem 0.5rem; background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); font-weight: 700; line-height: 1.2; } .design-option-body img { width: 3rem; height: 3rem; object-fit: contain; flex: none; } .design-option:hover .design-option-body { border-color: var(--charcoal); } .design-option input:checked + .design-option-body { border-color: var(--charcoal); background: #fdf3dc; box-shadow: inset 0 0 0 2px var(--honey); } .design-option input:focus-visible + .design-option-body { outline: 3px solid var(--focus); outline-offset: 2px; } @media (max-width: 24rem) { .design-option-body { flex-direction: column; text-align: center; padding: 0.5rem; } } .swatch-set legend { font-weight: 700; } .swatch-current { font-weight: 400; } .swatches { display: flex; flex-wrap: wrap; gap: 0.55rem; } .swatch { position: relative; display: block; cursor: pointer; } .swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .swatch-chip { display: block; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #fff; border: 1.5px solid rgba(43, 39, 36, 0.35); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px transparent; } .swatch-chip.no-hex { background: repeating-linear-gradient(45deg, #fff 0 4px, var(--cream-deep) 4px 8px); } .swatch:hover .swatch-chip { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--line-strong); } .swatch input:checked + .swatch-chip { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--charcoal); } .swatch input:focus-visible + .swatch-chip { outline: 3px solid var(--focus); outline-offset: 7px; } .swatch.is-unapproved .swatch-chip { opacity: 0.55; background-image: linear-gradient(135deg, transparent 46%, var(--error) 46% 54%, transparent 54%); } /* Bag drawer */ html.drawer-open { overflow: hidden; } .cart-drawer { margin: 0 0 0 auto; padding: 0; border: 0; width: min(28rem, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; background: var(--paper); color: var(--ink); box-shadow: -20px 0 50px -20px rgba(43, 39, 36, 0.45); border-left: 2px solid var(--charcoal); } .cart-drawer[open] { display: flex; } .cart-drawer::backdrop { background: rgba(43, 39, 36, 0.45); } .drawer-inner { display: flex; flex-direction: column; gap: 1rem; width: 100%; padding: 1.1rem clamp(1rem, 4vw, 1.5rem) 1.5rem; overflow-y: auto; } .drawer-inner > * { flex-shrink: 0; } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1.5px solid var(--line); } .drawer-head h2 { margin: 0; font-size: 1.8rem; } .drawer-head h2:focus { outline: none; } .drawer-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--charcoal); background: #fff; color: var(--charcoal); cursor: pointer; } .drawer-close:hover { background: var(--cream-deep); } .drawer-added { padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--success-bg); } .drawer-empty p { margin-bottom: 0.75rem; } .cart-items { list-style: none; padding: 0; margin: 0; } .cart-items li + li { margin: 0; } .cart-line { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: start; padding: 0.85rem 0; border-bottom: 1px dotted var(--line-strong); } .cart-thumb .cart-img-frame { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; overflow: hidden; } .cart-img-frame.has-logo { background: var(--bubble-soft); } .cart-img { width: 100%; height: 100%; object-fit: contain; } .cart-img.is-logo { width: 78%; height: 78%; } .cart-line-info p { margin: 0; } .cart-line-name { font-weight: 700; line-height: 1.3; } .cart-line-detail, .cart-line-each { font-size: 0.9rem; color: var(--ink-soft); } .cart-line-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.4rem; } .cart-line-price { font-weight: 700; white-space: nowrap; } .cart-remove { font-size: 0.9rem; } .qty { display: inline-flex; align-items: center; gap: 0.35rem; } .qty button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--charcoal); background: #fff; font: inherit; font-weight: 700; cursor: pointer; } .qty button[disabled] { opacity: 0.45; cursor: not-allowed; } .qty output { min-width: 1.5rem; text-align: center; font-weight: 700; } .cart-summary { display: grid; gap: 0.4rem; } .cart-total, .cart-row { display: flex; justify-content: space-between; gap: 1rem; } /* Standard / Express choice in the bag (26 Sept 2026). */ .cart-speed { display: grid; gap: 0.6rem; } .cart-speed .speed-choice { padding: 0.6rem 0.75rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; } .cart-speed .speed-choice:has(input:checked) { border-color: var(--bubble-deep); } .cart-speed .speed-choice .fine { display: inline; } .cart-speed .speed-note { margin: 0; } .cart-total { font-weight: 700; font-size: 1.1rem; } .cart-row { color: var(--ink-soft); } .cart-grand { padding-top: 0.4rem; border-top: 1.5px solid var(--line); } .cart-summary > .fine { margin: 0.4rem 0 0.2rem; } .cart-form { margin-top: 0.5rem; } @media (max-width: 30rem) { .cart-drawer { border-left: 0; } .cart-line { grid-template-columns: 3.75rem minmax(0, 1fr) auto; gap: 0.65rem; } .cart-thumb .cart-img-frame { width: 3.75rem; height: 3.75rem; } } /* ---------- Course player ---------- */ .learn-main { padding-block: clamp(1rem, 2.4vw, 1.9rem); } .learn-layout { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; } @media (max-width: 56rem) { .learn-layout { grid-template-columns: minmax(0, 1fr); } .learn-aside { min-width: 0; } } .learn-aside { position: sticky; top: 1rem; } @media (max-width: 56rem) { .learn-aside { position: static; } } .learn-aside .card { padding: 1.1rem; } @media (min-width: 56.01rem) { .learn-aside .card { max-height: calc(100vh - 2rem); overflow-y: auto; } } .aside-path { margin: 0 0 0.15rem; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; } .aside-sub { margin: 0 0 0.75rem; color: var(--ink-soft); font-size: 0.95rem; } .progress { height: 0.6rem; background: var(--cream-deep); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); } .progress-bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--honey), #f09d1e); border-radius: 999px; transition: width 0.3s ease; } .progress-label { font-size: 0.88rem; color: var(--ink-soft); margin: 0.35rem 0 0.9rem; } .toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; } .toc li { margin: 0; } .toc button { width: 100%; display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.55rem; align-items: center; /* --paper, not none: the .card behind it is --paper so it looks identical, and an opaque row is one a floating bubble cannot be drawn on. See "the other half of the click rule". */ padding: 0.45rem 0.55rem; border: 0; border-radius: 0.6rem; background: var(--paper); font: inherit; color: var(--ink); text-align: left; cursor: pointer; line-height: 1.25; } .toc button:hover { background: var(--cream-deep); } .toc button[aria-current="page"] { background: var(--bubble); font-weight: 700; } .toc .toc-num { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.82rem; font-weight: 700; background: #fff; border: 1.5px solid var(--line-strong); } .toc .is-done .toc-num { background: var(--honey); border-color: var(--charcoal); } .toc .toc-state { display: block; font-size: 0.8rem; color: var(--success); font-weight: 700; margin-top: 0.1rem; } .aside-actions { display: grid; gap: 0.3rem; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dotted var(--line-strong); font-size: 0.95rem; } .aside-actions .btn-link { text-align: left; } .toc-toggle { display: none; } @media (max-width: 56rem) { .toc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.9rem; margin-top: 0.1rem; font: inherit; font-weight: 700; color: var(--charcoal); background: #fff; cursor: pointer; border: 2px solid var(--charcoal); border-radius: 999px; box-shadow: 0 2px 0 var(--charcoal); } .toc-toggle::after { content: "+"; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bubble); border: 1.5px solid var(--charcoal); line-height: 1; } .toc-toggle[aria-expanded="true"]::after { content: "\2212"; background: var(--honey); } .toc-toggle-current { font-weight: 400; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; text-align: left; } .learn-aside.is-collapsed .toc-panel { display: none; } .toc-panel { margin-top: 0.8rem; } .progress-label { margin-bottom: 0.6rem; } } @media (max-width: 56rem) { .toc { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); } } .lesson { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 2.75rem); box-shadow: var(--shadow); min-height: 20rem; } .lesson-kicker { margin: 0 0 0.4rem; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--honey-deep); } .lesson h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); } @media (max-width: 30rem) { .lesson { padding: 1.25rem 1.1rem 1.5rem; } .lesson-actions { flex-direction: column-reverse; align-items: stretch; } .lesson-actions .btn { width: 100%; } .lesson-actions > span:empty { display: none; } .quiz-cta .btn { width: 100%; } } .lesson .prose { max-width: 44rem; } .keypoint { position: relative; margin: 0 0 1.75rem; padding: 1.1rem 1.25rem 1.1rem 1.25rem; background: var(--honey-soft); border: 2px solid var(--charcoal); border-radius: var(--radius-sm); box-shadow: 0 4px 0 var(--charcoal); } .keypoint p { margin: 0; font-size: 1.08rem; } .keypoint .keypoint-label { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.2rem; } .lesson-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; align-items: center; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 2px dotted var(--line-strong); } .quiz-cta { margin: 2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--bubble-soft); border: 1.5px solid rgba(27, 94, 133, 0.3); border-radius: var(--radius-sm); } .quiz-cta p { margin: 0; flex: 1 1 14rem; } /* Read, listen, or watch (7 Oct 2026). The box above each lesson. */ .media-box { margin: 0 0 1.75rem; padding: 1rem 1.15rem 1.15rem; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm); } .media-pitch { margin: 0 0 0.7rem; font-weight: 700; } .media-modes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; } .media-mode { font: inherit; font-weight: 700; padding: 0.45rem 1.1rem; border-radius: 999px; border: 2px solid var(--charcoal); background: var(--paper); color: var(--charcoal); cursor: pointer; min-height: 44px; } .media-mode.is-on { background: var(--honey-soft); box-shadow: 0 3px 0 var(--charcoal); } .media-mode:focus-visible { outline: 3px solid var(--bubble-deep); outline-offset: 2px; } .media-hint { margin: 0; } .media-avatars { border: 0; margin: 0 0 0.9rem; padding: 0; } .media-avatars legend { font-weight: 700; margin-bottom: 0.45rem; padding: 0; } .media-avatar { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0.5rem 0.5rem 0; padding: 0.4rem 0.8rem; border: 1.5px solid var(--line-strong); border-radius: 999px; cursor: pointer; min-height: 44px; } .media-avatar.is-on { border-color: var(--charcoal); background: var(--bubble-soft); } .media-twin-note { margin: 0.2rem 0 0; font-size: 0.92rem; } .media-player-wrap { display: grid; gap: 0.5rem; } .media-player { width: 100%; } .media-video { max-height: 78vh; background: #111; border-radius: var(--radius-sm); } /* Pink hoodie by the lake: show the top 1060 of 1280 rows (cut at the ends of her hair). The box keeps the controls; the picture fills it from the top and the bottom of the frame falls outside. */ .media-video.media-crop-bottom { width: min(100%, calc(78vh * 720 / 1060)); aspect-ratio: 720 / 1060; height: auto; max-height: none; justify-self: center; object-fit: cover; object-position: 50% 0; } .media-part, .media-twin-tag { margin: 0; font-size: 0.92rem; } .media-nav { margin: 0; } @media print { .media-box { display: none; } } .picker-grid .path-card { text-align: left; } .picker-grid .path-card .btn { margin-top: auto; align-self: flex-start; } .picker-grid .path-card.is-current { outline: 3px solid var(--bubble-deep); outline-offset: 3px; } /* Quiz */ .quiz-list { display: grid; gap: 1.25rem; counter-reset: q; } .q { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem 1.2rem; } .q legend { display: block; font-weight: 700; font-size: 1.08rem; margin-bottom: 0.8rem; float: left; width: 100%; } .q legend + * { clear: both; } .q-count { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.15rem; } .q-options { display: grid; gap: 0.5rem; } .q-opt { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.7rem; align-items: center; width: 100%; padding: 0.6rem 0.8rem; border: 2px solid var(--line-strong); border-radius: 0.8rem; background: var(--paper); font: inherit; color: var(--ink); text-align: left; cursor: pointer; line-height: 1.35; } .q-opt:hover { border-color: var(--charcoal); background: #fff; } .q-letter { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--cream-deep); border: 1.5px solid var(--line-strong); } .q-tag { font-size: 0.8rem; font-weight: 700; white-space: nowrap; } .q-tag:empty { display: none; } @media (max-width: 30rem) { .q-opt { grid-template-columns: 2rem minmax(0, 1fr); row-gap: 0.15rem; } .q-tag { grid-column: 2; } } .q.is-answered .q-opt { cursor: default; } .q.is-answered .q-opt:hover { border-color: var(--line-strong); background: var(--paper); } .q-opt.is-answer, .q.is-answered .q-opt.is-answer:hover { border-color: var(--success); background: var(--success-bg); } .q-opt.is-answer .q-letter { background: var(--success); color: #fff; border-color: var(--success); } .q-opt.is-wrong, .q.is-answered .q-opt.is-wrong:hover { border-color: var(--error); background: var(--error-bg); } .q-opt.is-wrong .q-letter { background: var(--error); color: #fff; border-color: var(--error); } .q-opt.is-answer .q-tag { color: var(--success); } .q-opt.is-wrong .q-tag { color: var(--error); } .q-feedback { margin-top: 0.85rem; padding: 0.85rem 1rem; border-radius: 0.8rem; background: var(--cream); border: 1.5px dashed var(--line-strong); } .q-feedback p { margin: 0 0 0.5rem; } .q-verdict { font-weight: 700; } .q-verdict.good { color: var(--success); } .q-verdict.bad { color: var(--error); } .quiz-summary { margin-top: 1.5rem; } /* Certificate */ .cert-controls { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1.25rem; } @media (max-width: 36rem) { .cert-controls { grid-template-columns: minmax(0, 1fr); } } .certificate { position: relative; overflow: hidden; margin: 1.5rem auto 0; max-width: 40rem; aspect-ratio: 8.5 / 11; padding: clamp(1.5rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem); background: #fffdf6; border: 2px solid var(--charcoal); border-radius: 0.5rem; box-shadow: inset 0 0 0 10px #fffdf6, inset 0 0 0 12px var(--honey), var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .certificate .bubble { animation: none; } .certificate .c1 { width: 9rem; height: 9rem; top: -2.5rem; right: -2.5rem; } .certificate .c2 { width: 3rem; height: 3rem; top: 5.5rem; right: 3.2rem; } .certificate .c3 { width: 6rem; height: 6rem; bottom: -1.8rem; left: -1.8rem; } .certificate > *:not(.bubble) { position: relative; } .cert-brand { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-bottom: 0.6rem; font-family: var(--font-display); font-size: 1.1rem; } .cert-brand .brand-mark { width: 3.6rem; height: 3.6rem; } .certificate h2 { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem); margin: 0.2rem 0 0.8rem; } .cert-line { margin: 0.2rem 0; color: var(--ink-soft); } .cert-name { display: block; min-width: 70%; margin: 0.4rem auto 0.6rem; padding: 0 0.5rem 0.25rem; font-family: var(--font-display); font-size: clamp(1.6rem, 1rem + 3vw, 2.5rem); line-height: 1.2; border-bottom: 2px solid var(--charcoal); min-height: 2.4em; display: flex; align-items: flex-end; justify-content: center; } .cert-course { font-weight: 700; font-size: 1.15rem; margin: 0.3rem 0 0; } .cert-sub { margin: 0 0 0.8rem; color: var(--ink-soft); font-style: italic; } .cert-date { margin: 0.4rem 0 1rem; } .cert-date strong { display: inline-block; min-width: 9rem; border-bottom: 1.5px solid var(--charcoal); } .cert-closing { font-size: 0.95rem; max-width: 30rem; margin: 0 auto 0.4rem; } .cert-sign { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 0.6rem; } .cert-foot { font-size: 0.78rem; color: var(--ink-soft); margin: 0; } @media (max-width: 36rem) { .certificate { aspect-ratio: auto; } } /* ---------- Page-level helpers ---------- */ .tint-blue { background: transparent; border-block: 0; } .center-row { justify-content: center; margin-top: 1.5rem; } .steps { list-style: none; padding: 0; margin: 0; } .steps li + li { margin-top: 0; } .after-steps { max-width: 40rem; margin: 2rem auto 0; } .brand-mark-lg { width: 5.5rem; height: 5.5rem; margin: 0 auto 0.75rem; display: block; } .h3-size { font-family: var(--font-body); font-weight: 700; font-size: 1.35rem; } .buy-title { font-size: 1.6rem; margin-bottom: 0.5rem; } .canceled-note { margin-bottom: 1.25rem; } .inline-form .form-status { grid-column: 1 / -1; } .status-card .inline-form { margin: 1.25rem 0; } .uplift-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (max-width: 52rem) { .uplift-grid { grid-template-columns: minmax(0, 1fr); } } .uplift-done { text-align: center; padding-block: 1rem; } .uplift-done h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); } /* Weekly Uplift day picker: seven even pills in one row, or four + three when the form is narrow (a phone, or the smaller signup card on the shop page). */ fieldset:has(> .pills-days) { container-type: inline-size; } .pills-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } .pills-days .pill span { display: block; text-align: center; padding-inline: 0.2rem; white-space: nowrap; } @container (min-width: 27rem) { .pills-days { grid-template-columns: repeat(7, minmax(0, 1fr)); } } /* The Weekly Uplift offer page: one code, big enough to read off a phone at arm's length. The code line wraps rather than overflowing, and it is selectable so anyone whose browser blocks the copy button can still highlight it by hand. */ .offer-page { position: relative; overflow: hidden; } .offer-card { border: 2px solid var(--charcoal); box-shadow: 0 6px 0 var(--charcoal); } .offer-card .eyebrow { margin-bottom: 0.5rem; } .offer-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: clamp(1.5rem, 1rem + 4.5vw, 2.4rem); font-weight: 700; line-height: 1.25; letter-spacing: 0.06em; color: var(--charcoal); background: var(--cream-deep); border: 2px dashed var(--honey); border-radius: var(--radius-sm); padding: 0.85rem 0.6rem; margin: 1rem auto 1.25rem; max-width: 22rem; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; } .offer-code:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .offer-limits { color: var(--ink-soft); } .faq-more { max-width: 50rem; margin: 2rem auto 0; } @media (max-width: 30rem) { .faq-item summary { font-size: 1rem; padding: 0.9rem 3rem 0.9rem 1rem; } .faq-body { padding: 0.9rem 1rem 0.3rem; } } .faq-sign { font-family: var(--font-display); margin: 0; } .legal-prose { margin-inline: auto; } .legal-prose > h1 + p { color: var(--ink-soft); } .lost { text-align: center; position: relative; z-index: auto; } /* ---------- Owner decisions, Sept 11, 2026: offers, signup, group codes, redeem ---------- */ textarea { width: 100%; padding: 0.6rem 0.85rem; font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); resize: vertical; } textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--charcoal); } /* Royal Seal in the home hero */ .hero-seal { border-radius: 50%; filter: drop-shadow(0 14px 26px rgba(43, 39, 36, 0.22)); } /* Simple free signup (home page, course page "Hear first") */ .signup-card { position: relative; overflow: hidden; border-radius: calc(var(--radius) * 1.5); background: var(--bubble); border: 2px solid var(--charcoal); box-shadow: 0 6px 0 var(--charcoal); padding: clamp(1.5rem, 4.5vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: center; } .signup-card > *:not(.bubbles) { position: relative; z-index: auto; } /* auto: tree order already clears .bubbles */ .signup-card .bubble.b1 { width: 6.5rem; height: 6.5rem; top: -2.6rem; left: auto; right: -2.2rem; } .signup-card .bubble.b4 { width: 3rem; height: 3rem; bottom: -1rem; right: 46%; } .signup-card .bubble.b5 { width: 1.4rem; height: 1.4rem; top: auto; bottom: 1.2rem; left: 1.4rem; right: auto; } .signup-copy h2 { margin-bottom: 0.5rem; } .signup-copy p:last-child { margin-bottom: 0; max-width: 34rem; } .signup-form-wrap { background: var(--paper); border: 2px solid var(--charcoal); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.5rem); } .signup-form { gap: 0.9rem; } .signup-fine a { font-weight: 700; } .signup-done h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin-bottom: 0.4rem; } .signup-done p:last-child { margin-bottom: 0; } @media (max-width: 52rem) { .signup-card { grid-template-columns: minmax(0, 1fr); } .signup-card .bubble.b4 { display: none; } } @media (max-width: 40rem) { .signup-card .bubbles .bubble.b1 { display: block; width: 4.5rem; height: 4.5rem; top: -2rem; right: -1.6rem; } .signup-card .bubbles .bubble.b5 { display: none; } } .bee-kind + .section-tight, .tint-blue + .section-tight { padding-top: clamp(2rem, 5vw, 3.5rem); } /* Home merch: the Royal Seal leads, the Iridescent Script is the smaller second design */ .design-duo-lead { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; } .design-duo-lead .design-tile-script img { max-width: 8.5rem; } .design-duo-lead .design-tile-script .design-tile-name { font-weight: 600; font-size: 0.95rem; color: var(--ink-soft); } .soon-logos-lead { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .soon-logos-lead .soon-logo-secondary img { max-width: 8.5rem; } /* Offers on the course page */ .offer-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--honey-deep); margin: 0 0 0.25rem; } .sales-closed p { margin-bottom: 0.9rem; } .soon-line { margin: 0 0 0.6rem; } .soon-line .badge { font-size: 0.9rem; padding: 0.3rem 0.85rem; } .buy-card .offer-more { margin-top: 1.1rem; padding-top: 1rem; border-top: 2px dotted var(--line-strong); } .adaptive-section { background: transparent; border-block: 0; } .tint-blue + .adaptive-section, .adaptive-section + .tint-blue { border-top: 0; } .adaptive-grid { display: grid; gap: 1.25rem; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "who how" "offer how"; } .adaptive-who { grid-area: who; } .adaptive-how { grid-area: how; height: 100%; } .adaptive-offer { grid-area: offer; } /* The Adaptive Path price sits behind a click, on the owner's instruction (21 September 2026): somebody reading about the Active or Seated path should not have another price put in front of them. What is NOT hidden is who the path is for and how it is built - hiding the accessibility information from the very people it was written for would be the wrong thing to hide. */ .adaptive-price-reveal { grid-area: offer; } .adaptive-price-reveal > summary { list-style: none; cursor: pointer; display: block; padding: 1rem 2.75rem 1rem 1.15rem; position: relative; border: 2px dashed var(--charcoal); border-radius: var(--radius-sm); background: var(--paper); } .adaptive-price-reveal > summary::-webkit-details-marker { display: none; } .adaptive-price-reveal > summary:hover { background: var(--bubble-soft); } .adaptive-price-reveal > summary:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; } .adaptive-price-reveal .reveal-title { display: block; font-weight: 700; font-size: 1.05rem; } .adaptive-price-reveal .reveal-sub { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.2rem; } .adaptive-price-reveal > summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; font-weight: 700; } .adaptive-price-reveal[open] > summary { border-style: solid; margin-bottom: 1rem; } .adaptive-price-reveal[open] > summary::after { content: "\2212"; } .adaptive-price-reveal[open] .reveal-sub { display: none; } @media (max-width: 52rem) { .adaptive-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "how" "offer"; } .adaptive-how { height: auto; } } .adaptive-price-reveal .adaptive-offer { grid-area: auto; } .adaptive-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin-bottom: 0.2rem; } .adaptive-card .checklist { margin-bottom: 0.5rem; } .checklist-tight li + li { margin-top: 0.45em; } .honor-note { margin: 1rem 0 0; padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: var(--bubble-soft); border: 1.5px solid rgba(27, 94, 133, 0.3); } .offer-card { border: 2px solid var(--charcoal); box-shadow: 0 6px 0 var(--charcoal); display: grid; gap: 1rem; } .offer-card-head .fine { margin-bottom: 0; } .offer-card-action { padding-top: 1rem; border-top: 2px dotted var(--line-strong); } .offer-title { font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; margin: 0 0 0.4rem; } .offer-card .price { margin-bottom: 0.5rem; } .group-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (max-width: 52rem) { .group-grid { grid-template-columns: minmax(0, 1fr); } } .group-card { border: 2px solid var(--charcoal); box-shadow: 0 6px 0 var(--charcoal); } .pack-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .pack-list li + li { margin: 0; } .pack { display: grid; gap: 0.1rem; padding: 0.85rem 1rem; height: 100%; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); } .pack-seats { font-weight: 700; } .pack-price { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; } .pack-each { font-size: 0.9rem; color: var(--ink-soft); } .pack-options { margin-bottom: 0; } .pack-option { position: relative; display: block; cursor: pointer; } .pack-option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pack-option:hover .pack { border-color: var(--charcoal); } .pack-option input:checked + .pack { border-color: var(--charcoal); background: #fdf3dc; box-shadow: inset 0 0 0 2px var(--honey); } .pack-option input:focus-visible + .pack { outline: 3px solid var(--focus); outline-offset: 2px; } .group-closed { padding-top: 1rem; border-top: 2px dotted var(--line-strong); } .group-how h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; } .how-steps { list-style: none; counter-reset: how; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.75rem; } .how-steps li { counter-increment: how; position: relative; padding-left: 2.6rem; margin: 0; min-height: 1.9rem; } .how-steps li::before { content: counter(how); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; background: radial-gradient(circle at 30% 26%, #fff 0 10%, rgba(255, 255, 255, 0) 22%), var(--honey-soft); border: 2px solid var(--charcoal); } @media (max-width: 30rem) { .pack-list { gap: 0.55rem; } .pack { padding: 0.7rem 0.75rem; } .pack-price { font-size: 1.55rem; } } .access-redeem { margin-top: 1rem; } /* Long email addresses and links wrap instead of pushing the page sideways on phones. */ [data-success-email], #redeem-done-email, #redeem-again-email, #uplift-done-detail, [data-signup-done-detail], #learn-email { overflow-wrap: anywhere; } .code-sample { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.92em; white-space: nowrap; } /* Group pack success page: the codes */ .group-success { max-width: 46rem; } .group-success .notice, .group-success .code-tools, .group-success .code-list, .group-success .code-plain, .group-next { text-align: left; } .group-save { margin-bottom: 1.1rem; } .code-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.9rem; } .code-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.5rem; } .code-list li + li { margin: 0; } .code-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.5rem 0.6rem 0.5rem 0.75rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; } .code-num { font-weight: 700; color: var(--ink-soft); text-align: right; font-size: 0.9rem; } .code-value { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: 1.05rem; letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; } .code-plain textarea { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; line-height: 1.5; } .group-next { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px dotted var(--line-strong); } .group-next h2 { margin-bottom: 0.75rem; } @media (max-width: 30rem) { .code-item { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; } .code-num { display: none; } .code-item { padding: 0.45rem 0.45rem 0.45rem 0.65rem; } .code-value { font-size: min(0.9rem, 3.4vw); letter-spacing: 0; } .code-copy { padding-inline: 0.75rem; } } /* Redeem page */ .redeem-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (max-width: 52rem) { .redeem-grid { grid-template-columns: minmax(0, 1fr); } } .redeem-card { border: 2px solid var(--charcoal); box-shadow: 0 6px 0 var(--charcoal); } #redeem-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; } .redeem-done { text-align: center; padding-block: 0.5rem; } .redeem-done h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); } .redeem-done .btn-row { justify-content: center; margin-bottom: 1rem; } .redeem-side .checklist { margin-top: 0; } /* Weekly Uplift page note, course player with one path */ .page-head-note { margin: 0.75rem 0 0; font-weight: 700; color: var(--ink); max-width: 40rem; } .picker-grid.picker-single { grid-template-columns: minmax(0, 30rem); justify-content: center; } #learn-picker-notice { max-width: 40rem; margin: 1rem auto 0; } @media print { .code-tools, .code-copy, .code-plain, .group-success .brand-mark, .group-save { display: none !important; } .code-item { border: 0; border-bottom: 1px solid #999; border-radius: 0; } } /* ---------- Footer ---------- */ .site-footer { color: #f4ecdd; margin-top: clamp(0.75rem, 2vw, 1.5rem); /* 90% charcoal over the comb: 10% honeycomb texture, which still leaves #d9cdb8 at 7.0:1 and #f4ecdd at 9.4:1 against the lightest pixel behind. */ background-color: var(--charcoal); background-image: linear-gradient(rgba(43, 39, 36, 0.9), rgba(43, 39, 36, 0.9)), url("/bg-comb.webp"); background-size: auto, 226px auto; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--honey-deep), var(--honey), var(--honey-soft), var(--honey), var(--honey-deep)) 1; } .site-footer a { color: #f4ecdd; text-decoration: none; } .site-footer a:hover { color: var(--honey); text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: 0.1em; } .site-footer :focus-visible { outline-color: var(--honey); } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; padding-block: clamp(2.5rem, 6vw, 3.75rem) 2rem; } .footer-brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.45rem; color: #fff; margin: 0 0 0.6rem; } .footer-brand .brand-mark { width: 3rem; height: 3rem; } .footer-tagline { font-size: 1.05rem; max-width: 22rem; color: #f4ecdd; } .footer-address { font-size: 0.9rem; line-height: 1.5; max-width: 22rem; color: #d9cdb8; margin: 0.6rem 0 0; } .site-footer h2 { font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: #d9cdb8; margin: 0 0 0.7rem; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li + li { margin-top: 0.35rem; } .footer-bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.25rem 1.75rem; font-size: 0.9rem; color: #d9cdb8; } .footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid rgba(255, 255, 255, 0.14); } .footer-bottom p { margin: 0; } @media (max-width: 52rem) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid > :first-child { grid-column: 1 / -1; } } @media (max-width: 52rem) { .footer-grid { gap: 1.75rem 1.25rem; } /* Explore and The fine print sit side by side; the long email address gets its own row. */ .footer-grid > :nth-child(4) { order: 2; } .footer-grid > :nth-child(3) { order: 3; grid-column: 1 / -1; } } @media (max-width: 21rem) { .footer-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- 404 ---------- */ .lost { text-align: center; } .lost .brand-mark { display: block; width: 9rem; height: 9rem; margin: 0 auto 1rem; } @media (max-width: 30rem) { .lost .brand-mark { width: 6.5rem; height: 6.5rem; } } /* ---------- Honeycomb: motion, scale and print ---------- background-attachment: fixed is the luxurious version (the comb slides under a still sheen) but it is a scroll-jank and iOS repaint trap, so it is gated to pointer devices on wide screens that have not asked for less motion. */ @media (prefers-reduced-motion: no-preference) and (min-width: 64rem) and (hover: hover) and (pointer: fine) { body { background-attachment: fixed, fixed, fixed, scroll; } } /* Smaller cells on phones so the comb stays a texture, not a pattern of plates. */ @media (max-width: 40rem) { body { background-size: 100% 100%, 100% 100%, 100% 100%, 41.5692px 72px; } .site-footer { background-size: auto, 41.5692px 72px; } } @media (prefers-reduced-motion: reduce) { body { background-attachment: scroll; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .btn:hover, .btn:active { transform: none; } } /* ---------- Where we sell: the United States only, for now ---------- */ /* The warm panel a visitor outside the US sees in place of the buy controls, plus the short "not open in your country yet" lines next to the other offers. Same tokens as everything else. */ .country-panel { background: var(--bubble-soft); border: 1.5px solid rgba(27, 94, 133, 0.35); border-radius: var(--radius-sm); padding: 1.15rem 1.2rem 1rem; display: grid; gap: 0.75rem; } .country-panel > * { margin: 0; } .country-panel-card { max-width: 40rem; margin-inline: auto; background: var(--paper); border-width: 2px; padding: clamp(1.25rem, 3vw, 2rem); } .country-title { font-size: 1.35rem; line-height: 1.25; } .country-panel-card .country-title { font-size: clamp(1.45rem, 3.5vw, 1.9rem); } .country-ask { font-weight: 700; } .country-optional { font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); } .country-panel .form { gap: 1rem; } .country-done { display: grid; gap: 0.6rem; } /* The waitlist country picker and the "anything you'd like us to know" box. A