/* Easykids.in — colour, type and spacing tokens from design_handoff_membership_bundles_desktop/README.md. Two departures from that handoff, both deliberate: 1. The shell is full width rather than capped at 1280px, to make room for the wide primary navigation. Text columns are still capped by character count, because a paragraph stretched across a 2560px monitor is unreadable no matter how wide the page is. 2. The header keeps the live site's two-band structure (white brand row over a black nav bar) rather than the handoff's single row, since that is what visitors already recognise. */ :root { --ink: #16181d; --body: #565961; --secondary: #6b6e75; --muted: #8a8d94; --ground: #fdfcfb; --white: #fff; --fill: #f4f3f0; --tint: #f8f7f4; --stripe: #f1efeb; --border: #eceae6; --border-2: #e6e4e0; --border-4: #d9d7d2; --red: #d32b25; --red-deep: #a51f1a; --red-tint: #fff5f3; --red-tint-2: #fffaf9; --red-border: #f7d9d4; --red-border-2: #f0cfc9; --amber-bg: #fdf1e7; --amber-fg: #a24d0a; --gold: #f0a92c; --success: #1c7a4a; --success-bg: #eaf6ef; --dark: #16181d; --dark-rule: #2c2f36; --dark-dim: #a2a5ac; --dark-mid: #c8cad0; --dark-bright: #d3d5da; --shadow-card: 0 2px 8px rgba(22, 24, 29, .04); --shadow-sticky: 0 8px 24px rgba(22, 24, 29, .06); --shadow-hover: 0 8px 24px rgba(22, 24, 29, .08); --shadow-red: 0 8px 22px rgba(211, 43, 37, .22); /* One gutter value keeps the brand row, nav, content and footer in vertical alignment at every viewport width. */ --gutter: clamp(16px, 2.6vw, 48px); } * { box-sizing: border-box; } /* An author rule like `.authblock { display: grid }` outranks the user-agent's `[hidden] { display: none }`, so `hidden` elements were still rendering — which is why the phone field and the code field appeared at the same time. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--ground); line-height: 1.6; font-size: 16px; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } .icon { flex: none; vertical-align: middle; } /* One content column shared by every section, so headings, cards, tables and the footer all line up on the same left edge. Full-bleed elements (hero, nav bar, footer background) sit outside it and stretch edge to edge. The cap is generous rather than absent: past ~1680px the page stops gaining anything and simply drifts apart. */ .wrap { width: 100%; max-width: 1680px; margin-inline: auto; padding: 0 var(--gutter); } /* A single, narrower column for pages that are read and decided on rather than browsed — membership above all. Several blocks (.plans, .compare, .bundle-grid, .crosssell, .faq dl) carried their own 1200px cap while the headings, hero and sheet grid around them ran to the full 1680. On a wide monitor that left every other block stopping short with a dead gutter beside it, which reads as a broken layout rather than a margin. The cap belongs to the page, so it is set once here and the per-block caps are released inside it. */ .wrap.narrow { max-width: 1240px; } .wrap.narrow .plans, .wrap.narrow .compare, .wrap.narrow .bundle-grid, .wrap.narrow .crosssell, .wrap.narrow .faq dl, .faq.narrow dl { max-width: none; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--white); padding: 12px 18px; } .skip:focus { left: 8px; top: 8px; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* ------------------------------------------------------------- chrome */ /* Built to the handoff's "Global chrome": dark utility bar over a single sticky white row. Tokens (13px utility, 14.5px nav, radius 12, the red button shadow) are taken from that spec rather than re-invented. */ .utility { background: var(--dark); font-size: 13px; } .utility-inner { display: flex; justify-content: space-between; gap: 20px; padding-block: 9px; color: var(--dark-mid); } .utility-right { color: var(--dark-dim); display: flex; gap: 20px; } .utility-right a:hover { color: var(--white); } .header { position: sticky; top: 0; z-index: 30; background: var(--white); border-bottom: 1px solid var(--border); } /* The worksheet maker (/generator/) has its own black nav, also class="header". It sits under the site header so the Worksheets menu opens over it (owner, 7 Nov 2026); the app's own .gen-nav { z-index: 20 } lost to .header on order. */ .header.gen-nav { position: relative; top: auto; z-index: 20; } .header-inner { display: flex; align-items: center; gap: 28px; padding-block: 14px; } .logo { flex-shrink: 0; } .logo img { height: 38px; width: auto; } .nav { display: flex; align-items: center; gap: 22px; } .nav > a, .nav-mega > a { display: inline-flex; align-items: center; gap: 2px; font-size: 14.5px; font-weight: 600; color: #3b3e45; padding-top: 4px; border-bottom: 2px solid transparent; white-space: nowrap; } .nav > a:hover, .nav-mega > a:hover { color: var(--ink); } .nav .active { font-weight: 800; color: var(--ink); border-bottom-color: var(--red); } .nav .chev { opacity: .6; } /* The arrow turns as its menu opens (owner's standing rule: smooth submenus, arrow rotates on open). */ .nav-mega .chev { transition: transform 180ms ease; } .nav-mega:hover .chev, .nav-mega:focus-within .chev { transform: rotate(180deg); } /* Worksheets mega-menu. Opens on hover and on keyboard focus, so the class and subject pages stay reachable without a pointer. */ .nav-mega { position: relative; } .mega { position: absolute; top: calc(100% + 14px); left: -24px; z-index: 40; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)) 260px; gap: 28px; padding: 24px; min-width: 620px; background: var(--white); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 44px rgba(22, 24, 29, .14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 140ms ease, transform 140ms ease, visibility 140ms; } .nav-mega:hover .mega, .nav-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; } .mega-col h4 { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } /* Plain links in a mega column — NOT buttons. `.mega-col a` outranks `.btn-primary` (0,1,1 against 0,1,0), so without this exclusion the promo button gets --ink text on a --red background and reads as an empty red slab, plus display:block and this padding replacing its own. */ .mega-col a:not([class*="btn-"]) { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 7px 0; } .mega-col a:not([class*="btn-"]):hover { color: var(--red-deep); } .mega-promo { background: var(--red-tint); border: 1px solid var(--red-border); border-radius: 14px; padding: 20px; } .mega-promo h4 { color: var(--red-deep); } .mega-promo p { font-size: 13.5px; color: var(--body); margin: 0 0 14px; } /* The search box gives way before the logo or the menu does: "Help" joined the menu (7 Nov 2026) and the logo was the item that shrank. */ .search { position: relative; margin-left: auto; display: flex; align-items: center; flex: 0 1 230px; min-width: 160px; } .search-icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; } .search input { background: var(--fill); border: 0; border-radius: 12px; padding: 11px 16px 11px 40px; min-width: 0; width: 100%; font: inherit; font-size: 14px; color: var(--ink); } .search input::placeholder { color: var(--muted); } .search input:focus { outline: 2px solid var(--red); outline-offset: 1px; } .actions { display: flex; align-items: center; gap: 6px; } .action { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: background 140ms ease; } .action:hover { background: var(--fill); } .action .count { font-style: normal; font-size: 11.5px; font-weight: 800; background: var(--red); color: var(--white); min-width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 5px; position: absolute; top: 2px; right: 2px; } .get-premium { box-shadow: 0 6px 16px rgba(211, 43, 37, .2); border-radius: 12px; padding: 12px 20px; font-size: 14.5px; } /* The member's Google photo, and the gold gem for Premium members on the corner of their photo or icon (owner, 7 Nov 2026: "the gold diamond … should be on profile icon/profile picture once they pay the membership"). */ .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; background: var(--fill); } .avatar-wrap { position: relative; display: inline-flex; align-items: center; flex: none; } .member-badge { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); top: -8px; right: -9px; } .member-badge .gem { display: block; } .action.is-member .avatar { box-shadow: 0 0 0 2px #F8991D; } .m-chip.has-avatar { padding: 0; } .m-chip .avatar { width: 30px; height: 30px; } .m-chip .member-badge { top: 1px; right: 1px; } .member-title { display: inline-flex; align-items: center; gap: 8px; } .member-title .gem { flex: none; } /* Account menu: the photo and name open it (acct-menu.js), on the computer header and the phone's (owner, 8 Nov 2026: "logout is very hard to find"). */ .acct { position: relative; display: flex; align-items: center; } .acct-btn .chev { opacity: .6; transition: transform 180ms ease; } .acct.is-open .chev { transform: rotate(180deg); } .acct-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 45; min-width: 232px; max-width: calc(100vw - 32px); padding: 8px; background: var(--white); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 44px rgba(22, 24, 29, .14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; } .acct.is-open .acct-pop { opacity: 1; visibility: visible; transform: none; } .acct-who { margin: 0 0 6px; padding: 8px 12px 12px; border-bottom: 1px solid var(--stripe); font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-who small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: #8A5A00; } .acct-pop a, .acct-out button { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink); text-align: left; } .acct-pop a:hover, .acct-out button:hover, .acct-pop a:focus-visible, .acct-out button:focus-visible { background: var(--fill); } .acct-out { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--stripe); } .acct-out button { color: var(--red-deep); } .drawer-out { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--stripe); } .drawer-out button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--red-deep); text-align: left; } @media (prefers-reduced-motion: reduce) { .acct-pop, .acct-btn .chev, .nav-mega .chev { transition: none; } } /* What a member sees instead of "Get Premium" (owner, 7 Nov 2026). */ .member-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600; background: #FFF4E0; color: #8A5A00; border: 1px solid #F6C97E; white-space: nowrap; } .member-pill:hover { background: #FFECCB; } .mega-promo.is-member { background: #FFF8EC; border-color: #F6C97E; } .mega-promo.is-member h4 { color: #8A5A00; } /* ------------------------------------------------- mobile chrome (handoff) The phone design is a different shell, not the desktop header shrunk: a menu chip + logo + search/cart chips, a slide-in drawer for the full navigation, and a fixed bottom tab bar. All of it is hidden on desktop. */ .m-chip, .m-actions, .drawer, .drawer-backdrop, .tabbar { display: none; } .m-chip { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--fill); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; position: relative; flex: none; padding: 0; } .m-chip:active { background: var(--border-2); } /* The handoff specifies a 19px badge at top:-4 right:-4; 44px hit targets mean it sits just inside the chip instead of clipping past the header edge. */ .m-badge { position: absolute; top: 2px; right: 2px; min-width: 19px; height: 19px; border-radius: 999px; background: var(--red); color: var(--white); font-style: normal; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; } .drawer-backdrop { position: fixed; inset: 0; background: rgba(22, 24, 29, .45); z-index: 60; } .drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 61; width: 310px; max-width: 86vw; overflow-y: auto; background: var(--white); padding: 22px 20px; box-shadow: 12px 0 40px rgba(0, 0, 0, .18); } .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .drawer-head img { height: 26px; width: auto; } .drawer-close { display: flex; width: 34px; height: 34px; border-radius: 10px; } .drawer-cta { display: block; width: 100%; text-align: left; padding: 13px 16px; border-radius: 12px; font-size: 14.5px; margin-bottom: 22px; } .drawer-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 4px; } .drawer-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--stripe); font-size: 15px; font-weight: 600; color: var(--ink); } .drawer-row .chev { color: var(--faint, #c9c7c2); } .drawer-foot { display: grid; gap: 12px; margin-top: 22px; font-size: 14px; color: var(--body); } body.drawer-open { overflow: hidden; } .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--white); border-top: 1px solid var(--border); padding: 8px 6px calc(14px + env(safe-area-inset-bottom, 0px)); grid-template-columns: repeat(4, 1fr); } .tab { display: grid; justify-items: center; gap: 5px; position: relative; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; } .tab.is-on { color: var(--red); } .tab .m-badge { top: -2px; right: 50%; margin-right: -22px; } /* --------------------------------------------------------------- hero */ .hero { position: relative; isolation: isolate; /* --hero-image, --hero-min-h and --hero-scrim are set per-site from the settings panel (Site::heroStyle). The defaults here are the fallbacks, so an untouched install looks exactly as it did before they existed. */ background-image: var(--hero-image, url("/assets/hero.webp")); background-size: cover; background-position: var(--hero-pos, center 42%); color: var(--white); text-align: center; padding: clamp(56px, 7vw, 96px) var(--gutter); min-height: var(--hero-min-h, auto); /* A column flexbox, so justify-content is the VERTICAL placement of the words. Only meaningful once a height is set — without one the band is exactly as tall as its contents and there is nowhere to move to. */ display: flex; flex-direction: column; justify-content: var(--hero-align, center); } /* The artwork is warm and busy; a scrim keeps the headline at readable contrast without hiding the child, who is the point of the picture. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; /* The scrim scales with --hero-scrim (0-0.9), so a lighter photograph can be shaded harder without editing this file. The three stops keep their relationship to each other. */ background: linear-gradient(180deg, rgba(12,13,16, calc(var(--hero-scrim, .55) * 1)) 0%, rgba(12,13,16, calc(var(--hero-scrim, .55) * 0.76)) 45%, rgba(12,13,16, calc(var(--hero-scrim, .55) * 1.18)) 100%); } /* Edge-to-edge artwork, regardless of the page's content column. The picture is the point, so it takes the whole viewport; .hero-inner still holds the words to a readable measure. */ /* The phone crop is nearly square where the desktop one is a letterbox, so it gets its own focal point — falling back to the desktop one, then to the stylesheet's default, when it has not been set. */ @media (max-width: 640px) { .hero { background-position: var(--hero-pos-m, var(--hero-pos, center 42%)); } } .hero-inner { max-width: 900px; margin: 0 auto; } .hero h1 { color: var(--white); font-size: clamp(30px, 4.2vw, 52px); max-width: none; margin: 0 0 14px; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); } .hero p { color: #edeef1; font-size: clamp(15px, 1.25vw, 17.5px); max-width: 68ch; margin: 0 auto; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); } .hero-search { display: flex; gap: 10px; margin: 30px auto 0; max-width: 880px; } .hero-search input { flex: 1; min-width: 0; border: 0; border-radius: 10px; padding: 16px 20px; font: inherit; font-size: 16px; color: var(--ink); background: var(--white); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); } .hero-search input::placeholder { color: var(--muted); } .hero-search .btn-primary { padding: 16px 34px; border-radius: 10px; font-size: 16px; } /* ------------------------------------------------------ membership hero */ /* Owner, 7 Nov 2026: "banner is not nicely designed". The words used to sit on the photograph, across the child's face. Now they sit on the page, and the picture is framed beside them, fading from black & white into colour — what the membership adds, shown rather than said. One soft glow behind the frame picks up the photograph's warm light; nothing else decorates. */ .mhero { padding: clamp(28px, 4.2vw, 64px) 0 clamp(8px, 1.5vw, 20px); background: radial-gradient(55% 75% at 76% 48%, var(--amber-bg) 0%, rgba(253, 241, 231, 0) 72%); } .mhero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; } .mhero-copy { max-width: 560px; } .mhero .eyebrow { margin: 0 0 18px; } .mhero h1 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -.035em; max-width: 13ch; margin: 0 0 18px; color: var(--ink); text-wrap: balance; } .mhero-lede { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--body); max-width: 46ch; margin: 0; } /* One centre line, one height: both buttons share the padding and the 1.5px border. */ .mhero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 0; } .mhero-cta .btn-primary, .mhero-cta .btn-outline { padding: 14px 24px; font-size: 15.5px; line-height: 1.2; } .mhero-note { font-size: 14px; line-height: 1.55; color: var(--secondary); max-width: 52ch; margin: 16px 0 0; } .mhero-art { position: relative; margin: 0; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 28px; background: #2b2018; box-shadow: 0 34px 60px -30px rgba(92, 46, 12, .5), 0 2px 6px rgba(22, 24, 29, .06); } .mhero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } .mhero-art .is-bw { filter: grayscale(1) contrast(1.05) brightness(1.06); } /* Colour arrives from the left third onwards, so the child is always in full colour. */ .mhero-art .is-colour { -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 16%, #000 44%); mask-image: linear-gradient(100deg, transparent 0%, transparent 16%, #000 44%); } @media (max-width: 860px) { .mhero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .mhero-art { order: -1; aspect-ratio: 2 / 1; border-radius: 22px; } .mhero-copy { max-width: 640px; } .mhero h1 { max-width: 16ch; } } @media (max-width: 520px) { .mhero h1 { font-size: 32px; } .mhero-art { aspect-ratio: 16 / 10; } .mhero-cta { flex-direction: column; align-items: stretch; } .mhero-cta .btn-primary, .mhero-cta .btn-outline { width: 100%; } } /* The same search, on a white page. `.search-inline` existed in search.php but was never written, so the results page rendered a raw browser input next to a styled button. It gets a visible border here rather than the hero's shadow — a shadow reads as depth over a photograph and as grubbiness over white. */ .search-inline { display: flex; gap: 10px; margin: 18px 0 30px; max-width: 620px; } .search-inline input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; font: inherit; font-size: 15.5px; color: var(--ink); background: var(--white); transition: border-color 120ms ease, box-shadow 120ms ease; } .search-inline input::placeholder { color: var(--muted); } .search-inline input:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px rgba(206, 46, 41, .14); } .search-inline .btn-primary { padding: 13px 28px; border-radius: 10px; font-size: 15.5px; } @media (max-width: 560px) { .search-inline { flex-direction: column; } .search-inline .btn-primary { width: 100%; } } /* ------------------------------------------------------------- buttons */ .btn-primary, .btn-dark, .btn-outline, .btn-white { display: inline-block; border-radius: 13px; font-weight: 700; font-size: 15px; padding: 12px 20px; cursor: pointer; text-align: center; border: 1.5px solid transparent; white-space: nowrap; transition: background 140ms ease, box-shadow 140ms ease; } .btn-primary { background: var(--red); color: var(--white); box-shadow: var(--shadow-red); } .btn-primary:hover { background: var(--red-deep); } .btn-dark { background: var(--ink); color: var(--white); } .btn-dark:hover { background: #000; } .btn-outline { border-color: var(--border-4); color: var(--ink); background: var(--white); } .btn-outline:hover { background: var(--tint); } .btn-white { background: var(--white); color: var(--ink); } .block { display: block; width: 100%; margin-bottom: 10px; } /* ------------------------------------------------------------ content */ .breadcrumb { font-size: 13px; color: var(--muted); padding-top: 20px; } .breadcrumb a:hover { color: var(--ink); } .breadcrumb span { margin: 0 4px; } h1 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin: 16px 0 12px; max-width: 24ch; } h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.025em; margin: 40px 0 16px; } h3 { font-size: 18px; font-weight: 800; margin: 0; } .label { font-size: 13px; font-weight: 800; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; margin: 0 0 8px; } /* Prose stays measured even though the shell is full width. */ .prose { color: var(--body); font-size: 16.5px; max-width: 78ch; } .prose img { border-radius: 12px; margin: 16px 0; } .prose h2 { font-size: 22px; margin: 28px 0 10px; color: var(--ink); } .prose a { color: var(--red-deep); text-decoration: underline; } .intro { color: var(--body); font-size: 16.5px; max-width: 72ch; } .muted { color: var(--muted); font-size: 14px; } .eyebrow { display: inline-block; background: var(--amber-bg); color: var(--amber-fg); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; } /* ------------------------------------------------------ worksheet page */ .sheet { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; padding-bottom: 56px; } .preview { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 24px; display: flex; justify-content: center; } .preview.is-premium { border-color: var(--red-border); background: var(--red-tint-2); } .preview img { border-radius: 8px; max-height: 620px; width: auto; } .preview picture { display: flex; } /* no baseline gap under the sheet */ .preview .tag { position: absolute; top: 16px; left: 16px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 6px; } .preview.is-premium .tag { background: var(--red); } /* The colour artwork is what membership sells: veil it below the fold line. */ .preview .veil { position: absolute; inset: 48% 1px 1px 1px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--white) 34%, var(--white) 100%); border-radius: 0 0 18px 18px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 56px; text-align: center; } .preview .lock { width: 44px; height: 44px; border-radius: 999px; background: var(--ink); color: var(--white); display: grid; place-items: center; margin-bottom: 14px; } .preview .veil-title { font-size: 17px; font-weight: 800; margin: 0 0 4px; } .preview .veil-sub { font-size: 14px; color: var(--body); margin: 0; } .about, .details { margin-top: 32px; } .details dl { margin: 0; max-width: 720px; } .details dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--stripe); font-size: 14.5px; } .details dt { color: var(--muted); } .details dd { margin: 0; font-weight: 600; text-align: right; } .rail { position: sticky; top: 130px; align-self: start; } .rail .card { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: var(--shadow-sticky); } .rail .card .block + .block { margin-top: 10px; } .rail .card .btn-dark, .rail .card .btn-primary, .rail .card .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .rail .card h1 { font-size: 24px; margin: 0 0 16px; max-width: none; } .licence { font-size: 13px; color: var(--muted); margin-top: 12px; } /* The save control is a separate decision from buying/downloading, so it gets its own space rather than sitting flush against the primary action. */ .saveform { margin-top: 14px; } .save-btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; width: 100%; } .save-btn.is-saved { color: var(--red-deep); border-color: var(--red-border); background: var(--red-tint); } /* ------------------------------------------------------------- grids */ /* Six across on desktop, stepping down by breakpoint. Fixed counts rather than auto-fill: the home sections load exactly 12 sheets, and auto-fill would leave a ragged trailing row at widths where 12 is not a multiple of the column count. */ .grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin: 24px 0 56px; } .card-sheet { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-card); transition: box-shadow 140ms ease, transform 140ms ease; } .card-sheet:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .card-sheet img { border-radius: 10px; aspect-ratio: 300/424; object-fit: cover; width: 100%; } .card-sheet h2, .card-sheet h3 { font-size: 14px; font-weight: 700; margin: 10px 0 4px; line-height: 1.35; max-width: none; } /* Geometry carried over from the live site's badge: a 25px rounded square set 15px in from the corner, on 60% black. The dark translucent ground is what makes the gold gem legible over any worksheet artwork — on white it washes out, on brand red it goes muddy. */ .pill { position: absolute; top: 15px; right: 15px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); color: var(--ink); border: 1px solid var(--border); font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px; line-height: 1; z-index: 7; } .pill-premium { background: rgba(0, 0, 0, .6); border: 0; width: 25px; height: 25px; padding: 0; border-radius: 6px; } .gem { display: block; } .nav-upgrade a { display: inline-flex; align-items: center; gap: 7px; } .preview .tag { display: inline-flex; align-items: center; gap: 6px; } .page { padding-bottom: 56px; } .archive { padding-bottom: 40px; } .empty { text-align: center; padding: 80px var(--gutter); } /* Several ways on from an empty state, on one centre line (a cart link that expired). */ .empty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 8px; } /* ---------------------------------------------------------- home sections */ .section { padding-block: 8px 4px; } /* The card sections carry their own breathing room. Everywhere else on the home page the gap comes from .grid's 56px bottom margin, so a section built from cards instead of a grid ended up flush against its neighbours — the eyebrow sat directly under the hero with nothing between them. Set here rather than on .section so the sheet rows keep the rhythm they already have. */ .section-pad { padding-block: clamp(48px, 5vw, 72px) 8px; } .section-pad + .section-pad { padding-top: clamp(40px, 4vw, 56px); } /* …and the sheet row that follows them gets the same separation, whichever section that turns out to be — phonics is conditional on there being any. */ .section-pad + .section:not(.section-pad) { padding-top: clamp(40px, 4vw, 56px); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .seeall { font-size: 14.5px; font-weight: 700; color: var(--red-deep); white-space: nowrap; } .seeall:hover { text-decoration: underline; } /* ---- Easykids Services + Buy Worksheets PDF Bundle ----------------------- Geometry, weights and spacing follow the supplied design file exactly; the colours are the site tokens, which sit within a shade or two of the mock. */ .sec-intro { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin-bottom: 32px; } .eyebrow-red { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); } .sec-title { font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; margin: 0; max-width: none; } .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; } .service { display: flex; flex-direction: column; gap: 14px; background: var(--white); border: 1px solid var(--border-2); border-radius: 20px; padding: 32px 28px 28px; transition: box-shadow 140ms ease, transform 140ms ease; } .service:hover { box-shadow: 0 10px 24px -14px rgba(35, 31, 28, .18); transform: translateY(-2px); } .step { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .service h3 { font-size: 24px; font-weight: 800; margin: 0; max-width: none; } .service p { font-size: 15.5px; line-height: 1.6; color: var(--body); margin: 0; text-wrap: pretty; } /* Pins all three actions to one baseline however long the copy runs. */ .service-cta { margin-top: auto; padding-top: 18px; } /* The membership card is filled, not outlined — the one card that should be impossible to miss. */ .service.is-feature { background: var(--red); border-color: var(--red); color: #fff7f0; box-shadow: 0 16px 32px -16px rgba(211, 43, 37, .45); } .service.is-feature:hover { box-shadow: 0 18px 36px -14px rgba(211, 43, 37, .5); } .service.is-feature .step { color: #f6b8ae; } .service.is-feature h3 { color: var(--white); } .service.is-feature p { color: #fbe3dc; } .service.is-feature p strong { color: var(--white); } .arrowlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--red); } .arrowlink:hover { color: var(--red-deep); } .arrowlink span { transition: transform 140ms ease; } .arrowlink:hover span { transform: translateX(3px); } .pill-white, .pill-red { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 800; border: 0; cursor: pointer; border-radius: 999px; white-space: nowrap; } .pill-white { background: var(--white); color: var(--red); font-size: 15px; padding: 12px 22px; } .pill-white:hover { background: #fff0ea; } .pill-red { background: var(--red); color: var(--white); font-size: 14px; padding: 10px 18px; } .pill-red:hover { background: var(--red-deep); } /* ---- compact bundle cards (home only) ---- */ .bcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .bmini { display: flex; flex-direction: column; gap: 6px; background: var(--white); border: 1px solid var(--border-2); border-radius: 20px; padding: 26px 26px 24px; transition: border-color 140ms ease, box-shadow 140ms ease; } .bmini:hover { border-color: var(--red-border); box-shadow: 0 10px 24px -14px rgba(35, 31, 28, .18); } .bmini-tag { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .bmini h3 { font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; max-width: none; } .bmini-meta { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 2px 0 0; } .bmini-meta strong { color: var(--body); font-weight: 800; } .bmini-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-width: 0; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--border-2); } .bmini-price { display: flex; align-items: baseline; gap: 8px; font-size: 26px; font-weight: 800; } .bmini-price span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .finenote { font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 640px; margin: 24px 0 0; } .finenote a { text-decoration: underline; } @media (max-width: 1100px) { .bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .sec-title { font-size: 30px; } .bcards { grid-template-columns: 1fr; } .bmini-foot { flex-direction: column; align-items: stretch; } .bmini-foot form, .bmini-foot .pill-red { width: 100%; } } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 20px 0 8px; } .tile { display: grid; gap: 4px; padding: 18px 20px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); transition: box-shadow 140ms ease, transform 140ms ease; } .tile:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .tile-label { font-weight: 800; font-size: 15.5px; } .tile-count { font-size: 13px; color: var(--muted); } /* ---------------------------------------------------------- pagination */ .pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px; } .pager-step { padding: 10px 16px; border: 1.5px solid var(--border-4); border-radius: 10px; font-size: 14.5px; font-weight: 700; background: var(--white); white-space: nowrap; } .pager-step:hover { background: var(--tint); } .pager-nums { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .pager-nums a, .pager-nums .is-current { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 14.5px; font-weight: 700; } .pager-nums a { border: 1px solid var(--border); background: var(--white); } .pager-nums a:hover { background: var(--tint); } .pager-nums .is-current { background: var(--red); color: var(--white); } .pager-nums .gap { color: var(--muted); padding: 0 2px; } .pager-count { font-size: 13.5px; color: var(--muted); margin: 0 0 48px; } /* ------------------------------------------------------ commerce screens */ .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 40px; max-width: 1200px; align-items: stretch; } /* Cards are flex columns so the CTA pins to the bottom: the notes are different lengths, and the buttons used to sit at three different heights. */ .plan { display: flex; flex-direction: column; border: 1.5px solid var(--border-2); border-radius: 18px; padding: 28px; background: var(--white); } /* Selection is drawn with an inset shadow, not a thicker border, so the chosen card does not grow 1px and shunt its own contents. */ .plan.is-selected { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red), 0 16px 40px rgba(211,43,37,.12); } /* The gap above the button lives on the feature list (margin-bottom below): the CTA is a
while memberships are prepaid but the button itself once subscriptions are on, and padding on the went inside the button, leaving it touching the list on phones (owner, 7 Nov 2026: "Padding issue"). */ .plan-cta { margin-top: auto; } .plan-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .kicker { font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--muted); } .badge { background: var(--white); border: 1px solid var(--red-border-2); color: var(--red-deep); font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; } .price { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .price.sm { font-size: 26px; } .price span { font-size: 13.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; } .plan .note { font-size: 14.5px; color: var(--body); min-height: 4.4em; margin: 10px 0 0; } .price .per { display: block; font-size: 13.5px; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-top: 2px; } .features { list-style: none; padding: 16px 0 0; margin: 16px 0 20px; border-top: 1px solid var(--stripe); font-size: 14.5px; } .features li { padding: 5px 0; color: var(--body); display: flex; gap: 8px; } .features li::before { content: "✓"; color: var(--success); font-weight: 800; } /* Shown, but struck through: every card lists the same four lines, so the rows align and the one thing the yearly plan adds is visible rather than absent. */ .features li.is-off { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-4); } .features li.is-off::before { content: "—"; color: var(--border-4); text-decoration: none; } .compare { border: 1px solid var(--border); border-radius: 18px; overflow-x: auto; background: var(--white); max-width: 1200px; } .compare table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; } .compare th, .compare td { padding: 16px 24px; text-align: left; } .compare thead th { font-weight: 800; border-bottom: 1px solid var(--border); } .compare .is-member { background: var(--red-tint); color: var(--red-deep); } .compare tbody .is-member { background: var(--red-tint-2); border-top: 1px solid var(--red-border); } .compare tbody th { font-weight: 600; color: var(--body); border-top: 1px solid var(--stripe); } .compare tbody td { border-top: 1px solid var(--stripe); } .bundle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1200px; } /* A bundle card leads with the product. The cover is a 2x2 mosaic of sheets the bundle actually contains, queried from the catalogue — a card can therefore never promise artwork that is not in the pack. */ .bcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-card); transition: box-shadow 140ms ease, transform 140ms ease; } .bcard:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } /* The cover is the product in the hand: three of the bundle's own sheets, fanned like printed paper on the class's colour (go-live item 25, owner 7 Nov 2026: "Improve landing pages" — the old 2x2 mosaic cropped every sheet to its header). A chosen cover image (has-art) still fills the frame. */ .bcard, .bundle-page { --bc-tint: var(--stripe); } [data-bundle="nursery"] { --bc-tint: #fdf0e4; } [data-bundle="lkg"] { --bc-tint: #e9f1fb; } [data-bundle="ukg"] { --bc-tint: #e7f4ec; } [data-bundle="phonics"] { --bc-tint: #f1ecfa; } [data-bundle="hindi"] { --bc-tint: #fdeeea; } [data-bundle="punjabi"] { --bc-tint: #eff4e3; } .bcard-cover { position: relative; display: block; background: var(--bc-tint); aspect-ratio: 16 / 10; overflow: hidden; } .bcard-tile { position: absolute; top: 13%; left: 50%; width: 34%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--white); border-radius: 6px; box-shadow: 0 1px 2px rgba(22, 24, 29, .08), 0 12px 24px -10px rgba(22, 24, 29, .32); transform-origin: 50% 100%; transition: transform 220ms ease; } .bcard-tile img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .bcard-tile:nth-child(1) { z-index: 1; transform: translateX(-108%) rotate(-8deg); } .bcard-tile:nth-child(2) { z-index: 3; transform: translateX(-50%) translateY(-3%); } .bcard-tile:nth-child(3) { z-index: 2; transform: translateX(8%) rotate(8deg); } .bcard-tile:nth-child(n+4) { display: none; } .bcard:hover .bcard-tile:nth-child(1) { transform: translateX(-114%) rotate(-11deg); } .bcard:hover .bcard-tile:nth-child(3) { transform: translateX(14%) rotate(11deg); } @media (prefers-reduced-motion: reduce) { .bcard-tile { transition: none; } } .bcard-fallback { grid-column: 1 / -1; display: grid; place-items: center; color: var(--muted); background: var(--fill); } .bcard-badge { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .94); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; box-shadow: 0 2px 10px rgba(22, 24, 29, .12); } .bcard-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; } .bcard-body h3 { font-size: 20px; font-weight: 800; margin: 0 0 4px; max-width: none; } .bcard-meta { font-size: 13.5px; color: var(--muted); margin: 0; } .bcard-meta strong { color: var(--ink); } /* margin-top:auto keeps every price row on the same line across the row of cards, whatever the title wraps to. */ .bcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; } /* A bundle's own page, /shop/bundles// (go-live item 14): its picture, the price and Add to cart, then a strip of the real worksheets inside. */ .bundle-page .bp-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 44px; align-items: center; margin: 8px 0 48px; } /* The picture sits on its class's colour, like the cards' paper does. */ .bundle-page .bp-pic { background: var(--bc-tint); border-radius: 24px; padding: clamp(14px, 2vw, 22px); } .bundle-page .bp-pic img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--white); box-shadow: 0 18px 40px -22px rgba(22, 24, 29, .45); } .bundle-page .bp-info h1 { margin: 0 0 10px; max-width: 16ch; } .bundle-page .bp-info .bcard-meta { font-size: 15px; } /* What it costs, the button and the small print, together in one box. */ .bp-buy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; max-width: 460px; margin: 24px 0; padding: 20px 22px; background: var(--white); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-card); } .bp-buy form { margin: 0; } .bp-buy .btn-primary { padding: 14px 26px; } .bundle-page .bp-price { display: grid; margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .bundle-page .bp-price .muted { font-size: 13px; font-weight: 600; letter-spacing: 0; } .bp-buy .bp-note { grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid var(--stripe); } .bundle-page .bp-about { margin: 0; line-height: 1.65; max-width: 62ch; color: var(--body); } .bundle-page .bp-h2 { margin: 0 0 18px; } /* The sheets inside: one row of real pages, not eight posters. */ .bundle-page .bp-inside { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; margin: 0 0 8px; } .bundle-page .bp-tile { display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 8px; background: var(--white); box-shadow: 0 1px 2px rgba(22, 24, 29, .07), 0 10px 22px -12px rgba(22, 24, 29, .35); } .bundle-page .bp-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } @media (max-width: 1100px) { .bundle-page .bp-inside { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 760px) { .bundle-page .bp-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 36px; } .bp-buy { max-width: none; } .bundle-page .bp-inside { gap: 10px; } } .bcard-price { display: grid; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .bcard-price .muted { font-size: 12.5px; font-weight: 600; letter-spacing: 0; } .bcard-foot .btn-primary { flex: none; padding: 11px 18px; } .crosssell { background: var(--dark); color: var(--white); border-radius: 18px; padding: 28px 32px; margin: 28px 0 56px; max-width: 1200px; } .crosssell h3 { font-size: 24px; color: var(--white); } .crosssell p { color: var(--dark-mid); font-size: 14.5px; max-width: 70ch; } /* The words on the left, the one thing to do on the right, on one centre line. */ .band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 32px; background: var(--red-tint); border: 1px solid var(--red-border); border-radius: 18px; padding: 28px 32px; margin: 40px 0 24px; max-width: 1200px; } .band h3 { grid-column: 1; font-size: 20px; margin: 0; } .band p { grid-column: 1; margin: 0; max-width: 70ch; color: var(--body); } .band .btn-primary { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; } @media (max-width: 760px) { .band { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; } .band .btn-primary { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; } } /* Constrain the list, not the section: putting max-width on the section (which is also a .wrap, and therefore centred) pushed the FAQ into the middle of the page while every other block stayed on the left edge. */ .faq dl { max-width: 1200px; } .faq dl > div { border-bottom: 1px solid var(--border); padding: 16px 0; } .faq dt { font-weight: 700; font-size: 15.5px; } .faq dd { margin: 6px 0 0; color: var(--body); } .cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; max-width: 1280px; margin-inline: auto; } .line { display: flex; justify-content: space-between; gap: 18px; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; margin-bottom: 12px; } .line h2, .line h3 { font-size: 17px; font-weight: 800; margin: 0 0 2px; max-width: none; } .line-price { font-size: 19px; font-weight: 800; text-align: right; } .line-price s { color: var(--muted); font-weight: 600; font-size: 14px; display: block; } .free { color: var(--success); } .summary { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: var(--shadow-sticky); position: sticky; top: 130px; } .summary h2 { font-size: 17px; margin: 0 0 14px; } .summary .row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 15px; gap: 16px; } .summary .row.saving { color: var(--success); font-weight: 700; } .summary .row.total { font-size: 22px; font-weight: 800; border-top: 1px solid var(--stripe); margin-top: 8px; padding-top: 14px; } .summary .btn-primary { margin: 14px 0 8px; } .upsell { border: 1px dashed var(--border-4); border-radius: 16px; padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 16px 0; } .empty-card { border: 1px solid var(--border); border-radius: 18px; padding: 60px; text-align: center; background: var(--white); } .empty-card h1, .empty-card h2 { max-width: none; } .link { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; } .inline { display: inline; } .panel { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 28px; } /* Two fields side by side, per the handoff. They were stacking full width, which left an 800px input for a 10-digit phone number. */ .fields { display: grid; gap: 14px; } .fields.two-up { grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 720px) { .fields.two-up { grid-template-columns: 1fr; } } .fields label { font-size: 13.5px; font-weight: 700; display: grid; gap: 6px; } .fields input { border: 1.5px solid var(--border-4); border-radius: 12px; padding: 14px; font: inherit; font-size: 15px; } .sub { font-size: 15.5px; font-weight: 800; margin: 20px 0 12px; } /* Three explicit tracks. auto-fit was emitting a phantom fourth column at 0px because the container is wider than 3 x 180px + gaps. */ .pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 720px) { .pay-grid { grid-template-columns: 1fr; } } .pay { position: relative; border: 1.5px solid var(--border-2); border-radius: 12px; padding: 14px 14px 14px 42px; display: grid; gap: 2px; cursor: pointer; font-size: 15px; background: var(--white); transition: border-color 140ms ease, background 140ms ease; } .pay:hover { border-color: var(--border-4); } /* The real radio is hidden and redrawn, so the whole tile is the hit target rather than an 13px dot. */ .pay input { position: absolute; opacity: 0; width: 0; height: 0; } .pay::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); /* `* { box-sizing }` does not match pseudo-elements, so the ring's border was added OUTSIDE its 18px and pushed the dot under the label. */ box-sizing: border-box; width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--border-4); background: var(--white); transition: border-color 140ms ease, border-width 140ms ease; } /* Selection follows the radio itself. The previous version hardcoded the highlight on the first option, so choosing Card or Netbanking changed nothing on screen. The selected border is drawn with box-shadow rather than a thicker border: growing the border re-flowed the tile's padding by half a pixel and shunted the label left, under the dot. */ .pay:has(input:checked), .pay.is-selected { background: var(--red-tint); border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); } .pay:has(input:checked)::before, .pay.is-selected::before { border: 5px solid var(--red); } .pay:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; } .pay .muted { font-size: 12.5px; } .dev-note { background: var(--amber-bg); color: var(--amber-fg); border-radius: 12px; padding: 14px; font-size: 14px; margin-top: 18px; max-width: 70ch; } .status { border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; background: var(--white); margin-bottom: 24px; max-width: 820px; } .status.ok { background: var(--success-bg); border-color: #cfe8d9; } .owned { list-style: none; padding: 0; max-width: 820px; } .owned li { padding: 10px 0; border-bottom: 1px solid var(--stripe); } /* ------------------------------------------------------------ auth page */ /* Centred single card. The previous version stacked three separate panels in a full-width column, which left the page looking empty and gave no sense of which method to use. */ /* ------------------------------------------------------------ auth page */ /* Split screen: brand panel left, form right — the same shape as the Easykids WhatsApp desk sign-in. The panel is dropped below 820px so the form gets the full width rather than being squeezed under decoration. */ .authbody { background: var(--white); } .authsplit { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; } .authbrand { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 46px clamp(32px, 4vw, 60px); color: var(--white); background-image: url("/assets/hero.webp"); background-size: cover; background-position: center 40%; } /* Deep red scrim: brand colour, and it holds white text at a readable contrast over artwork that is otherwise warm and busy. */ .authbrand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(122, 20, 16, .94) 0%, rgba(22, 24, 29, .92) 100%); } /* The logo sits on a white chip rather than being inverted. brightness(0) invert(1) flattens the red "E" mark into a white silhouette and throws the brand mark away; a chip keeps the logo exactly as drawn. */ .authbrand-logo { display: inline-flex; align-items: center; align-self: flex-start; background: var(--white); border-radius: 12px; padding: 10px 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); } .authbrand-logo img { height: 34px; width: auto; } .authbrand-hero { margin-top: auto; } .authbrand-hero h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; color: var(--white); max-width: none; } .authbrand-hero p { font-size: 15.5px; line-height: 1.55; opacity: .88; max-width: 460px; margin: 0; } .authbrand-foot { margin-top: auto; padding-top: 40px; font-size: 12.5px; opacity: .8; display: flex; align-items: center; gap: 8px; } .authbrand-foot .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .authform-side { display: flex; align-items: center; justify-content: center; padding: 40px var(--gutter); background: var(--white); } .authform { width: 100%; max-width: 380px; } .authform h2 { font-size: 28px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.02em; max-width: none; } .authform .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 26px; } .authblock { display: grid; gap: 10px; margin-bottom: 16px; } .authblock label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; } .authblock input { width: 100%; border: 1.5px solid var(--border-4); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 15px; background: var(--white); } /* No red border on focus. The global :focus-visible rule already draws a red ring 2px outside the field, so recolouring the border as well drew two red outlines around one input. The ring is the indicator; the border stays put. */ .authblock input:focus { border-color: var(--border-4); } .authblock .block { margin-bottom: 0; } /* +91 is fixed for every account, so it is shown rather than typed. The ROW owns the border; the prefix and input inside it have none. Giving each its own border drew two lines at the seam. */ .authrow { display: flex; align-items: stretch; border: 1.5px solid var(--border-4); border-radius: 10px; background: var(--white); overflow: hidden; } .authrow:focus-within { border-color: var(--red); } .authrow .prefix { display: grid; place-items: center; padding: 0 12px; border: 0; border-right: 1px solid var(--border); background: var(--fill); font-size: 15px; font-weight: 600; color: var(--body); } .authrow input { border: 0; border-radius: 0; flex: 1; min-width: 0; } .authrow input:focus { outline: none; } .steplabel { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--red-deep); background: var(--red-tint); border-radius: 999px; padding: 4px 10px; justify-self: start; } .sentto { margin: -2px 0 4px; font-size: 13px; color: var(--body); } /* While a code is in flight, hide the alternatives so the screen asks one question at a time. */ .otp-pending .authdivider, .otp-pending #pw-open, .otp-pending #google-block, .otp-pending #google-origin-note, .otp-pending #g_id_onload, .otp-pending .g_id_signin { display: none; } /* Password mode replaces the OTP form — but NOT Google. Around 70% of the migrated accounts were created with Google and had a random WordPress password generated for them that their owner has never seen. Someone reaching for "password" is therefore quite likely to be one of them, about to fail twice and give up. Leaving the Google button on screen turns that dead end into a reminder at the exact moment it is needed. */ .pw-mode #otp-start, .pw-mode #otp-verify, .pw-mode #pw-open { display: none; } .switchlink { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 20px 0 0; padding: 16px 0 0; background: none; border: 0; border-top: 1px solid var(--border); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--body); text-align: center; cursor: pointer; } .switchlink:hover { color: var(--ink); } #pw-panel .switchlink { font-weight: 500; color: var(--muted); } #pw-panel .switchlink:hover { color: var(--ink); } /* WhatsApp green, so the route out is recognised before the words are read. */ .icon-wa { color: #25d366; flex: none; } .codeinput { letter-spacing: .5em; text-align: center; font-size: 22px !important; font-weight: 700; } .authdivider { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--muted); font-size: 12.5px; } .authdivider::before, .authdivider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .authmsg { border-radius: 10px; padding: 11px 13px; font-size: 13.5px; margin-bottom: 16px; } .authmsg.is-error { background: var(--red-tint); color: var(--red-deep); border: 1px solid var(--red-border); } .authmsg.is-ok { background: var(--success-bg); color: var(--success); border: 1px solid #cfe8d9; } .authnote { margin-top: 14px; font-size: 12px; color: var(--muted); background: var(--tint); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; } .authnote code { background: var(--fill); padding: 1px 5px; border-radius: 4px; } .authdetails { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 20px; } .authdetails summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--body); } .authdetails summary:hover { color: var(--ink); } .authdetails[open] summary { margin-bottom: 16px; } .authfoot { margin-top: 26px; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; } .authfoot a { color: var(--muted); } .authfoot a:hover { color: var(--ink); text-decoration: underline; } .linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; justify-self: center; } .authform-logo { display: none; } @media (max-width: 820px) { .authsplit { grid-template-columns: 1fr; } .authbrand { display: none; } .authform-side { min-height: 100vh; align-items: flex-start; padding-top: 48px; } .authform-logo { display: inline-flex; margin-bottom: 32px; } .authform-logo img { height: 36px; width: auto; } } button[disabled] { opacity: .6; cursor: not-allowed; } .account, .cart, .checkout { padding-bottom: 56px; } .order { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; margin-bottom: 12px; max-width: 820px; } .order-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; } .order-head h3 { font-size: 16px; margin: 0 0 2px; } .order-total { font-size: 18px; font-weight: 800; white-space: nowrap; } .order-items { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--stripe); } .order-items li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 14.5px; } .order-items .kind { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--fill); border-radius: 999px; padding: 2px 8px; margin-left: 8px; } /* ------------------------------------------------------------- footer */ .footer { background: var(--dark); color: var(--dark-bright); padding: 52px 0 30px; margin-top: 56px; } /* Explicit tracks: repeat(auto-fit, ...) is invalid in a list that also has an `fr` track, which silently voided this rule and collapsed the footer into a single column on every page. */ .footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; } .footer-brand p { font-size: 14px; color: var(--dark-dim); max-width: 34ch; } .footer .inverted { filter: brightness(0) invert(1); height: 40px; width: auto; } .footer h4 { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; } .footer a { display: block; font-size: 14px; color: var(--dark-bright); margin-bottom: 9px; } .footer a:hover { color: var(--white); } .footer-bottom { border-top: 1px solid var(--dark-rule); margin-top: 30px; padding-top: 20px; font-size: 12.5px; color: var(--muted); } /* -------------------------------------------------------- breakpoints */ @media (max-width: 1500px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 1240px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 980px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* "Help" joined the menu (7 Nov 2026): the row tightens instead of pushing Get Premium off the right edge (it overflowed by 36px at 1280). */ @media (max-width: 1460px) { .header-inner { gap: 16px; } .nav { gap: 12px; } .search { flex-basis: 170px; min-width: 140px; } .action-label { display: none; } .action { padding: 9px; } } /* Below about 1270px the desktop row does not fit (it already ran off the page at 1000px before "Help"): the phone header — menu, logo, search, cart, account — takes over here, without the phone's bottom tab bar. */ @media (max-width: 1270px) { .utility, .nav, .actions, .search { display: none; } .m-chip, .m-actions { display: flex; } .m-actions { gap: 8px; margin-left: auto; } .drawer:not([hidden]), .drawer-backdrop:not([hidden]) { display: block; } .header-inner { gap: 12px; } .logo { order: 2; } .nav-toggle { order: 1; } .m-actions { order: 3; } } @media (max-width: 1100px) { /* Search drops out of the row before the navigation does: every page can be reached from the nav, but only the home hero needs search to be visible. */ .search { display: none; } } @media (max-width: 1100px) { .sheet, .cart-layout, .checkout-layout { grid-template-columns: 1fr; } .rail, .summary { position: static; } } @media (max-width: 900px) { /* Desktop chrome off */ .utility, .nav, .actions, .search { display: none; } /* Mobile chrome on: menu chip, logo, spacer, search + cart chips */ .m-chip, .m-actions { display: flex; } .m-actions { gap: 8px; margin-left: auto; } .drawer:not([hidden]), .drawer-backdrop:not([hidden]) { display: block; } .tabbar { display: grid; } .header-inner { gap: 12px; padding-block: 8px 12px; align-items: center; } .logo { order: 2; } .logo img { height: 26px; } .nav-toggle { order: 1; } .m-actions { order: 3; } /* Clear the fixed tab bar. */ body { padding-bottom: 78px; } .footer { margin-bottom: 0; } .hero-search { flex-direction: column; } } @media (max-width: 900px) { /* Five footer columns at 1fr each never fit a phone: the link columns kept their content width and pushed the page into horizontal scroll. */ .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .empty-card { padding: 40px 20px; } .brandbar-inner { gap: 10px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ========================================================================== Sign-in modal, checkout, side cart, country dropdown ========================================================================== */ /* --- sign-in modal ------------------------------------------------------ */ .ekm { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; } .ekm-backdrop { position: absolute; inset: 0; background: rgba(22, 24, 29, .5); } .ekm-panel { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--white); border-radius: 20px; padding: 32px 28px 26px; box-shadow: 0 24px 60px rgba(22, 24, 29, .28); } .ekm-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--fill); color: var(--body); cursor: pointer; } .ekm-x:hover { background: var(--border-2); } .ekm-logo { height: 30px; width: auto; margin-bottom: 18px; } .ekm-panel h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; max-width: none; letter-spacing: -.02em; } .ekm-sub { font-size: 14px; color: var(--body); margin: 0 0 20px; } .ekm-fine { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; text-align: center; } /* Nothing behind the dialog should scroll while it is open. */ body.ekm-open { overflow: hidden; } /* Once a code is on its way the other methods are noise. */ .ekm.is-otp .authdivider, .ekm.is-otp .authdetails, .ekm.is-otp #ekm-google, .ekm.is-otp .ekm-fine { display: none; } /* --- country dropdown --------------------------------------------------- */ /* The real