/* ============================================================================ ZONNEKRING — THEME "PLAYGROUND BLOCKS" (data-theme="blocks") ---------------------------------------------------------------------------- A presentation skin over the SAME markup as the classic clay-on-paper theme. Load AFTER /css/app.css, with data-theme="blocks" on (src/views/layout.js stamps it and links this file only for a non-classic theme). Skins are presentation-only: never fork a view to make one look different. EVERY rule here is scoped under [data-theme="blocks"] — without the attribute the classic theme is byte-for-byte what app.css renders. tests/theme.test.js walks the file and fails on any unscoped selector. FONTS — src/views/layout.js links the Nunito + Open Sans + IBM Plex Mono families for this theme. The two display faces are also imported below so the file still works when it is linked standalone. Both faces carry full Cyrillic (RU) as well as Latin/Latin-ext (NL/EN). PALETTE CONTRAST (computed, WCAG 2.1): ink #23262E on sun #FBD671 ......... 10.78:1 ink on cream #FFFBF0 . 14.63:1 muted #5A5F6E on cream ............. 6.16:1 muted on sun ......... 4.54:1 faint #6E7280 on cream ............. 4.64:1 ink on lemon #FFD93D . 10.98:1 ink on cyan #14B0CC ................ 5.84:1 ink on grass #4CAF57 . 5.46:1 ink on tangerine #F5821F ........... 5.83:1 muted on lemon ....... 4.62:1 #fff on pink-deep #C81363 .......... 5.63:1 #fff on press #A81053 7.33:1 pink-deep on cream ................. 5.45:1 red #B3261E on soft .. 5.62:1 muted on locked #F4F4F6 ............ 5.80:1 muted on hatch ....... 5.60:1 Bright #FA2E7D never carries text (ink on it is only 4.14:1) — it is fill, outline and shadow only; every text-bearing pink is --pink-deep. ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"); /* ---------------------------------------------------------------- tokens -- */ [data-theme="blocks"] { /* --- playground tokens --- */ --sun:#FBD671; --sun-deep:#F2C13C; --lemon:#FFD93D; --cream:#FFFBF0; --cyan:#14B0CC; --cyan-soft:#DEF4F8; --cyan-deep:#0A6D80; --grass:#4CAF57; --grass-soft:#DFF3E2; --grass-deep:#1F7A3A; --tangerine:#F5821F; --tangerine-soft:#FFEBD6; --pink:#FA2E7D; --pink-soft:#FFE3EE; --pink-deep:#C81363; --pink-press:#A81053; --locked:#F4F4F6; --edge:3px; /* brick outline weight */ --stud:rgba(255,255,255,.55); /* moulded studs on a light block */ --tape:#FCEFCB; /* Crayon's --sk-tape, re-tinted to the blocks cream */ --tape-edge:rgba(35,38,46,.30); /* its torn edge: --ink at Crayon's .30 */ --step:var(--grass); --step-fg:var(--ink); --step-shade:rgba(35,38,46,.16); /* --- base app.css tokens re-mapped: untouched rules reskin themselves --- */ --paper:#FBD671; --card:#FFFBF0; --ink:#23262E; --muted:#5A5F6E; --faint:#6E7280; --line:#23262E; --clay:#FA2E7D; --clay-deep:#C81363; --clay-soft:#FFE3EE; --green:#1F7A3A; --green-soft:#DFF3E2; --navy:#0A6D80; --amber:#B8791A; --red:#B3261E; --red-soft:#FFE9E7; --body:"Open Sans",system-ui,"Segoe UI",Roboto,sans-serif; --display:"Nunito",var(--body); --mono:"IBM Plex Mono",ui-monospace,monospace; } /* ------------------------------------------------------------------ page -- */ [data-theme="blocks"] body{ background-color:var(--sun); color:var(--ink); font-size:15px; line-height:1.55; background-image:radial-gradient(circle at 12px 12px,rgba(255,255,255,.34) 0 3px,transparent 4px); background-size:44px 44px; } [data-theme="blocks"] .wrap{max-width:1100px;padding:0 18px 44px;} /* ------------------------------------------------- masthead + lang chips -- */ /* The masthead is position:sticky (app.css), so it MUST paint its own opaque ground — the page ground here is --sun plus a dot pattern, not --paper, and a see-through header would let the form scroll straight through the brand. */ [data-theme="blocks"] .masthead{ border-bottom:var(--edge) solid var(--ink);padding:16px 0 14px; background-color:var(--sun);background-image:none; } /* The child's hand-drawn sun replaces the vector one, the way the Crayon candidate does it: swap the bitmap with content:, never the markup, so the the classic theme ships stays exactly as it is. The file is a 65x64 JPEG carrying its own white ground, so it stays small (it goes soft above ~54px) and keeps the blocks frame — the white padding continues that ground and the round clip hides the JPEG's square edge against the yellow masthead. */ [data-theme="blocks"] .brand img{ content:url("/img/sun-logo.jpg"); width:52px;height:52px;padding:4px;background:#fff;object-fit:cover; border:var(--edge) solid var(--ink);border-radius:50%;transform:rotate(-5deg); } [data-theme="blocks"] .brand .who strong{font-family:var(--display);font-weight:900;font-size:22px;} [data-theme="blocks"] .brand .who span{color:var(--muted);font-size:12.5px;font-weight:600;} [data-theme="blocks"] .chip{ background:#fff;border:2px solid var(--ink);border-radius:999px;color:var(--ink); font-size:12.5px;font-weight:600;padding:7px 14px;display:inline-flex;align-items:center; } [data-theme="blocks"] .chip b{font-weight:800;color:var(--ink);} [data-theme="blocks"] a.navchip{min-height:44px;padding:0 16px;text-decoration:none;} [data-theme="blocks"] a.navchip.on{ background:var(--lemon);color:var(--ink);font-weight:800;box-shadow:0 3px 0 var(--sun-deep); text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px; } [data-theme="blocks"] a.navchip:hover{background:var(--lemon);} /* ------------------------------------------------------------ hero strap -- */ [data-theme="blocks"] .strap{ position:relative;margin-top:18px;padding:18px 132px 18px 20px;background:#fff; border:var(--edge) solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--sun-deep); } [data-theme="blocks"] .strap::after{ /* kids around the sun, decorative */ content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%); width:104px;height:104px;border-radius:50%;border:var(--edge) solid var(--ink); background:url("/img/kids-around-the-sun.jpg") center/cover no-repeat,var(--cream); box-shadow:0 4px 0 var(--sun-deep); } [data-theme="blocks"] .strap h1{ font-family:var(--display);font-weight:900;font-size:clamp(22px,6vw,30px); line-height:1.08;letter-spacing:-.01em; } [data-theme="blocks"] .strap h1 .for{color:var(--pink-deep);} [data-theme="blocks"] .strap p{color:var(--muted);font-size:14px;margin-top:7px;} /* --------------------------------------- bricks: panels + colour headers -- */ [data-theme="blocks"] .panel{ background:#fff;border:var(--edge) solid var(--ink);border-radius:22px; padding:0 16px 16px;box-shadow:0 6px 0 var(--step-shade); position:relative; /* anchor for the masking tape below */ } /* Masking tape, ported from the Crayon candidate: a strip straddling the top edge of every card. Decorative only — a pseudo-element adds no box to the flow, so nothing moves, and pointer-events:none keeps it un-clickable. It is pinned to the RIGHT because the colour-blocked header carries its step number and moulded studs on the left; over there it crosses only the header's empty top band, so no text is ever read through it. The panels sit well below the sticky masthead, which paints its own opaque ground and so covers the tape on scroll instead of showing through it. */ [data-theme="blocks"] .panel::before{ content:"";position:absolute;top:-13px;right:34px;width:78px;height:23px; background:var(--tape);border-radius:2px; border-left:2px dashed var(--tape-edge);border-right:2px dashed var(--tape-edge); box-shadow:0 1px 3px rgba(35,38,46,.20);transform:rotate(-3deg); pointer-events:none; } [data-theme="blocks"] .colhead{ margin:0 -16px 14px;padding:14px 16px 12px;border:0; border-bottom:var(--edge) solid var(--ink);border-radius:19px 19px 0 0; background-color:var(--step);color:var(--step-fg);gap:12px;align-items:center; background-image: radial-gradient(circle at 30px 8px,var(--stud) 0 5px,transparent 6px), radial-gradient(circle at 56px 8px,var(--stud) 0 5px,transparent 6px); background-repeat:no-repeat; } [data-theme="blocks"] .colhead h2{ font-family:var(--display);font-weight:900;font-size:19px;color:var(--step-fg);letter-spacing:0; } [data-theme="blocks"] .colhead .no{ font-family:var(--display);font-weight:900;font-size:15px;color:var(--ink); background:#fff;border:var(--edge) solid var(--ink);border-radius:10px; min-width:38px;height:38px;padding:0 8px; display:inline-flex;align-items:center;justify-content:center; } [data-theme="blocks"] .colhead .art{ font-family:var(--body);font-size:12px;font-weight:700;color:var(--step-fg);margin-left:auto; } /* Step colours. The number text and the chip SHAPE are the non-colour signals. */ [data-theme="blocks"] .maincol>.panel:nth-of-type(1){--step:var(--cyan);--step-shade:#9BE0EC;} [data-theme="blocks"] .maincol>.panel:nth-of-type(2){--step:var(--grass);--step-shade:#AEE0B5;} [data-theme="blocks"] .maincol>.panel:nth-of-type(3){ --step:var(--pink-deep);--step-fg:#fff;--step-shade:#F5A8C6;--stud:rgba(255,255,255,.42); } [data-theme="blocks"] .maincol>.panel:nth-of-type(2) .colhead .no{border-radius:50%;} [data-theme="blocks"] .maincol>.panel:nth-of-type(3) .colhead .no{border-radius:999px;} [data-theme="blocks"] .subhead{ font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.06em; color:var(--ink);border-top:3px dashed rgba(35,38,46,.22); padding-top:12px;margin:16px 0 8px; } /* ---------------------------------------------------------------- fields -- */ [data-theme="blocks"] .field{margin-bottom:14px;} [data-theme="blocks"] .flabel{ font-family:var(--display);font-weight:800;font-size:14.5px;margin-bottom:6px;color:var(--ink); } [data-theme="blocks"] .eyebrow-lbl{ font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--pink-deep); } [data-theme="blocks"] .hint{font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--muted);} [data-theme="blocks"] .req{color:var(--pink-deep);font-weight:900;} [data-theme="blocks"] input[type=text],[data-theme="blocks"] input[type=email], [data-theme="blocks"] input[type=tel],[data-theme="blocks"] input[type=date], [data-theme="blocks"] input[type=number],[data-theme="blocks"] select,[data-theme="blocks"] textarea{ border:2.5px solid var(--ink);border-radius:13px;padding:11px 13px;min-height:48px; font-size:15px;background:#fff;color:var(--ink); } [data-theme="blocks"] textarea{min-height:64px;} /* one visible focus ring on every control */ [data-theme="blocks"] :is(input,select,textarea,button,a,summary):focus-visible{ outline:3px solid var(--pink-deep);outline-offset:3px;border-color:var(--pink-deep); box-shadow:0 0 0 5px var(--pink-soft); } [data-theme="blocks"] .invalid{ border-color:var(--red)!important;box-shadow:0 0 0 5px var(--red-soft)!important; } /* ------------------------------------------ plan rows (lessons per week) -- */ [data-theme="blocks"] .plan{ border:var(--edge) solid var(--ink);border-radius:18px;background:#fff; padding:12px 14px;min-height:60px;gap:12px;margin-bottom:10px;flex-wrap:wrap; box-shadow:0 4px 0 rgba(35,38,46,.14); } [data-theme="blocks"] .plan:hover{border-color:var(--ink);background:var(--cream);} [data-theme="blocks"] .plan .tick{ width:26px;height:26px;border:var(--edge) solid var(--ink);border-radius:50%;background:#fff; } [data-theme="blocks"] .plan.sel{background:var(--lemon);box-shadow:0 4px 0 var(--sun-deep);} [data-theme="blocks"] .plan.sel .tick{background:var(--ink);box-shadow:inset 0 0 0 5px var(--lemon);} [data-theme="blocks"] .plan h3{font-family:var(--display);font-weight:800;font-size:16px;} [data-theme="blocks"] .plan .tag{font-size:12.5px;color:var(--muted);font-weight:600;} [data-theme="blocks"] .plan .pprice{margin-left:auto;} [data-theme="blocks"] .plan .pprice .now{ font-family:var(--display);font-weight:900;font-size:16px;font-variant-numeric:tabular-nums; background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:5px 13px; display:inline-block;color:var(--ink); } [data-theme="blocks"] .plan.sel .pprice .now{box-shadow:0 3px 0 var(--sun-deep);} /* keyboard ring for the visually hidden radio, without a mouse-click ring */ [data-theme="blocks"] .plan:focus-within{outline:3px solid var(--pink-deep);outline-offset:3px;} @supports selector(:has(*)){ [data-theme="blocks"] .plan:focus-within:not(:has(input:focus-visible)){outline:none;} } /* ----------------------------------------- subjects: chunky pill toggles -- */ [data-theme="blocks"] .chkgroup{ border:var(--edge) dashed var(--ink);border-radius:18px;padding:12px;background:#fff; display:flex;flex-wrap:wrap;gap:10px; } [data-theme="blocks"] .chkgroup .chk{ flex:0 1 auto;max-width:100%;align-items:center;gap:10px;padding:9px 16px;min-height:48px; background:#fff;border:2.5px solid var(--ink);border-radius:999px; font-family:var(--display);font-weight:700;font-size:14px;line-height:1.25;color:var(--ink); } [data-theme="blocks"] .chkgroup .chk input{width:22px;height:22px;margin:0;accent-color:var(--pink-deep);} @supports selector(:has(*)){ [data-theme="blocks"] .chkgroup .chk:has(input:checked){ background:var(--cyan-soft);box-shadow:0 3px 0 var(--cyan); } } /* locked until a lessons option is chosen — a HATCH, not just a tint */ [data-theme="blocks"] .chkgroup.inactive{ background:repeating-linear-gradient(-45deg,#FFF7E4 0 10px,#FFEFCB 10px 20px); border-color:var(--muted); } [data-theme="blocks"] .chkgroup.inactive .chk{background:#fff;border-color:var(--muted);color:var(--muted);} /* over the limit — dashed + grey; base `opacity:.5` is overridden so contrast holds */ [data-theme="blocks"] .chk.disabled{ opacity:1;color:var(--muted);background:var(--locked); border-style:dashed;border-color:var(--muted); } [data-theme="blocks"] .chkgroup.invalid{ border-color:var(--red);border-style:solid;background:var(--red-soft); } [data-theme="blocks"] .subj-counter{ font-family:var(--display);font-weight:800;font-size:13px;color:var(--ink); background:var(--lemon);border:2.5px solid var(--ink);border-radius:999px; padding:3px 12px;margin-left:8px;display:inline-flex;align-items:center;min-height:28px; } [data-theme="blocks"] .subj-counter.done{background:var(--grass);border-color:var(--ink);color:var(--ink);} /* ---------------------------------------------------------- child cards -- */ [data-theme="blocks"] .childcard{ --step:var(--tangerine);--step-fg:var(--ink); background:var(--cream);border:var(--edge) solid var(--ink);border-radius:20px; padding:0 14px 14px;margin-bottom:14px;box-shadow:0 5px 0 #F6C79A; } [data-theme="blocks"] .childcard .colhead{ margin:0 -14px 12px;padding:12px 14px;border-radius:17px 17px 0 0; } [data-theme="blocks"] .childcard .colhead h2{font-size:17px;} [data-theme="blocks"] .childcard .colhead .no{border-radius:50%;} [data-theme="blocks"] .mini-remove{ width:44px;height:44px;border:var(--edge) solid var(--ink);border-radius:14px;background:#fff; font-size:16px;font-weight:800;color:var(--ink);line-height:1; } [data-theme="blocks"] .mini-remove:hover{background:var(--red-soft);color:var(--red);border-color:var(--red);} /* --------------------------------------- notices, consents, error boxes -- */ [data-theme="blocks"] .included{ background:var(--lemon);border:var(--edge) solid var(--ink);border-radius:16px; padding:11px 14px;font-size:13.5px;color:var(--ink);gap:10px;box-shadow:0 4px 0 var(--sun-deep); } [data-theme="blocks"] .included .mark{font-size:18px;} [data-theme="blocks"] .chk.consent{ border:var(--edge) solid var(--ink);border-radius:18px;padding:14px;background:#fff; font-size:14px;min-height:56px;margin-top:10px; } [data-theme="blocks"] .chk.consent:hover{border-color:var(--ink);background:var(--cream);} @supports selector(:has(*)){ [data-theme="blocks"] .chk.consent:has(input:checked){background:var(--grass-soft);} } [data-theme="blocks"] .field>.chk{ border:2.5px solid var(--ink);border-radius:14px;background:#fff; padding:10px 14px;margin-bottom:8px;min-height:48px;align-items:center;font-size:14px; } [data-theme="blocks"] .chk input{width:22px;height:22px;accent-color:var(--pink-deep);} [data-theme="blocks"] .errbox{ border:var(--edge) solid var(--red);background:var(--red-soft);color:var(--red); border-radius:16px;padding:12px 14px;font-size:14px;font-weight:600; } [data-theme="blocks"] .errbox::before{content:"\26A0 ";font-weight:900;} [data-theme="blocks"] .errlist{margin:6px 0 0;padding-left:20px;font-weight:600;} [data-theme="blocks"] .errlist li{margin:3px 0;} /* --------------------------------------------- fields still to be filled in -- */ /* app.css marks them with .missing on submit; those rules tie on specificity with this file's .flabel / .chkgroup / .chk.consent rules and lose on order, so the skin restates the red state in its own vocabulary. */ [data-theme="blocks"] .missing>.flabel,[data-theme="blocks"] .missing .flabel{color:var(--red);} [data-theme="blocks"] .missing .flabel .req{color:var(--red);} [data-theme="blocks"] .missing .flabel .hint{color:var(--muted);} [data-theme="blocks"] .missing .flabel .subj-counter{color:var(--ink);} [data-theme="blocks"] .chkgroup.missing{ border-color:var(--red);border-style:solid;background:var(--red-soft); box-shadow:0 0 0 4px var(--red-soft); } [data-theme="blocks"] .chkgroup.missing .chk{border-color:var(--red);} [data-theme="blocks"] .chk.consent.missing{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft);} [data-theme="blocks"] .field.missing .plan{border-color:var(--red);} /* --------------------------------------------------------------- buttons -- */ [data-theme="blocks"] .btn{ font-family:var(--display);font-weight:900;font-size:15px;color:#fff; background:var(--pink-deep);border:var(--edge) solid var(--ink);border-radius:999px; padding:12px 22px;min-height:48px;box-shadow:0 4px 0 var(--ink); } [data-theme="blocks"] .btn:hover{background:var(--pink-press);} [data-theme="blocks"] .btn.ghost{background:#fff;color:var(--ink);} [data-theme="blocks"] .btn.ghost:hover{background:var(--lemon);} [data-theme="blocks"] .btn.small{padding:8px 16px;font-size:13px;min-height:44px;} [data-theme="blocks"] .btn.big{width:100%;min-height:60px;font-size:18px;border-radius:22px;margin-top:16px;} [data-theme="blocks"] .btn.danger{background:#fff;color:var(--red);border-color:var(--red);} [data-theme="blocks"] .btn.danger:hover{background:var(--red-soft);} [data-theme="blocks"] .btn:disabled{opacity:.75;filter:grayscale(.25);box-shadow:0 2px 0 var(--ink);} /* -------------------------------------------------- sticky invoice rail -- */ /* --masthead-h is measured at runtime (src/views/layout.js); the rail has to start below the sticky header, exactly like the classic theme does. */ [data-theme="blocks"] .rail{top:calc(var(--masthead-h) + 14px);} [data-theme="blocks"] .invoice{ background:var(--cream);border:var(--edge) solid var(--ink);border-radius:24px; box-shadow:0 8px 0 var(--sun-deep); } [data-theme="blocks"] .inv-head{ background-color:var(--lemon);border-bottom:var(--edge) solid var(--ink);padding:14px 16px 16px; background-image: radial-gradient(circle at 26px 8px,var(--stud) 0 5px,transparent 6px), radial-gradient(circle at 52px 8px,var(--stud) 0 5px,transparent 6px); background-repeat:no-repeat; } [data-theme="blocks"] .eyebrow{ font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--ink); } [data-theme="blocks"] .permin{margin-top:8px;} [data-theme="blocks"] .permin .val{ /* the bright price bubble */ font-family:var(--display);font-weight:900;font-size:30px;color:var(--ink); background:#fff;border:var(--edge) solid var(--ink);border-radius:999px; padding:6px 18px;display:inline-flex;box-shadow:0 4px 0 var(--sun-deep); font-variant-numeric:tabular-nums;letter-spacing:-.01em; } [data-theme="blocks"] .pmsplit{color:var(--muted);font-size:12.5px;font-weight:600;margin-top:8px;} [data-theme="blocks"] .pmsplit b{color:var(--ink);} [data-theme="blocks"] .ledger{padding:8px 16px 10px;} [data-theme="blocks"] .ledger h4{ font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--ink); } [data-theme="blocks"] .lrow{font-size:13.5px;border-top:2px dashed rgba(35,38,46,.18);padding:6px 0;} [data-theme="blocks"] .lrow .sub{font-size:11.5px;color:var(--faint);} /* the child's own name under the "Child N" line — same weight it carries in the classic rail (the plain .sub rule above ties on specificity and would win) */ [data-theme="blocks"] .lrow .sub.kidname{ color:var(--ink);font-size:12.5px;font-weight:800;overflow-wrap:anywhere; } [data-theme="blocks"] .lrow.red .lbl,[data-theme="blocks"] .lrow.red .eur{color:var(--red);} [data-theme="blocks"] .lrow.green .lbl,[data-theme="blocks"] .lrow.green .eur{color:var(--grass-deep);} [data-theme="blocks"] .totals{border-top:var(--edge) solid var(--ink);padding-top:8px;} [data-theme="blocks"] .totals .lrow{font-size:15px;font-weight:800;} [data-theme="blocks"] .totals .lrow .eur{font-size:16px;} [data-theme="blocks"] .vatnote{ font-size:12px;color:var(--muted);border-top:3px dashed rgba(35,38,46,.18);padding:10px 16px 12px; } /* ---------------------------------------------- success + notice pages -- */ [data-theme="blocks"] .success-panel{--step:var(--grass);--step-shade:#AEE0B5;} [data-theme="blocks"] .success-panel .colhead .no{background:var(--lemon);border-radius:50%;} [data-theme="blocks"] .success-panel .paybox{ background:var(--cyan-soft);border:var(--edge) solid var(--ink);border-radius:16px; padding:14px;font-size:14px;color:var(--ink); } [data-theme="blocks"] .success-panel .paybox .mono{font-size:13px;} /* Stored-registration summary. Crayon weights, but NOT the .colhead brick bar: these headers sit mid-panel, where a full-bleed studded bar reads as broken. */ [data-theme="blocks"] .sumtitle{ font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);margin:0 0 10px; } [data-theme="blocks"] .sumsec>h4{font-family:var(--display);font-size:16px;font-weight:900;margin:0 0 8px;} [data-theme="blocks"] .sumgrid{gap:4px 14px;margin-bottom:14px;} [data-theme="blocks"] .sumgrid dt{ font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--faint); } [data-theme="blocks"] .sumgrid dd{font-size:14.5px;} [data-theme="blocks"] .sumkid{ border-top:2px dashed rgba(35,38,46,.22);padding-top:12px;margin-top:12px; } [data-theme="blocks"] .sumhead h4{font-family:var(--display);font-size:17px;font-weight:900;} [data-theme="blocks"] .sumhead .kidno{ font-family:var(--display);font-weight:900;font-size:12px;color:var(--ink); background:var(--lemon);border:2px solid var(--ink);border-radius:50%; min-width:24px;height:24px; } [data-theme="blocks"] .kidprice{font-size:13.5px;} [data-theme="blocks"] .kidprice .cut{color:var(--red);font-weight:700;} [data-theme="blocks"] .kidprice .eur{font-weight:900;font-size:15px;} [data-theme="blocks"] .center-card{padding:28px 0;} [data-theme="blocks"] .center-card .notice{ position:relative;overflow:hidden;background:#fff;border:var(--edge) solid var(--ink); border-top:14px solid var(--cyan);border-radius:26px;padding:28px 24px; box-shadow:0 8px 0 var(--sun-deep); } [data-theme="blocks"] .center-card .notice::before{ /* child's crayon sun, decorative */ content:"";position:absolute;right:-34px;bottom:-34px;width:180px;height:180px;opacity:.14; background:url("/img/sun-logo.jpg") center/contain no-repeat;pointer-events:none; } [data-theme="blocks"] .bigsun{font-size:56px;line-height:1;margin-bottom:8px;} [data-theme="blocks"] .notice h1{font-family:var(--display);font-weight:900;font-size:24px;} [data-theme="blocks"] .notice p{font-size:15px;color:var(--muted);position:relative;} [data-theme="blocks"] hr.soft{border-top:3px dashed rgba(35,38,46,.2);} /* --------------------------------------------------- motion (opt-in only) -- */ @media (prefers-reduced-motion: no-preference){ [data-theme="blocks"] .plan{transition:background .14s ease,box-shadow .14s ease,transform .14s ease;} [data-theme="blocks"] .plan.sel,[data-theme="blocks"] .subj-counter.done{animation:zk-pop .2s ease-out;} [data-theme="blocks"] .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);} @keyframes zk-pop{0%{transform:scale(.94)}60%{transform:scale(1.05)}100%{transform:scale(1)}} } /* -------------------------------------------------- mobile-first trims -- */ @media (max-width: 700px){ [data-theme="blocks"] .wrap{padding:0 14px 32px;} [data-theme="blocks"] .strap{padding:14px 96px 14px 16px;border-radius:20px;} [data-theme="blocks"] .strap::after{width:72px;height:72px;right:12px;} [data-theme="blocks"] .panel{padding:0 12px 14px;border-radius:20px;} /* Crayon drops the tape on the narrowest layout and so do we: the cards run nearly edge to edge here, so a 78px strip has nowhere to sit without crowding the step header. */ [data-theme="blocks"] .panel::before{display:none;} [data-theme="blocks"] .colhead{margin:0 -12px 12px;padding:12px;border-radius:17px 17px 0 0;} [data-theme="blocks"] .colhead h2{font-size:18px;} [data-theme="blocks"] .colhead .no{min-width:34px;height:34px;font-size:14px;} [data-theme="blocks"] .childcard{padding:0 12px 12px;} [data-theme="blocks"] .childcard .colhead{margin:0 -12px 10px;padding:11px 12px;} [data-theme="blocks"] .plan .pprice{margin-left:0;width:100%;text-align:left;} [data-theme="blocks"] .invoice{border-radius:20px;} [data-theme="blocks"] .permin .val{font-size:26px;} [data-theme="blocks"] .btn.big{min-height:56px;font-size:17px;} [data-theme="blocks"] body{background-size:36px 36px;} } @media print{ [data-theme="blocks"] body{background:#fff;} [data-theme="blocks"] .strap::after,[data-theme="blocks"] .center-card .notice::before, [data-theme="blocks"] .panel::before{display:none;} }