/* /css/bwe-retro.css S127. Shared retro components for pages other than the home page. Tokens plus the retro search bar and primary button. Scoped to known selectors only, so a page that does not use them is unaffected. No copy lives here. No dashes. Spec: RETRO_WEBSITE_BUILD handoff. Hard offset shadows with zero blur, thick outlines, flat warm surfaces, one accent at a time. */ :root{ --rw-box:#FFFBF2; --rw-outline:#2B1F3A; --rw-purple:#9A70D4; --rw-coral:#DD8560; --rw-line:3px; } /* browse: the library search input */ .search-w{ position:relative; } .search-w #si{ background:var(--rw-box) !important; border:var(--rw-line) solid var(--rw-outline) !important; border-radius:14px !important; box-shadow:4px 5px 0 var(--rw-outline) !important; padding-right:56px !important; font-family:'Fredoka',sans-serif !important; font-weight:500; } .search-w #si:focus{ border-color:var(--rw-purple) !important; box-shadow:4px 5px 0 var(--rw-purple) !important; } .search-w::after{ content:''; position:absolute; top:0; bottom:0; right:0; width:46px; background:var(--rw-purple); border:var(--rw-line) solid var(--rw-outline); border-left-width:var(--rw-line); border-radius:0 14px 14px 0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBF2' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='%23FFFBF2' stroke='%23FFFBF2'/%3E%3Ccircle cx='11' cy='11' r='4' fill='%239A70D4' stroke='none'/%3E%3Cline x1='20' y1='20' x2='16' y2='16'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:20px 20px; } /* find: the pro search box */ .bwe-srch-box{ background:var(--rw-box) !important; border:var(--rw-line) solid var(--rw-outline) !important; border-radius:18px !important; box-shadow:6px 8px 0 var(--rw-outline) !important; } .bwe-srch-box:focus-within{ border-color:var(--rw-purple) !important; box-shadow:6px 8px 0 var(--rw-purple) !important; } .bwe-srch-ta{ font-family:'Fredoka',sans-serif !important; font-weight:500 !important; caret-color:var(--rw-coral); } .bwe-srch-send{ border:2px solid var(--rw-outline) !important; box-shadow:2px 3px 0 var(--rw-outline) !important; } /* lesson designer: the weave prompt */ #prompt-textarea{ background:var(--rw-box) !important; border:var(--rw-line) solid var(--rw-outline) !important; border-radius:16px !important; box-shadow:6px 8px 0 var(--rw-outline) !important; font-family:'Fredoka',sans-serif !important; font-weight:500 !important; caret-color:var(--rw-coral); } #prompt-textarea:focus{ border-color:var(--rw-purple) !important; box-shadow:6px 8px 0 var(--rw-purple) !important; } .qbtn-primary{ border:2px solid var(--rw-outline) !important; box-shadow:3px 4px 0 var(--rw-outline) !important; } .qbtn-primary:active{ transform:translate(2px,3px); box-shadow:1px 1px 0 var(--rw-outline) !important; } /* ── pricing: plan cards, faq, demo tabs, and the full-tour card ── */ .rwp-plan{ background:var(--rw-box) !important; border:var(--rw-line) solid var(--rw-outline) !important; border-radius:22px !important; box-shadow:6px 8px 0 var(--rw-outline) !important; } .rwp-plan-badge{ border:2px solid var(--rw-outline) !important; box-shadow:2px 2px 0 var(--rw-outline) !important; } .rwp-plan .rwp-plan-cta, .rwp-plan a[class*="btn"], .rwp-plan button{ border:2px solid var(--rw-outline) !important; box-shadow:3px 4px 0 var(--rw-outline) !important; } .faq-item{ background:var(--rw-box) !important; border:2px solid var(--rw-outline) !important; border-radius:14px !important; box-shadow:4px 5px 0 var(--rw-outline) !important; margin-bottom:14px !important; } .prdemo-tab{ border:2px solid var(--rw-outline) !important; } .prdemo-tab.active, .prdemo-tab[aria-selected="true"]{ box-shadow:3px 3px 0 var(--rw-outline) !important; } .prdemo-stage{ border:var(--rw-line) solid var(--rw-outline); border-radius:20px; box-shadow:6px 8px 0 var(--rw-outline); overflow:hidden; } .rw-walk{ padding:72px 20px 88px; background:#F5F0E6; } .rw-walk-card{ max-width:640px; margin:0 auto; text-align:center; padding:40px 28px 36px; background:var(--rw-box); border:var(--rw-line) solid var(--rw-outline); border-radius:22px; box-shadow:8px 10px 0 var(--rw-outline); position:relative; } .rw-walk-card::before{ content:''; position:absolute; top:calc(-1 * var(--rw-line)); left:50%; transform:translateX(-50%); width:64px; height:11px; background:var(--rw-coral); border:var(--rw-line) solid var(--rw-outline); border-top:0; border-radius:0 0 7px 7px; } .rw-walk-eye{ font-family:'Gaegu',cursive; font-weight:700; font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--rw-coral); margin:0 0 10px; } .rw-walk-h{ font-family:'Shrikhand',serif; font-weight:400; font-size:clamp(30px, 5vw, 44px); line-height:1.08; color:var(--rw-outline); margin:0 0 14px; } .rw-walk-h .pop{ color:var(--rw-coral); } .rw-walk-h .pop2{ color:var(--rw-purple); } .rw-walk-body{ font-family:'Fredoka',sans-serif; font-size:17px; line-height:1.55; color:#5a5040; margin:0 0 24px; } .rw-walk-btn{ display:inline-block; font-family:'Fredoka',sans-serif; font-weight:600; font-size:17px; color:#fff; text-decoration:none; background:var(--rw-coral); padding:14px 26px; border-radius:100px; border:2px solid var(--rw-outline); box-shadow:4px 5px 0 var(--rw-outline); transition:transform .12s ease, box-shadow .12s ease; } .rw-walk-btn:hover{ transform:translate(2px,2px); box-shadow:2px 3px 0 var(--rw-outline); } /* ── mobile save-for-desktop card (shared; markup and handler come from the home page) ── */ .rw-msave-host{ --ink:#2d2820; --ink-s:#5a5040; --ink-m:#8a8070; --border:rgba(45,40,32,.16); --purple:#9A70D4; --coral:#DD8560; --coral-d:#c85535; --cream:#F5F0E6; background:var(--cream); padding:0 16px; } .rw-msave-host .rw-msave{ margin:0 auto 8px; } /* ============================================================ MOBILE SAVE-FOR-DESKTOP BLOCK (s115) reweave is a desktop-first product. On phones the interactive demo is hidden (see the inline neutralizer after #hero-demo) and this lighter block takes its place: a soft email capture framed as "open reweave on a bigger screen". No account is created here; the email carries a link to finish on desktop. Visibility rules: - default: display none (so it never shows on desktop/tablet) - shown only at <=600px AND only for logged-OUT visitors. html.rw-has-session is set pre-paint by bwe-nav-auth.js for anyone who has ever signed in on this device, so returning users never see it (and it never flashes). ============================================================ */ .rw-msave{display:none;} @media (max-width:600px){ /* logged-out mobile: show the block, it replaces the demo */ html:not(.rw-has-session) .rw-msave{ display:block; position:relative;z-index:2; width:100%;max-width:440px; margin:30px auto 8px; padding:26px 22px 24px; background:rgba(245,240,230,0.97); border-radius:24px; box-shadow:0 18px 44px rgba(20,12,40,0.34); text-align:center; } /* the demo mount is desktop/tablet only; hide on mobile as a belt-and-suspenders alongside the inline DOM neutralizer */ .hero-demo-mount{display:none !important;} } .rw-msave-h{ font-family:'Shrikhand',serif; font-size:25px;line-height:1.12;letter-spacing:-0.01em; color:var(--ink);margin:0 0 12px; } .rw-msave-sub{ font-family:'Gaegu',cursive; font-size:17px;line-height:1.45; color:var(--ink-s);margin:0 0 20px; } .rw-msave-form{display:flex;flex-direction:column;gap:10px;} .rw-msave-input{ width:100%;box-sizing:border-box; padding:14px 18px; border:1.5px solid var(--border); border-radius:14px; font-family:'Gaegu',cursive;font-size:17px; color:var(--ink);background:#fff; outline:none;transition:border-color .2s,box-shadow .2s; text-align:center; } .rw-msave-input::placeholder{color:var(--ink-m);} .rw-msave-input:focus{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(154,112,212,0.15); } .rw-msave-btn{ width:100%;box-sizing:border-box; padding:15px 24px; border:2px solid var(--coral); border-radius:14px; background:var(--coral);color:#fff; font-family:'Fredoka',sans-serif;font-size:16px;font-weight:600; display:inline-flex;align-items:center;justify-content:center;gap:8px; cursor:pointer;transition:background .2s,border-color .2s,transform .12s; -webkit-appearance:none;appearance:none; } .rw-msave-btn:hover{background:var(--coral-d);border-color:var(--coral-d);} .rw-msave-btn:active{transform:translateY(1px);} .rw-msave-btn:disabled{opacity:.7;cursor:default;} .rw-msave-btn span{transition:transform .2s;} .rw-msave-note{ font-family:'Gaegu',cursive;font-size:14px;line-height:1.4; color:var(--ink-m);margin:14px 0 0;min-height:18px; } .rw-msave-note a{color:var(--coral);text-decoration:none;cursor:pointer;} .rw-msave-err{color:var(--coral-d);} /* success state: swap form for a calm confirmation, no layout jump */ .rw-msave.is-done .rw-msave-form, .rw-msave.is-done .rw-msave-scroll{display:none;} .rw-msave-success{display:none;} .rw-msave.is-done .rw-msave-success{display:block;animation:rw-msave-fade .4s ease both;} .rw-msave-success-h{ font-family:'Shrikhand',serif;font-size:20px;color:var(--purple-d); margin:0 0 8px;line-height:1.2; } .rw-msave-success-p{ font-family:'Gaegu',cursive;font-size:16px;line-height:1.45; color:var(--ink-s);margin:0; } .rw-msave-scroll{ font-family:'Gaegu',cursive;font-size:14px;line-height:1.4; color:var(--ink-m);margin:16px 0 0; } /* s128 FIX: this rule was missing its @ and its closing brace. CSS error recovery then swallowed every rule after it to the end of the file, so the last 40 lines of this stylesheet have never applied on any page: the retro save card, .rw-plans-line, the browse story cards, the wordless films frame, the lesson designer cards, the find toggle, and the studio phone nav fix that S127 believed it had shipped. Verified by counting cssRules in a real browser before and after. */ @keyframes rw-msave-fade{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} } @media (prefers-reduced-motion: reduce){ .rw-msave.is-done .rw-msave-success{animation:none;} .rw-msave-btn{transition:none;} } .rw-msave-host .rw-msave{ background:var(--rw-box) !important; border:var(--rw-line) solid var(--rw-outline) !important; border-radius:22px !important; box-shadow:6px 8px 0 var(--rw-outline) !important; } .rw-msave-host .rw-msave-input{ border:var(--rw-line) solid var(--rw-outline) !important; border-radius:14px !important; background:#fff !important; box-shadow:none !important; } .rw-msave-host .rw-msave-btn{ border:var(--rw-line) solid var(--rw-outline) !important; box-shadow:4px 5px 0 var(--rw-outline) !important; } /* pricing: line under the plans, and the footnote that links to the page you are on */ .rw-plans-line{ max-width:640px; margin:22px auto 0; padding:0 20px; text-align:center; font-family:'Fredoka',sans-serif; font-style:normal; font-weight:500; font-size:clamp(17px, 2.1vw, 21px); line-height:1.55; color:#5a5040; } .rwp-pricing-foot:has(a[href="/pricing"]){ display:none; } /* ── browse: story cards ── */ .pc{ border:var(--rw-line) solid var(--rw-outline) !important; box-shadow:5px 6px 0 var(--rw-outline) !important; border-radius:18px !important; overflow:hidden; } .pc:hover{ transform:translate(2px,2px); box-shadow:3px 4px 0 var(--rw-outline) !important; } /* ── wordless films: the film frame and the cards ── */ .hero-video{ border:var(--rw-line) solid var(--rw-outline) !important; box-shadow:8px 10px 0 var(--rw-outline) !important; } .kid-card, .lia-card{ border:var(--rw-line) solid var(--rw-outline) !important; box-shadow:5px 6px 0 var(--rw-outline) !important; border-radius:18px !important; } /* ── lesson designer: question cards and choice tiles ── */ .qcard{ border:var(--rw-line) solid var(--rw-outline) !important; box-shadow:8px 10px 0 var(--rw-outline) !important; } .tile{ border:2px solid var(--rw-outline) !important; box-shadow:3px 4px 0 var(--rw-outline) !important; } .tile:hover, .tile.is-selected, .tile[aria-pressed="true"]{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--rw-outline) !important; } /* ── find: the quick / pro toggle ── */ .bwe-srch-toggle{ border:2px solid var(--rw-outline) !important; } /* ── studio: its own