/* Theme Name: NurseryNote Theme URI: https://nurserynote.com/ Description: The nurserynote.com marketing site. One home page plus a shared content template for /privacy/ and /terms/. Designed in session C23, given its evidence sections (screenshots, FAQ, founder story) in C41; cut into this theme by _bmad-output/design-system/nurserynote-site.package.js. DO NOT EDIT THESE FILES BY HAND — edit nurserynote-site.build.js, regenerate the design, then re-run the packaging script. Hand edits are lost on the next deploy, which happens automatically on push. Author: the NurseryNote team Version: 1.1.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: All rights reserved Text Domain: nurserynote */ /* ========================================================================== NurseryNote — nurserynote.com · style.css · v3 (Session C41, Raj) Palette / type / shapes: reference_design_dna "School Warmth · Bold & Playful" Every rule is scoped under .nn-site. ========================================================================== */ @font-face{ font-family:'NunitoNN'; src:url(assets/nunito.ttf) format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; } .nn-site{ /* --- locked DNA tokens — all five carry real work on this page (v2) --- */ --nn-blue:#1982c4; /* primary */ --nn-blue-d:#13679e; /* primary-dark */ --nn-grape:#6a4c93; /* secondary */ --nn-green:#8ac926; /* success */ --nn-gold:#ffca3a; /* warning */ --nn-coral:#ff595e; /* danger */ --nn-bg:#F5F3F0; /* warm grey */ --nn-surface:#ffffff; --nn-cream:#FFF8E7; /* the app icon's own ground */ --nn-ink:#2D2040; /* text-primary */ /* --- web-only accessible variants of the same hues (see design notes) --- v2 note: #1982c4 is BACK on every button, because a 19px/800 label is WCAG "large text" and only needs 3:1 (it measures 4.17:1 on white). The darker sibling now appears ONLY where small text really needs 4.5:1 — inline links and body-size secondary copy. */ --nn-ink2:#655D71; /* body secondary — 5.65:1 on --nn-bg */ --nn-link:#13679e; /* prose links — 5.48:1 on --nn-bg */ --nn-ic-coral:#D93B40; /* meaning-bearing icon on its own coral tint */ --nn-ic-gold:#9A6E00; /* ditto, gold */ --nn-ic-green:#4F7A0C; /* ditto, green */ --nn-line:#E8E2DB; --nn-shadow:0 4px 20px rgba(45,32,64,.08); --nn-shadow-lg:0 14px 40px rgba(45,32,64,.13); --nn-r-card:20px; --nn-r-lg:28px; /* The app's four glance-card colours, in the app's own order (principal Home). Used as a 6px full-bleed rule under the hero and above the footer. */ --nn-rainbow:linear-gradient(90deg, #1982c4 0 25%, #ffca3a 25% 50%, #ff595e 50% 75%, #8ac926 75% 100%); /* ---------------------------------------------------------- TYPE SCALE FIVE deliberate steps. v1 had 15 / 15.5 / 16.5 / 17 / 17.5px coexisting — five sizes inside a 2.5px range, which reads as unconsidered. Nothing on this page may use a size that is not one of these five. */ --fs-1:14px; /* small — eyebrows, pills, meta, legal */ --fs-2:17px; /* body */ --fs-3:19px; /* lede · card titles · ALL button labels */ --fs-4:clamp(27px,5.8vw,34px); /* section headings */ --fs-5:clamp(34px,8.4vw,54px); /* the hero headline */ font-family:'NunitoNN',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; color:var(--nn-ink); background:var(--nn-bg); font-size:var(--fs-2); line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .nn-site *,.nn-site *::before,.nn-site *::after{box-sizing:border-box} /* ⚠️ This reset is (0,1,1) and out-specifies any single-class margin rule. To give a

a margin, write ".nn-site .x" — (0,2,0). A bare ".x{margin-top:...}" computes to 0 here, silently. Never !important. */ .nn-site h1,.nn-site h2,.nn-site h3,.nn-site h4,.nn-site p,.nn-site ul,.nn-site ol,.nn-site figure,.nn-site blockquote{margin:0} .nn-site ul,.nn-site ol{padding:0;list-style:none} .nn-site img{max-width:100%;height:auto;display:block} .nn-site a{color:inherit} .nn-site h1,.nn-site h2,.nn-site h3{line-height:1.14;letter-spacing:-.4px;font-weight:800} .nn-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px} .nn-skip{position:absolute;left:-9999px;top:0;background:var(--nn-ink);color:#fff; padding:12px 18px;border-radius:0 0 12px 0;font-weight:800;z-index:60} .nn-skip:focus{left:0} .nn-site :focus-visible{outline:3px solid var(--nn-blue-d);outline-offset:3px;border-radius:6px} /* Gold highlighter through one word. Decorative only — the ink text over it measures 14.24:1 on cream and 9.88:1 where the gold sits behind it. The stops are percentages of the INLINE CONTENT AREA, which is font-relative (ascent+descent ~= 1.36em for Nunito), not line-height-relative — so the same two numbers land identically in the 54px h1 and the 19px . 60/93 put the band entirely BELOW the baseline and it read as a separate gold bar; 46/76 runs it through the bottom of the letters, which is what a highlighter does. */ .nn-mark{padding:0 .06em; background:linear-gradient(180deg,transparent 46%,rgba(255,202,58,.66) 46%, rgba(255,202,58,.66) 76%,transparent 76%)} /* ---------------------------------------------------------------- header */ .nn-hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94); backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--nn-line)} .nn-hd__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px} .nn-hd__brand{display:inline-flex;align-items:center;text-decoration:none;padding:6px 0} .nn-hd__brand img{width:auto;height:32px} /* v2 fix 1+2: 19px/800 makes this WCAG large text, so the locked brand blue (4.17:1 with white) is allowed back. v1 used 15.5px, which forced #13679e. */ .nn-hd__cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px; padding:0 22px;border-radius:999px;background:var(--nn-blue);color:#fff; font-weight:800;font-size:var(--fs-3);text-decoration:none;white-space:nowrap; box-shadow:0 6px 16px rgba(25,130,196,.32)} .nn-hd__cta:hover{background:var(--nn-blue-d)} /* ---------------------------------------------------------------- shared */ /* v2 fix 3: v1's largest section padding anywhere was 38/46px. */ .nn-sec{padding:60px 0} /* Each section carries its own accent through --a: the marker bar, the eyebrow dot and any tinted furniture all read from it. */ .nn-mk{display:block;width:46px;height:6px;border-radius:999px; background:var(--a,var(--nn-blue));margin-bottom:18px} /* Block, not inline-flex: an inline-flex box sizes to max-content and would push a long eyebrow straight past a 360px viewport instead of wrapping. */ .nn-eyebrow{display:block;font-size:var(--fs-1);font-weight:800;line-height:1.45; letter-spacing:1.1px;text-transform:uppercase;color:var(--nn-ink2);margin-bottom:14px} .nn-eyebrow i{display:inline-block;width:9px;height:9px;border-radius:50%; background:var(--a,var(--nn-green));margin-right:9px;vertical-align:middle} .nn-h2{font-size:var(--fs-4)} /* .nn-site prefix required — see the reset. */ .nn-site .nn-sub{color:var(--nn-ink2);font-size:var(--fs-3);margin-top:15px;max-width:52ch} .nn-sechead{margin-bottom:34px} .nn-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:56px;padding:14px 30px;border-radius:999px;font-weight:800; font-size:var(--fs-3);line-height:1.25;text-align:center;text-decoration:none; border:2px solid transparent;transition:transform .07s ease,background .15s ease} .nn-btn:active{transform:translateY(1px)} .nn-btn--primary{background:var(--nn-blue);color:#fff;box-shadow:0 10px 24px rgba(25,130,196,.34)} .nn-btn--primary:hover{background:var(--nn-blue-d)} .nn-btn--ghost{background:var(--nn-surface);color:var(--nn-ink);border-color:var(--nn-line);box-shadow:var(--nn-shadow)} .nn-card{background:var(--nn-surface);border-radius:var(--nn-r-card);box-shadow:var(--nn-shadow)} /* ------------------------------------------------------- accent packs (v2) One class per card sets the bar colour, the icon-circle tint and the icon colour together. This is the principal Home screen's own card language: a coloured left bar plus a tinted icon circle. Bars are decorative, so they use the pure locked hue; the ICON carries meaning, so coral / gold / green use their darker siblings to clear 3:1 on their own tint. */ .nn-ac-blue {--a:#1982c4;--a-t:rgba(25,130,196,.12); --a-i:#1982c4} .nn-ac-grape {--a:#6a4c93;--a-t:rgba(106,76,147,.12); --a-i:#6a4c93} .nn-ac-coral {--a:#ff595e;--a-t:rgba(255,89,94,.14); --a-i:var(--nn-ic-coral)} .nn-ac-gold {--a:#ffca3a;--a-t:rgba(255,202,58,.30); --a-i:var(--nn-ic-gold)} .nn-ac-green {--a:#8ac926;--a-t:rgba(138,201,38,.20); --a-i:var(--nn-ic-green)} .nn-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center; justify-content:center;background:var(--a-t);color:var(--a-i)} .nn-ic svg{width:26px;height:26px} /* phone frame — screenshots are 468x952; status bar and Android nav bar cropped. THE THREE NUMBERS ARE LOCKED TO EACH OTHER: inner = outer - padding 20 = 30 - 10 Break that and the bezel thins at the corners. The bezel went 7 -> 10 and the OUTER radius 27 -> 30 with it, to keep the two arcs concentric. The INNER 20 is pinned by the artwork and must not move. Full working: nurserynote-site.build.js, which is never served. */ .nn-phone{position:relative;background:var(--nn-ink);padding:10px;border-radius:30px; box-shadow:var(--nn-shadow-lg);width:100%;max-width:236px;margin:0 auto} .nn-phone img{border-radius:20px;width:100%} .nn-phone--lg{max-width:262px} /* ------------------------------------------------------------------ hero */ .nn-hero{--a:var(--nn-gold);position:relative;overflow:hidden; background:linear-gradient(180deg,var(--nn-cream) 0%,#FDFAF3 46%,var(--nn-bg) 100%); padding:52px 0 66px} /* The four glance-card colours as a full-bleed rule — the page's one loud moment, and the thing that says "same product as the app". */ .nn-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px; background:var(--nn-rainbow)} .nn-hero__in{display:flex;flex-direction:column;gap:44px} .nn-hero h1{font-size:var(--fs-5);letter-spacing:-1px} .nn-hero .nn-lede{color:var(--nn-ink2);font-size:var(--fs-3);margin-top:18px;max-width:48ch} .nn-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} /* Wizu rides the phone. He is the warmth in this brand, so v2 stops hiding him in one 108px square near the bottom of the page. Real art, never a redraw. */ .nn-heroart{position:relative;width:max-content;max-width:100%;margin:0 auto} .nn-heroart__glow{position:absolute;inset:-30px -30px 6px;border-radius:50px;z-index:0; background:radial-gradient(115% 85% at 22% 8%,rgba(255,202,58,.44), rgba(138,201,38,.22) 54%,rgba(25,130,196,.13) 100%)} .nn-heroart .nn-phone{position:relative;z-index:1} /* Far enough off the frame that he reads as a badge beside the phone rather than a sticker sitting on top of the app's tab bar. */ .nn-heroart__wizu{position:absolute;z-index:2;left:-22px;bottom:-12px;width:92px;height:92px; border-radius:50%;background:#fff;padding:8px;box-shadow:var(--nn-shadow-lg)} .nn-store{margin-top:32px;padding-top:26px;border-top:1px dashed #DCD4CA} .nn-store__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .nn-badge{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 22px; border-radius:16px;background:var(--nn-ink);color:#fff;text-decoration:none} .nn-badge svg{width:23px;height:23px;flex:none;opacity:.92} .nn-badge b{display:block;font-size:var(--fs-3);font-weight:800;line-height:1.1;letter-spacing:.1px} .nn-badge small{display:block;font-size:var(--fs-1);font-weight:700;letter-spacing:.9px; text-transform:uppercase;opacity:.80;line-height:1.3} .nn-tag{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px; background:rgba(255,202,58,.30);color:#6B4E00;font-size:var(--fs-1);font-weight:800} .nn-tag i{width:9px;height:9px;border-radius:50%;background:var(--nn-ic-gold);flex:none} /* .nn-site prefix required — see the reset. 26px matches .nn-store's padding-top. */ .nn-site .nn-store__note{margin-top:26px;margin-bottom:12px; font-size:var(--fs-2);color:var(--nn-ink2);max-width:44ch} .nn-store__note a{color:var(--nn-link);font-weight:800} /* ----------------------------------------------------------------- roles */ .nn-roles{--a:var(--nn-blue);background:var(--nn-bg)} .nn-roles__grid{display:grid;gap:20px;grid-template-columns:1fr} /* Each role card wears its own colour, the way the app's cards do. The bar sits across the top here rather than down the side, because the card ends in a photo and a side bar would run under it. */ .nn-role{position:relative;padding:30px 22px 0;overflow:hidden;display:flex;flex-direction:column} .nn-role::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;background:var(--a)} .nn-role__pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start; padding:9px 16px;border-radius:999px;font-size:var(--fs-1);font-weight:800; letter-spacing:.3px;background:var(--a-t);color:var(--a-p)} .nn-role__pill i{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none} .nn-role--parent{--a-p:#13679e} /* 5.17:1 on its own tint */ .nn-role--teacher{--a-p:#3F6B0F} /* 5.52:1 */ .nn-role--principal{--a-p:#6a4c93} /* 5.75:1 */ .nn-role h3{font-size:var(--fs-3);margin-top:16px} .nn-role p{color:var(--nn-ink2);font-size:var(--fs-2);margin-top:10px} /* The phone is deliberately cut off by the card's bottom edge — it keeps three stacked cards readable on a 360px phone instead of 2000px of scrolling. */ .nn-role__shot{margin-top:auto;padding-top:28px;height:318px;overflow:hidden; display:flex;justify-content:center;align-items:flex-start} /* -------------------------------------------------------------- features */ .nn-feat{--a:var(--nn-green)} .nn-feat__grid{display:grid;gap:18px;grid-template-columns:1fr} /* The coloured left bar + tinted icon circle, lifted straight from the principal's Home screen so the site is recognisably the same product. */ .nn-feat__c{position:relative;padding:26px 22px 28px 26px;overflow:hidden} .nn-feat__c::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--a)} .nn-feat__c h3{font-size:var(--fs-3);margin-top:18px} .nn-feat__c p{color:var(--nn-ink2);font-size:var(--fs-2);margin-top:8px} /* ------------------------------------------------------------------- why */ .nn-why{--a:var(--nn-gold);background:var(--nn-cream); border-top:1px solid #F0E6D2;border-bottom:1px solid #F0E6D2} .nn-why__in{display:flex;flex-direction:column;gap:34px} .nn-why__art{flex:none;position:relative;display:flex;justify-content:center;align-items:center} .nn-why__art::before{content:'';position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);width:216px;height:216px;border-radius:50%; background:radial-gradient(circle,rgba(255,202,58,.38),rgba(138,201,38,.15) 60%,transparent 72%)} /* v2 fix 6: 108px -> 150/186px. Wizu is the warmth in this brand, not a footnote. */ .nn-why__art img{position:relative;z-index:1;width:150px;height:150px;border-radius:38px; background:#fff;box-shadow:var(--nn-shadow-lg)} .nn-why p{color:#5A4A38;font-size:var(--fs-3);margin-top:16px;max-width:58ch} .nn-why p:first-of-type{margin-top:20px} .nn-why strong{color:var(--nn-ink);font-weight:800} /* ----------------------------------------------------------------- trust */ .nn-trust{--a:var(--nn-grape)} .nn-trust__grid{display:grid;gap:18px;grid-template-columns:1fr} .nn-trust__c{position:relative;padding:26px 22px 28px 26px;overflow:hidden} .nn-trust__c::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--a)} .nn-trust__c h3{font-size:var(--fs-3);margin-top:18px} .nn-trust__c p{color:var(--nn-ink2);font-size:var(--fs-2);margin-top:8px} /* .nn-site prefix required — see the reset. 34px is .nn-sechead's block step. */ .nn-site .nn-trust__note{margin-top:34px;margin-bottom:12px; font-size:var(--fs-2);color:var(--nn-ink2)} .nn-trust__note a{color:var(--nn-link);font-weight:800} /* ========================================================== v3 (Session C41) Four added sections. Nothing below introduces a new colour, a new type size or a new card idiom — every one of them reuses the accent-pack language v2 already established (coloured bar + tinted icon circle), so the page gains substance without gaining a second visual vocabulary. ========================================================================== */ /* ---------------------------------------------------------- v3 · see it */ /* Coral was the least-used locked colour on the live page (4 painted areas against blue's 14), and this is the section that most needs to stand apart from the two grey-ground sections either side of it — hence the white band. */ .nn-shots{--a:var(--nn-coral);background:var(--nn-surface); border-top:1px solid var(--nn-line);border-bottom:1px solid var(--nn-line)} /* The rail deliberately lives OUTSIDE .nn-wrap and carries the wrap's own 20px gutter itself. Inside the wrap, the first and last card could never scroll flush to the screen edge, which is the affordance that tells a thumb there is more to the right. A flex row inside overflow-x:auto does NOT widen the page — the scrolling is contained to this box. Verified at 360px: documentElement.scrollWidth still equals clientWidth. overscroll-behavior-x:contain stops a sideways swipe that reaches the end of the rail from turning into a browser back-gesture. */ /* ⚠️ scroll-snap-type is PROXIMITY, not mandatory, and the card basis is min()ed against the viewport. Both guard the same failure: at a scrollport narrower than the card (a 280px Galaxy Fold cover screen, or 200% page zoom on a 360px phone, which is a 180px CSS viewport) a fixed 252px card is wider than the box it scrolls in. With mandatory + centre snapping the browser then REFUSES to rest anywhere else, so the overhanging left and right slices of every card — caption text included — cannot be scrolled to at all. That is a WCAG 1.4.4 failure, and it is invisible at normal zoom. Do not change either back. */ .nn-shots__rail{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;padding:18px 20px 40px; scrollbar-color:var(--nn-ink2) transparent} /* A scrollable box is a focus stop, so a keyboard user can arrow through the rail. The ring is INSET because the rail is full-bleed — an outset ring's left and right edges would land off-screen. (It is NOT because of this box's own overflow: an element's own outline is not clipped by its own overflow. That wrong mental model is what let the FAQ focus ring below get clipped for real.) */ .nn-shots__rail:focus-visible{outline:3px solid var(--nn-blue-d);outline-offset:-3px} .nn-shots__c{flex:0 0 min(252px,80vw);scroll-snap-align:center; display:flex;flex-direction:column;gap:16px} /* Lets the caption absorb the card's spare height so every phone bottom-aligns. Flex stretches all cards to the tallest, but captions run 2–4 lines, so without this the phones sat up to 28px out of step with each other — and at 360px you see one and a bit cards, which is exactly where a step shows. */ .nn-shots__cap{flex:1 1 auto} /* Caption ABOVE the phone. In a rail you only ever see one and a bit cards, so a caption underneath a 444px-tall phone would be off-screen exactly when the reader is deciding whether the picture is worth looking at. */ .nn-shots__cap h3{font-size:var(--fs-3)} .nn-shots__cap p{color:var(--nn-ink2);font-size:var(--fs-2);margin-top:7px} .nn-shots__c .nn-phone{max-width:206px;margin:0 auto} .nn-shots__hint{display:block;font-size:var(--fs-1);font-weight:800;letter-spacing:.6px; text-transform:uppercase;color:var(--nn-ink2);margin-top:-16px;margin-bottom:20px} /* Says out loud that this is the demo school. A principal who assumes these are another school's real children has been misled even if nothing untrue was written. */ /* .nn-site prefix required — see the reset. ⚠️ 14px, not the 34px its two siblings get: the rail above already carries padding-bottom:40px, so this lands at 54px effective. 34 would make it 74. */ .nn-site .nn-shots__note{margin-top:14px;margin-bottom:12px; font-size:var(--fs-2);color:var(--nn-ink2);max-width:60ch} /* ----------------------------------------------------- v3 · founder story */ .nn-founder{--a:var(--nn-grape)} .nn-founder__card{position:relative;overflow:hidden;background:var(--nn-surface); border-radius:var(--nn-r-lg);padding:30px 24px 32px 28px;box-shadow:var(--nn-shadow); max-width:74ch} .nn-founder__card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px; background:var(--a)} .nn-founder__card p{color:var(--nn-ink2);font-size:var(--fs-2);margin-top:16px} .nn-founder__card p:first-of-type{margin-top:22px} .nn-founder__card strong{color:var(--nn-ink);font-weight:800} /* Scoped through the card so it beats ".nn-founder__card p" (0,1,1) — a bare ".nn-founder__sign" (0,1,0) would lose and inherit the 16px paragraph margin. */ .nn-founder__card .nn-founder__sign{margin-top:24px;padding-top:20px; border-top:1px solid var(--nn-line);font-size:var(--fs-2);font-weight:800;color:var(--nn-ink)} /* ------------------------------------------------- v3 · what schools say */ /* DELIBERATELY DEAD CSS. TESTIMONIALS is [] and the section renders nothing at all while it is — see the comment above the constant. These rules ship so that the day a school actually says something, adding it is one line in the build source and not a design job. Delete this block only if the decision to never carry quotes is made on purpose. */ .nn-quotes{--a:var(--nn-gold)} .nn-quotes__grid{display:grid;gap:18px;grid-template-columns:1fr} .nn-quote{position:relative;overflow:hidden;padding:26px 22px 28px 26px} .nn-quote::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--a)} .nn-quote blockquote{font-size:var(--fs-3);line-height:1.5} .nn-quote figcaption{margin-top:16px;font-size:var(--fs-2);color:var(--nn-ink2)} .nn-quote figcaption b{display:block;color:var(--nn-ink);font-weight:800} /* --------------------------------------------------------- v3 · questions */ .nn-faq{--a:var(--nn-blue)} /* One column, not two. A two-column

grid reflows every card below the one that was opened, so the answer a reader just asked for jumps away from the thumb that tapped it. */ .nn-faq__list{display:flex;flex-direction:column;gap:14px;max-width:78ch} .nn-q{background:var(--nn-surface);border-radius:var(--nn-r-card); box-shadow:var(--nn-shadow);overflow:hidden} /* Native
, so the answers need no JavaScript and no plugin, they are in the DOM for a search engine whether open or shut, and Ctrl+F finds them. list-style + the -webkit- marker both have to go: one kills the triangle in Firefox, the other in older Safari. */ .nn-q>summary{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:19px 22px;min-height:48px;cursor:pointer;list-style:none; font-size:var(--fs-3);font-weight:800;line-height:1.34} .nn-q>summary::-webkit-details-marker{display:none} /* The question is a real

so it appears in heading navigation like every other card title on this page — the FAQ is the section a screen-reader user is most likely to jump straight to. font:inherit stops the UA's own h3 sizing from overriding the summary's. */ .nn-q>summary h3{font:inherit;letter-spacing:inherit;margin:0} /* ⚠️ REQUIRED. The global ring is drawn at outline-offset:3px — i.e. OUTSIDE the summary's border box — and fills .nn-q exactly, which is overflow:hidden. So the default ring is clipped away on all four sides and all eight questions become keyboard-invisible. Inset it. Measured, not guessed. */ .nn-q>summary:focus-visible{outline:3px solid var(--nn-blue-d);outline-offset:-3px} /* A CSS chevron rather than an SVG — six of them would otherwise be six more inline SVGs for a piece of pure decoration. #13679e on white is 5.48:1. */ /* Both the rotation AND the vertical nudge live in transform, because margin-top does not transition — animating the rotation while snapping the margin made the chevron jump 11px mid-turn. */ .nn-q>summary::after{content:'';flex:none;width:12px;height:12px; border-right:3px solid var(--nn-blue-d);border-bottom:3px solid var(--nn-blue-d); border-radius:2px;transform:translateY(-3px) rotate(45deg); transition:transform .18s ease} .nn-q[open]>summary::after{transform:translateY(3px) rotate(-135deg)} .nn-q[open]>summary{padding-bottom:12px} .nn-q__a{padding:0 22px 24px;color:var(--nn-ink2);font-size:var(--fs-2)} .nn-q__a p+p{margin-top:14px} .nn-q__a strong{color:var(--nn-ink);font-weight:800} .nn-q__a a{color:var(--nn-link);font-weight:800} /* .nn-site prefix required — see the reset. Same 34px as .nn-trust__note. */ .nn-site .nn-faq__note{margin-top:34px;margin-bottom:12px; font-size:var(--fs-2);color:var(--nn-ink2);max-width:56ch} .nn-faq__note a{color:var(--nn-link);font-weight:800} /* --------------------------------------------------------------- contact */ /* v2: the closing band was Deep Blue in v1 — one more slab of blue on a page that was already 90% blue. Grape is a locked DNA colour that appeared twice in the whole of v1, and white on it measures 6.85:1. */ .nn-contact{--a:var(--nn-gold);color:#fff; background:linear-gradient(155deg,#6a4c93 0%,#5A4080 62%,#4E3670 100%)} .nn-contact h2{font-size:var(--fs-4)} .nn-contact .nn-sub{color:rgba(255,255,255,.90)} .nn-contact .nn-eyebrow{color:rgba(255,255,255,.86)} .nn-contact__in{display:flex;flex-direction:column;gap:34px} .nn-contact__list{display:flex;flex-direction:column;gap:14px;margin-top:28px} /* A white card on a coloured ground — the app's own move, and it lifts the one thing on this page we actually want tapped. */ .nn-contact__item{display:flex;align-items:flex-start;gap:16px;background:#fff; border-radius:var(--nn-r-card);padding:20px;text-decoration:none;min-height:48px; box-shadow:var(--nn-shadow-lg);border:2px solid transparent} .nn-contact__item:hover{border-color:var(--nn-gold)} .nn-contact__ic{width:52px;height:52px;border-radius:50%;flex:none; background:rgba(255,202,58,.32);color:var(--nn-ic-gold); display:flex;align-items:center;justify-content:center} .nn-contact__ic svg{width:26px;height:26px} /* These three are s so the whole row can stay one ; without display:block the label runs into the address and you get "Email ushello@nurserynote.com". */ .nn-contact__k,.nn-contact__v,.nn-contact__n{display:block} .nn-contact__k{font-size:var(--fs-1);font-weight:800;letter-spacing:1px;text-transform:uppercase; color:var(--nn-ink2);line-height:1.5} /* break-word, NOT anywhere. overflow-wrap:anywhere breaks at the first overflowing glyph, and it rendered "hello@nurserynote.c / om" at 360px once the value moved up to 19px. With break-word the after the @ (see contactRow) wins, so a long address folds where a person would fold it — and a future address with no @ in it still breaks rather than overflowing. */ .nn-contact__v{font-size:var(--fs-3);font-weight:800;color:var(--nn-ink); overflow-wrap:break-word;line-height:1.35;margin-top:3px} .nn-contact__n{font-size:var(--fs-2);color:var(--nn-ink2);margin-top:6px} /* .nn-site prefix required — see the reset. */ .nn-site .nn-contact__who{margin-top:26px;padding-top:24px; border-top:1px solid rgba(255,255,255,.28); font-size:var(--fs-2);color:rgba(255,255,255,.88);max-width:46ch} /* ---------------------------------------------------------------- footer */ .nn-ft{position:relative;background:var(--nn-ink);color:rgba(255,255,255,.82);padding:56px 0 34px} .nn-ft::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:var(--nn-rainbow)} .nn-ft__in{display:flex;flex-direction:column;gap:28px} .nn-ft__lockup{width:176px;background:rgba(255,255,255,.96);border-radius:16px;padding:10px 13px} /* .nn-site prefix required — see the reset. 20px not 34: the lockup above it already carries 10px of its own padding and a white card edge. */ .nn-site .nn-ft__tag{font-size:var(--fs-2);margin-top:20px;margin-bottom:12px;max-width:38ch} .nn-ft__links{display:flex;flex-wrap:wrap;gap:8px 24px} .nn-ft__links a{color:#fff;font-weight:800;font-size:var(--fs-2);text-decoration:none; display:inline-flex;align-items:center;min-height:48px;border-bottom:2px solid transparent} .nn-ft__links a:hover{border-bottom-color:var(--nn-gold)} .nn-ft__base{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;display:flex; flex-wrap:wrap;gap:6px 20px;font-size:var(--fs-1);color:rgba(255,255,255,.70)} /* ================================================== page.php — content page The plain treatment shared by /privacy/ and /terms/. Nothing decorative: a masthead, one comfortable column, real heading rhythm. */ .nn-mast{--a:var(--nn-grape);background:var(--nn-cream);border-bottom:1px solid #F0E6D2; padding:44px 0 40px} .nn-mast h1{font-size:var(--fs-4)} /* .nn-site prefix required — see the reset. (/privacy/ and /terms/ masthead.) */ .nn-site .nn-mast__meta{margin-top:12px;font-size:var(--fs-2);color:var(--nn-ink2)} .nn-prose{padding:48px 0 72px} .nn-prose__col{max-width:68ch} .nn-prose__col p{margin-top:18px;color:#3F3550;line-height:1.75} .nn-prose__col h2{font-size:var(--fs-4);margin-top:46px;padding-top:24px; border-top:2px solid var(--nn-line)} .nn-prose__col h2:first-child{margin-top:0;padding-top:0;border-top:0} .nn-prose__col h3{font-size:var(--fs-3);margin-top:32px;color:var(--nn-blue-d)} .nn-prose__col ul{margin-top:16px;display:flex;flex-direction:column;gap:10px} .nn-prose__col li{position:relative;padding-left:28px;color:#3F3550;line-height:1.7} .nn-prose__col li::before{content:'';position:absolute;left:6px;top:12px;width:9px;height:9px; border-radius:50%;background:var(--nn-green)} .nn-prose__col a{color:var(--nn-link);font-weight:700;text-underline-offset:3px} .nn-prose__callout{margin-top:28px;background:var(--nn-surface);border-left:7px solid var(--nn-blue); border-radius:16px;padding:22px 24px;box-shadow:var(--nn-shadow)} .nn-prose__callout p{margin-top:0} /* ⚠️ .nn-site prefix here beats ".nn-prose__col p" (0,1,1), not just the reset. */ .nn-site .nn-prose__back{margin-top:48px} /* ------------------------------------------------------------ breakpoints */ @media (min-width:560px){ .nn-feat__grid{grid-template-columns:1fr 1fr} .nn-trust__grid{grid-template-columns:1fr 1fr} .nn-quotes__grid{grid-template-columns:1fr 1fr} /* v3 — dead until a quote exists */ } @media (min-width:760px){ /* v2 fix 3 — the page breathes. 88px is what makes a small brand look considered; v1's 46px is what made it look like a template. */ .nn-sec{padding:88px 0} .nn-sechead{margin-bottom:44px} .nn-hero{padding:88px 0 96px} .nn-hero__in{flex-direction:row;align-items:center;gap:52px} .nn-hero__copy{flex:1 1 54%} .nn-hero__art{flex:1 1 46%} .nn-heroart__wizu{left:-34px;bottom:-18px;width:106px;height:106px} .nn-roles__grid{grid-template-columns:repeat(3,1fr)} .nn-trust__grid{grid-template-columns:repeat(3,1fr)} .nn-why__in{flex-direction:row;align-items:flex-start;gap:48px} .nn-why__art{padding-top:6px} .nn-why__art img{width:186px;height:186px;border-radius:46px} .nn-contact__in{flex-direction:row;align-items:center;gap:52px} .nn-contact__copy{flex:1 1 52%} .nn-contact__side{flex:1 1 48%} .nn-contact__list{margin-top:0} .nn-ft__in{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:44px} .nn-mast{padding:64px 0 56px} .nn-prose{padding:60px 0 88px} .nn-hd__in{min-height:76px} .nn-hd__brand img{height:38px} /* v3 */ .nn-shots__c{flex-basis:268px} .nn-shots__c .nn-phone{max-width:220px} .nn-founder__card{padding:36px 34px 38px 40px} } @media (min-width:1000px){ .nn-feat__grid{grid-template-columns:repeat(4,1fr)} } /* v3 — above this width the six cards (6*268 + 5*16 = 1688px) still overflow, so the rail keeps scrolling; it just stops being full-bleed and lines its first card up with the rest of the page instead of with the screen edge. ⚠️ 1120px is NOT arbitrary and is NOT a round number picked by eye: it is .nn-wrap's own max-width. Below it the wrap fills the viewport and the two already agree; above it the wrap stops growing and starts centring, so the rail has to start centring at exactly the same pixel or the first card drifts left of the heading. An earlier 1160px left a 40px window where it did. If .nn-wrap's max-width or its 20px gutter ever changes, change these too — they are copies, not a live link. The horizontal padding is inherited from the base rule; re-declaring it here would be a no-op. */ @media (min-width:1120px){ .nn-shots__rail{max-width:1120px;margin:0 auto} } /* ------------------------------------------------------------ v3 · print A principal printing this page to show a partner or a trustee is a realistic thing for this audience to do, and until v3 every section printed in full. The two new ones do not by default: the rail clips to one and a bit of six screens, and seven of the eight FAQ answers vanish, because a closed
does not print its content. Six lines buy both back. */ @media print{ .nn-shots__rail{display:block;overflow:visible;padding:0} .nn-shots__c{flex:none;width:100%;max-width:420px;margin:0 0 24px; break-inside:avoid;page-break-inside:avoid} .nn-shots__hint{display:none} .nn-q{break-inside:avoid;page-break-inside:avoid} .nn-q>summary::after{display:none} /* ⚠️ ::details-content is the ONLY thing that opens a closed
for print. The obvious "display:block!important on .nn-q__a" does NOT work and was tried first: the closed state is content-visibility on the UA's own slot, not a display rule on the child, so the answer stays unrendered (measured — innerText was still empty with display:block applied). Chromium and Safari honour this. Firefox does not yet, so it degrades there to printing all eight questions with only the open answer — which is the same as today, never worse. */ .nn-q::details-content{content-visibility:visible;block-size:auto} } @media (prefers-reduced-motion:reduce){ .nn-site *{transition:none!important;animation:none!important} } /* --------------------------------------------------------------------------- WordPress admin bar. .nn-hd is position:sticky at top:0, so for a logged-in user it would sit underneath WordPress's own 32px bar. Only ever visible to the school's own staff, never to a parent — but it looks broken, so fix it. --------------------------------------------------------------------------- */ body.admin-bar .nn-hd{top:32px} @media (max-width:782px){body.admin-bar .nn-hd{top:46px}}