/* ============================================================================ The public pages — landing, store, sign in, register. Tokens copied from src/parts/p01.html rather than reinvented, so a visitor who lands here and then opens the app is looking at one product. When a token changes there, change it here. (There is no honest way to share them: the app's CSS is assembled by a Python build, this is served by Apache.) Two themes, three states. An explicit choice stamps data-theme on ; the default "system" setting stamps nothing, so prefers-color-scheme is the only thing separating light from dark for most visitors. Every colour is a token defined on bare :root and redefined in both places, never declared only inside a media query. ========================================================================== */ :root{ --f-ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-dis:'Outfit','Plus Jakarta Sans',system-ui,sans-serif; /* THE THIRD FACE, AND IT WAS MISSING FROM THIS FILE ENTIRELY until 24 August 2026. Instrument Serif is one of the three the product is designed in, it is served from fonts/ beside this stylesheet, and src/parts/p01.html declares --f-ser for the app -- but the public pages never did. So every var(--f-ser) here resolved to nothing and fell back to the body font, and the one typographic contrast in the whole design silently did not happen: the spot-the-mistake sentence, the pull quotes and the stand-first line were all set in Plus Jakarta Sans and had been from the day they shipped. Found by reading a computed style rather than the stylesheet. It survived check-css-vars.py because that script pools every file it scans, and p01.html defining the token counted as this file defining it -- worth knowing before trusting that checker on a name used in two places. */ --f-ser:'Instrument Serif','Iowan Old Style',Georgia,serif; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px; --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.46,.64,1); --maxw:1140px; --a1:#5A45FF; --a2:#A855F7; --a3:#FF3D9A; --grad:linear-gradient(135deg,var(--a1) 0%,var(--a2) 48%,var(--a3) 100%); /* THE BRAND ACCENTS AT FULL STRENGTH, and fixed rather than themed. Three attempts were made to darken this so white would clear 4.5 on every stop, and the owner rejected each one as losing its lightness. She is right, and the reason is worth writing down: #A855F7 is 3.96:1 under white and #FF3D9A is 3.29:1 -- so EVERY solid button on this site has been below the small-text floor since it shipped, Buy now included. Holding this one button to a stricter standard made it visibly duller than the buttons beside it, which is a real fault a reader can see, traded against one they cannot. THE CONTRAST IS A SEPARATE, SITE-WIDE DECISION -- either the accents move for every button at once, or the labels get a scrim. Fixing it on one button was the wrong shape of fix. WHY THE TOKEN STILL EXISTS: the app rewrites both --grad-brand and --grad-deep from the hero palette on every tick of its time-of-day theming (p09b.html), so a button using either drifts through the day and stops matching the public shop. This one is fixed and shared. */ /* Her brand accents, at their own values and in their own places -- the same gradient every .btn-solid on the site carries. Fixed rather than themed: the app rewrites both --grad-brand and --grad-deep from the hero palette on every tick of its time-of-day theming (p09b.html), so a button built on either drifts through the day and stops matching the public shop. */ /* THE GRADIENT WHITE TEXT MAY STAND ON. The same three colours as --grad with the lightness lowered until white clears 4.5:1 everywhere -- hue and saturation carried across untouched, so it is recognisably the same button. --grad is 3.96:1 at its middle stop and 3.29:1 at its end, and stays as it is: it has 43 uses and most are decoration. */ --grad-btn:linear-gradient(135deg,#5A45FF 0%,#9D40F6 48%,#E4006D 100%); --bg:#F2F4FE; --surface:#FFFFFF; --surface-2:#F7F8FF; --surface-3:#EFF1FE; --line:#E2E6F7; --line-strong:#D2D8F0; --ink:#0F1130; --ink-2:#4A4E75; --ink-3:#7B7FA4; --ink-4:#A7ABC8; /* the quietest grey that is still readable as small text. --ink-3 is what the app sets its eyebrows in and it is 3.88:1 on white, under the 4.5 a small size needs; --ink-2 is 7.96 and reads as bold. This is 4.78 -- within a shade of --ink-3 to look at, and above the line. */ --ink-quiet:#6C7096; --brand:var(--a1); --brand-soft:rgba(90,69,255,.09); --brand-line:rgba(90,69,255,.22); --ok:#059669; --ok-soft:rgba(5,150,105,.1); --ok-line:rgba(5,150,105,.25); --no:#E11D6F; --no-soft:rgba(225,29,111,.09); --no-line:rgba(225,29,111,.24); /* THE SAME TWO, DEEP ENOUGH TO BE READ AS A SENTENCE. --ok is #059669, which is 3.77:1 on white -- fine as a tick or a bar, under the 4.5 a line of body text needs, and the store card sets a whole corrected sentence in it. These were used on that card and never defined: check-css-vars.py caught it, and until now both colours resolved to nothing and inherited whatever the card happened to be using. 5.48 and 5.45 on white. */ --ok-ink:#047857; --no-ink:#C81E6B; --warn:#7C3AED; --warn-soft:rgba(124,58,237,.09); --warn-line:rgba(124,58,237,.24); --sh-1:0 1px 2px rgba(24,20,70,.05), 0 2px 6px rgba(24,20,70,.04); --sh-2:0 2px 4px rgba(24,20,70,.05), 0 10px 24px -6px rgba(24,20,70,.09); --sh-3:0 4px 8px rgba(24,20,70,.05), 0 22px 44px -12px rgba(30,22,86,.16); --sh-brand:0 12px 32px -8px rgba(90,69,255,.42); --focus:#5A45FF; --glass:rgba(255,255,255,.78); --aura:.5; /* AURORA, AT AFTERNOON. Copied out of the app's own palette in src/parts/p09b.html -- BASE.aura.light.afternoon. The pages were on aura.base, which is the app's midnight-to-anything default rather than a time of day. */ --au1:#AFD8FF; --au2:#D6C4FF; --au3:#A9EFE0; /* THE EMPHASISED WORD ON A BRAND BAND, and its own token because the thing it needs is not the thing --au1 became. The rule using it says it wants "the aurora's pale blue", and in this theme --au1 IS pale blue. The dark theme flips the aurora trio to deep versions -- right for an aurora, which is a background -- so the same rule painted #3560CC on the dark band and measured 1.12:1. Not dim: very nearly invisible, and the owner reported it as unreadable before it was measured. Identical to --au1 here on purpose, so the light band does not move. */ --band-em:#AFD8FF; /* THE HERO TRIO, which the pages did not have at all. BASE.hero.light .afternoon. In the app this is what .hero and .profhero are painted with, and it is the part of the palette that moves with the clock -- the brand trio above never does. So the bands take this and the buttons keep --grad. */ --h1:#0E8FB8; --h2:#4B4BE8; --h3:#9B45E8; /* MIRRORED, and the colours are untouched. The app paints its hero h1 -> h2 -> h3 at 135deg, which puts #0E8FB8 -- the palest stop of the three -- in the top-left corner, and the top-left corner is where every eyebrow and heading on a band begins. White on that teal is 3.72:1 at best. * Measured across four pages at two widths, sampling all four corners of every line rather than one: * h1 -> h3 (the app's order) 34 lines under the bar, worst 3.84 h3 -> h1 (this) 0 lines under the bar, worst 4.72 * Same three hexes, same angle, same Aurora afternoon -- only which corner the pale one lands in. To go back to the app's exact order, swap --h3 and --h1 here and put the midpoint back to 52%. */ /* THE BAND TRIO, and it is its own trio on purpose. * The bands used to be painted --a3 -> --h2 -> --h1: the button's own pink, the hero indigo, the hero teal. Three colours at three different DEPTHS -- white sat on 3.29:1, then 6.05, then 3.72 -- so the band got lighter and darker as it crossed the screen, which is what read as restless whatever the hues were doing. Two of those numbers were also under the 4.5 small white text needs. * LEVELLED, NOT DRAINED, and the difference cost a round. The first attempt took a third of the saturation out as well and came back "now looks dull". The dullness was the saturation; the restlessness was the swing. Only the swing needed fixing. * Saturation is within a few points of the original at every stop. What changed is that all three now sit at the same depth, so the band no longer brightens and darkens across its own width: * pink #FF3D9A s100 l62 3.29 -> #DA217A s74 l49 4.69 indigo #4B4BE8 s77 l60 6.05 -> #6464E4 s70 l64 4.68 teal #0E8FB8 s86 l39 3.72 -> #127D9E s80 l34 4.72 * AND IT CLEARS A CONTRAST FAULT. 3.29 and 3.72 are both under the 4.5 that small white text needs, so the pink and teal ends of every band were failing. Every stop clears it now. * THE BUTTONS ARE UNTOUCHED -- --grad, --a1/a2/a3 and the M. mark keep their full vibrancy, which is right: an accent can be louder than a field. * --h1/--h2/--h3 stay exactly as the app has them, because they are copied from its Aurora afternoon palette and are what keeps the two halves of the product looking related. The white buttons on a band still take their text colour from --h2. * 135deg, the same diagonal the buttons and the M. mark run at, and the same pink-to-blue flow: it was horizontal for one round and is back on the diagonal. */ --b1:#DA217A; --b2:#6464E4; --b3:#127D9E; --grad-hero:linear-gradient(135deg,var(--b1),var(--b2) 48%,var(--b3)); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#05071A; --surface:#0E1230; --surface-2:#141936; --surface-3:#1B2145; --line:rgba(140,155,255,.13); --line-strong:rgba(150,165,255,.24); --ink:#EFF1FF; --ink-2:#AFB6E4; --ink-3:#7A82B8; --ink-4:#565D8C; /* on the dark card --ink-3 is already 4.98:1, so this is the app's own value */ --ink-quiet:#7A82B8; --brand:#8B7BFF; --brand-soft:rgba(139,123,255,.15); --brand-line:rgba(139,123,255,.34); --ok:#34E5B0; --ok-soft:rgba(52,229,176,.13); --ok-line:rgba(52,229,176,.32); --no:#FF5C93; --no-soft:rgba(255,92,147,.13); --no-line:rgba(255,92,147,.32); /* on a dark card the ordinary pair are already 11.31:1 and 6.28:1, so the deeper versions would be a step the wrong way -- they ARE the pair here */ --ok-ink:#34E5B0; --no-ink:#FF5C93; --warn:#C084FC; --warn-soft:rgba(192,132,252,.13); --warn-line:rgba(192,132,252,.32); --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 4px 18px rgba(0,0,0,.5); --sh-3:0 12px 40px rgba(0,0,0,.6); --sh-brand:0 12px 40px -10px rgba(139,123,255,.6); --focus:#A79BFF; --glass:rgba(10,14,38,.78); --aura:.34; --au1:#3560CC; --au2:#6A3BD1; --au3:#1B8F9E; /* Pale, where --au1 is deep. Measured 4.95:1 at the darkest stop of the band behind it, against 1.12:1 before. */ --band-em:#BFE9FF; --h1:#123A72; --h2:#2C2585; --h3:#136273; --b1:#A81A5E; --b2:#4A4ADB; --b3:#0E6480; } } :root[data-theme="dark"]{ --bg:#05071A; --surface:#0E1230; --surface-2:#141936; --surface-3:#1B2145; --line:rgba(140,155,255,.13); --line-strong:rgba(150,165,255,.24); --ink:#EFF1FF; --ink-2:#AFB6E4; --ink-3:#7A82B8; --ink-4:#565D8C; --ink-quiet:#7A82B8; --brand:#8B7BFF; --brand-soft:rgba(139,123,255,.15); --brand-line:rgba(139,123,255,.34); --ok:#34E5B0; --ok-soft:rgba(52,229,176,.13); --ok-line:rgba(52,229,176,.32); --no:#FF5C93; --no-soft:rgba(255,92,147,.13); --no-line:rgba(255,92,147,.32); --ok-ink:#34E5B0; --no-ink:#FF5C93; --warn:#C084FC; --warn-soft:rgba(192,132,252,.13); --warn-line:rgba(192,132,252,.32); --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 4px 18px rgba(0,0,0,.5); --sh-3:0 12px 40px rgba(0,0,0,.6); --sh-brand:0 12px 40px -10px rgba(139,123,255,.6); --focus:#A79BFF; --glass:rgba(10,14,38,.78); --aura:.34; --au1:#3560CC; --au2:#6A3BD1; --au3:#1B8F9E; /* Pale, where --au1 is deep. Measured 4.95:1 at the darkest stop of the band behind it, against 1.12:1 before. */ --band-em:#BFE9FF; --h1:#123A72; --h2:#2C2585; --h3:#136273; /* the band trio again, deeper, so a band still reads as a band against a #05071A page -- and level in the same way, white on about 7.5:1 at all three rather than swinging. Same saturations as the light set. */ --b1:#A81A5E; --b2:#4A4ADB; --b3:#0E6480; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms !important;transition-duration:.01ms !important} } body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui); font-size:16.5px;line-height:1.62;font-weight:450;-webkit-font-smoothing:antialiased; overflow-x:hidden;position:relative} h1,h2,h3,h4{font-family:var(--f-dis);font-weight:800;line-height:1.08; letter-spacing:-.032em;margin:0;text-wrap:balance;color:var(--ink)} p{margin:0} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer; -webkit-tap-highlight-color:transparent} img,svg{display:block;max-width:100%} :focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:8px} .skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink); padding:12px 18px;border-radius:0 0 12px 0;z-index:200;font-weight:700} .skip:focus{left:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,32px)} /* the aurora, dimmed — the same signature the app carries, calmer on a page that is mostly text */ body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--bg)} body::after{content:"";position:fixed;inset:-20vh -10vw;z-index:-1;pointer-events:none; opacity:var(--aura); background: radial-gradient(42vw 42vw at 12% 8%, var(--au1), transparent 62%), radial-gradient(38vw 38vw at 88% 22%, var(--au2), transparent 60%), radial-gradient(36vw 36vw at 50% 96%, var(--au3), transparent 62%); filter:blur(60px)} /* ------------------------------------------------------------------ topbar */ .topbar{position:sticky;top:0;z-index:80;background:var(--glass); backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%); border-bottom:1px solid var(--line)} .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px} .brand{display:flex;align-items:center;gap:10px;min-width:0} .mark{flex:0 0 auto;border-radius:10px;overflow:hidden;box-shadow:var(--sh-brand);line-height:0} .wordmark{display:flex;flex-direction:column;line-height:1.03;min-width:0} .wordmark b{font-family:var(--f-dis);font-weight:600;font-size:12px;color:var(--ink-2); white-space:nowrap} .wordmark i{font-family:var(--f-dis);font-weight:800;font-size:17.5px;font-style:normal; letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent;white-space:nowrap;padding-right:.1em;margin-right:-.1em} .wordmark.small i{font-size:16px} .barnav{display:flex;align-items:center;gap:8px} /* Same size and shape as the app's, so somebody moving between the two is pressing the same button. */ .iconbtn{width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:grid; place-items:center;background:var(--surface);border:1px solid var(--line); color:var(--ink-2);transition:color .2s,border-color .2s,transform .2s var(--spring), box-shadow .2s} .iconbtn:hover{color:var(--brand);border-color:var(--brand-line);transform:translateY(-2px); box-shadow:var(--sh-1)} .iconbtn:active{transform:translateY(0) scale(.94)} /* Light shows the moon — press it to GO dark. Dark shows the sun. The icon is what you are switching to, not what you are in; the other way round reads as a status light and people press it expecting nothing to happen. */ .i-sun{display:none} :root[data-theme="dark"] .i-sun{display:block} :root[data-theme="dark"] .i-moon{display:none} /* the six site links. One rule for both shapes: a row inside the bar on a wide screen, a panel under it on a narrow one. */ .navlinks{display:flex;align-items:center;gap:2px} .navlinks a{font-weight:650;font-size:14.5px;color:var(--ink-2);padding:8px 11px; border-radius:10px;transition:color .2s,background .2s;white-space:nowrap} .navlinks a:hover{color:var(--brand);background:var(--brand-soft)} .navlinks a[aria-current="page"]{color:var(--brand);background:var(--brand-soft)} .navbtn{display:none} /* the crossing's phone copy, which lives in the panel. Hidden until 560. */ .crossgo{display:none} /* THE CROSSING, ONE SIZE, EVERY WIDTH -- AND THE PHONE'S IS THE ONE THAT WON. It is .btn-ghost for its colours and its hover, and it was also .btn for its SIZE: 46px tall with a 15px radius, which made it the largest thing in the bar and taller than the theme toggle beside it. On a phone it had been replaced outright by a smaller chip, so the same control was 46px in one layout and 38 in the other and the owner had to point at each difference in turn. THE CHIP WAS THE FINISHED ONE, so it is the chip's measurements that stay and the desktop that comes to meet them: 38px and a 12px radius, which is what .iconbtn is, so the crossing and the toggle now agree with each other AND with themselves at every width. No media query touches how it looks -- the ones below buy horizontal room and change nothing else. The type is --brand rather than --ink: this is a doorway into the other half of the site, and the colour is what says so without a second line of text. */ .bar .crossbtn{height:38px;border-radius:12px;padding:0 14px; font-size:13.5px;color:var(--brand)} .bar .crossbtn:hover{color:var(--brand);border-color:var(--brand)} /* 1180px is where SEVEN links, the toggle and the button stop fitting beside the wordmark — it was 1100 for six, and Home was added on 24 August. Below it they fold into a panel. */ @media (max-width:1180px){ .navbtn{display:grid} .navlinks{position:absolute;top:100%;right:clamp(16px,4vw,32px);left:clamp(16px,4vw,32px); flex-direction:column;align-items:stretch;gap:2px;padding:10px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-2);z-index:90} .navlinks a{padding:13px 14px;font-size:16px} /* page.js sets hidden on load. Without it the panel simply stays open, which is a tall header rather than an unreachable menu. */ .navlinks[hidden]{display:none} } @media (min-width:1181px){ /* the attribute is left on the element when the window is widened again */ .navlinks[hidden]{display:flex} } .bar{position:relative} @media (max-width:560px){ .bar{height:62px} .wordmark b{font-size:10.5px} .wordmark i{font-size:15.5px} /* THE CROSSING LEAVES THE BAR AND JOINS THE PANEL. Measured: with it in the bar the wordmark had 41px of the 71 it needs at 375, and none at all at 320 -- the brand was the only thing left that could shrink. It is the first item of the menu, above the links and ruled off from them. */ /* `.bar` in front on purpose: .crossbtn is also .btn, and the .btn rules sit LATER in this file, so a bare `.crossbtn{display:none}` ties on specificity and loses. Measured -- it did lose, and both copies showed at once. */ /* THE SAME BUTTON, AT EVERY WIDTH. It used to be hidden here and replaced by a second element -- a chip -- which then had to be talked into matching it and never quite did: same family and weight in the end, but 11.5px against 14.8, purple against ink, 12px radius against 15, 38px tall against 46. Two elements for one control is two things to keep in step, and they drifted on every property nobody had thought to check. So there is one element now and it needs no keeping in step. What the phone changes is the room around the letters, which is the only thing the bar is actually short of. */ /* THE MENU COPY GOES with it: the button beside Sign in is on screen at every width now, and two controls for one crossing is one too many. */ .navlinks .crossgo{display:none} } @media (max-width:379px){ /* THE WORDMARK'S TEXT PAYS FOR THE BUTTON. 71px of academy name against a crossing that must read the same here as it does on a desktop, and the logo mark beside it is not going anywhere -- the brand is still marked at every width, only its spelling goes and only on the narrowest phones. */ .bar .wordmark{display:none} /* and it needs no narrower padding: 113px fits the 114 the hidden wordmark leaves at 320, measured. */ } @media (max-width:465px){ /* the wordmark, the app and the menu, and nothing else fits. 465 AND NOT 420, corrected 12 September 2026 from two photographs of the same page. The owner's Galaxy S23 FE is 411 CSS px and read "Minati Ma'am's Academy"; an iPhone 16 Pro Max is 440 and read "Minati Ma'am / Acader". 420 was low enough to catch the Android phones and miss every large iPhone -- and large iPhones are most of the band: 430 (15 Pro Max, 16 Pro), 428 (14 Plus), 440 (16 Pro Max). Measured against the live site, not guessed, by walking the viewport and comparing the wordmark's laid-out width to the box it was given: 411 no button needs 71 has 71 whole 422 button needs 71 has 31 cut to "Ma'am" 440 button needs 71 has 48 cut to "Acader" 466 button needs 71 has 71 whole 466 is the first width where both fit, so the button goes at 465 and below. Re-measured with the rule in place: 421, 430 and 440 all whole. SHRINKING THE BUTTONS DOES NOT BUY IT. The rule below was tried across this band first, since it was already in this block; at 440 the wordmark was still 3px short. There is no arrangement where both fit, which is why this stays a choice rather than a layout tweak, and the choice is already made -- the button is what goes. WHAT IT COSTS: a visitor on a phone this wide cannot force the site light or dark by hand. Their phone's own setting still works -- page.css has a prefers-color-scheme block -- so the site still follows them. That was already true of every phone under 421px. */ .barnav #themeBtn{display:none} } @media (max-width:420px){ /* :not(.crossbtn) -- the crossing is 38px at every width by the rule near the top of this file, which is the whole point of it having one. Left in this selector it came out 40px on a phone and 38 on a desktop, which is precisely the inconsistency that rule exists to prevent. */ .barnav .btn:not(.crossbtn){height:40px;padding:0 14px;font-size:13.5px} } /* ----------------------------------------------------------------- buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; height:46px;padding:0 22px;border-radius:15px;font-family:var(--f-dis); font-weight:750;font-size:14.8px;letter-spacing:-.008em;white-space:nowrap; transition:transform .3s var(--spring),box-shadow .3s var(--ease),background .2s,color .2s,border-color .2s} .btn:active{transform:scale(.97)} .btn-solid{background:var(--grad-btn);color:#fff;box-shadow:var(--sh-brand)} .btn-solid:hover{transform:translateY(-2px)} .btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong); box-shadow:var(--sh-1)} .btn-ghost:hover{border-color:var(--brand-line);color:var(--brand);transform:translateY(-2px)} .btn-lg{height:54px;padding:0 28px;font-size:16px;border-radius:17px} .btn-sm{height:38px;padding:0 15px;font-size:13.5px;border-radius:12px} @media (max-width:560px){ .btn-lg{height:50px;font-size:15px;width:100%} } /* ------------------------------------------------------------------ pieces */ .eyebrow{font-family:var(--f-dis);font-size:11.5px;font-weight:750;letter-spacing:.16em; text-transform:uppercase;color:var(--brand)} .lede{color:var(--ink-2);font-size:clamp(16px,2.1vw,18.5px);line-height:1.6;max-width:56ch} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); padding:clamp(18px,3vw,26px);box-shadow:var(--sh-1)} .tag{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 11px; border-radius:99px;font-family:var(--f-dis);font-size:11.5px;font-weight:750; background:var(--surface-3);color:var(--ink-2);white-space:nowrap} .tag.brand{background:var(--brand-soft);color:var(--brand)} .tag.ok{background:var(--ok-soft);color:var(--ok)} .tag.warn{background:var(--warn-soft);color:var(--warn)} section{padding:clamp(52px,8vw,96px) 0} /* ----------------------------------------------------------- brand band -- THE PAGE ALTERNATES: light, coloured, light, coloured, top to bottom. var(--grad) is the M. mark's own background -- .port-seal fills the round plate with it, .wordmark i clips the letters out of it. A band painted in it is the logo at full width. THIS RULE REDEFINES NO TOKENS, AND THAT IS THE WHOLE POINT. The first version made --surface a pane darkened INTO the gradient. It measured well -- 7.44:1 for white text -- and it was wrong for a reason a contrast ratio cannot see: the card came out the same family as the band behind it. The owner: "I told you don't make foreground background same", "all cards inside all colored backgrounds should be light". So the band paints itself and says nothing else. Every card on it -- .card, .hm-say, .vs-p, .ratepanel, .eq, .hm-plan -- is the same white card it is on a light page, because :root still says --surface is #FFFFFF and --ink is #0F1130 and nothing here argues with that. Which also means every drawn thing inside a card keeps the treatment it was designed with: the violet room board, the grey chevron, the gradient avatar, the white tick on green. None of them need a dark-band variant any more, and the ones written for the old model are gone rather than adjusted. WHAT IS LEFT TO DO BY HAND is only the text that sits directly ON the colour. That set was read off the rendered page rather than guessed, and it is small: a section head, the prose column of a two-column section, the points and steps lists, and the note under the rates. THE GRADIENT IS RAW -- no scrim, on purpose: "use this same background across all color backgrounds", meaning the one the solid button and the credential card have. IT USED TO BE DEEPENED 30%, and that is worth knowing before anyone changes it back or blames it. White on the pink stop #FF3D9A is 3.29:1, and a band is 1140px across where the button is about 180 -- so a band shows the pink end at full size where the button barely reaches it. A flat 30% of --ink kept every hue relationship and took white to 5.65:1. Putting it back is one line in each of the THREE rules that paint a band -- .band-brand and .hm-band.band-brand just below, and .hm-close.band-brand further down. Missing one is visible: that is how the last one was caught. background:linear-gradient(rgba(15,17,48,.30) 0 100%),var(--grad); and SS11bp has the measured cost of not having it, band by band. */ .band-brand{ position:relative;overflow:hidden; background:var(--grad-hero); } /* A section that is also .hm-band would otherwise paint itself --surface, which is white -- the band would come out white. */ .hm-band.band-brand{background:var(--grad-hero);border-top:0} /* The soft light from the top-left that .fin::before draws, so a band has a light source and does not read as a flat slab. Behind everything. */ .band-brand::before{content:"";position:absolute;inset:-30% -8% auto -8%; height:150%;pointer-events:none;z-index:0; background:radial-gradient(58% 58% at 20% 0%, rgba(255,255,255,.15), transparent 62%)} .band-brand > *{position:relative;z-index:1} /* --- the text that stands on the colour, and nothing that stands on a card -- Every selector below is anchored either to .sechead or to a direct child of .wrap, so it cannot reach inside a card. That is deliberate: a rule written as `.band-brand h2` would turn a heading white inside a white card. */ /* h1 AS WELL AS h2. /ebooks opens with a .sechead whose heading is an h1, so when that section became coloured its headline stayed --ink -- navy on violet. It measured about 3.1, over the 3.0 bar for large text and wrong all the same, which is why it was found by looking rather than by the numbers. */ .band-brand .sechead h1, .band-brand .sechead h2, .band-brand > .wrap > .hm-two > div > h2{color:#fff} .band-brand .sechead .eyebrow, .band-brand > .wrap > .hm-two > div > .eyebrow{color:#fff} .band-brand .sechead .lede, .band-brand > .wrap > .hm-two > div > .lede, .band-brand > .wrap > .hm-note{color:#fff} .band-brand > .wrap > .hm-two > div > .hm-points li, .band-brand > .wrap > .hm-steps li{color:#fff} .band-brand > .wrap > .hm-two > div > .hm-points li b, .band-brand > .wrap > .hm-steps li b{color:#fff} /* AND A BOLD WORD INSIDE A LEDE, which was the last thing on the site under the bar: it inherits the lede's .92 and lands at 18.5px, a sixth of a pixel short of the 18.66 that would let bold text be judged as large. 4.33 against 4.5. Solid white is what every other bold-on-colour here already is. */ .band-brand .sechead .lede b, .band-brand > .wrap > .lede b, .band-brand > .wrap > .herotext > .lede b, .band-brand > .wrap > .hm-two > div > .lede b, .band-brand > .wrap.hm-two > div > .lede b{color:#fff} /* the little icon plates beside those lines, which were --brand-soft on white */ .band-brand > .wrap > .hm-two > div > .hm-points .hm-pi, .band-brand > .wrap > .hm-steps .hm-si{ background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.40);color:#fff} .band-brand > .wrap > .hm-two > div > .hm-more a{color:#fff} /* THE AFFILIATE DISCLOSURE ON /ebooks, which stands on the colour rather than on a card -- deliberately, per the note in its markup: the first version was "four lines in a grey slab and read as a warning notice rather than as a courtesy". So it has no background to inherit, and on a band its --ink-3 measured 1.46:1 and its bold 1.41:1. Invisible, on the one paragraph of that page that has to be readable for a reason other than design. Its rule at the very edge of the band is --brand-line, white in here already. */ .band-brand > .wrap > .eb-disc{color:#fff} .band-brand > .wrap > .eb-disc b{color:#fff} .band-brand > .wrap > .eb-disc .eb-dico{color:#fff} /* A SOLID BUTTON STANDING ON THE COLOUR INVERTS. One inside a card does not -- there it is the gradient on white, which is correct and is why this is anchored to a direct child of .wrap rather than to the band. */ .band-brand > .wrap > .herocta .btn-solid{background:#fff;color:var(--h2); box-shadow:0 14px 34px -10px rgba(0,0,0,.35)} .band-brand > .wrap > .herocta .btn-solid:hover{background:#fff;transform:translateY(-2px)} .band-brand > .wrap > .herocta .btn-ghost{background:rgba(255,255,255,.12);color:#fff; border-color:rgba(255,255,255,.42)} .band-brand > .wrap > .herocta .btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff; border-color:rgba(255,255,255,.6)} /* ══════════════ two more shapes of section, now that the home page is inverted ══ Everything above is anchored to `.band-brand > .wrap > ...` so it cannot reach inside a card. That is right, and it is why neither of the two shapes below is covered by any of it: the hero puts .herotext between .wrap and its words .wrap.hm-two is ONE element that is both, where every section coloured before was .wrap CONTAINING a .hm-two. A child combinator cannot match an element against itself. Measured before this block existed: --brand eyebrows at 1.32, 1.37 and 1.38 and --ink-2 ledes between 1.89 and 2.05, against a bar of 4.5. The headings measured about 3.1 -- just over the large-text bar and navy on violet all the same, which is the difference between passing and looking right. */ /* --- the hero, when the hero is the coloured section --------------------- */ .band-brand > .wrap > .herotext > h1{color:#fff} /* AND THE EMPHASISED WORD IN IT. .hero h1 em is painted with var(--grad-btn) through background-clip:text -- right on a white hero, and on a coloured one it is the gradient drawn on the gradient. Measured 1.11:1. A background-clip:text with no background paints nothing, so the clip comes off with the gradient. */ .band-brand > .wrap > .herotext > h1 em, .band-brand .sechead h1 em, .band-brand .sechead h2 em, .band-brand > .wrap.hm-two > div > h2 em{background:none; -webkit-background-clip:border-box;background-clip:border-box;color:#fff} .band-brand > .wrap > .herotext > .eyebrow{color:#fff} .band-brand > .wrap > .herotext > .lede{color:#fff} /* WHITE, NOT NEARLY WHITE. This and the two below sat at .90 and .92 alpha, which on the levelled band lands at 4.2-4.4:1 -- under the 4.5 small text needs, and for the sake of a softness nobody can see at 14px. */ .band-brand > .wrap > .herotext > .hm-note{color:#fff} .band-brand > .wrap > .herotext > .herocta .btn-solid, .band-brand > .wrap.hm-two > div > .herocta .btn-solid{background:#fff;color:var(--h2); box-shadow:0 14px 34px -10px rgba(0,0,0,.35)} .band-brand > .wrap > .herotext > .herocta .btn-solid:hover, .band-brand > .wrap.hm-two > div > .herocta .btn-solid:hover{background:#fff; transform:translateY(-2px)} .band-brand > .wrap > .herotext > .herocta .btn-ghost, .band-brand > .wrap.hm-two > div > .herocta .btn-ghost{background:rgba(255,255,255,.12); color:#fff;border-color:rgba(255,255,255,.42)} .band-brand > .wrap > .herotext > .herocta .btn-ghost:hover, .band-brand > .wrap.hm-two > div > .herocta .btn-ghost:hover{background:rgba(255,255,255,.2); color:#fff;border-color:rgba(255,255,255,.6)} /* --- a .wrap that IS the .hm-two ----------------------------------------- */ .band-brand > .wrap.hm-two > div > h2{color:#fff} .band-brand > .wrap.hm-two > div > .eyebrow{color:#fff} .band-brand > .wrap.hm-two > div > .lede{color:#fff} .band-brand > .wrap.hm-two > div > .hm-note{color:#fff} .band-brand > .wrap.hm-two > div > .hm-more a{color:#fff} .band-brand > .wrap.hm-two > div > .hm-points li{color:#fff} .band-brand > .wrap.hm-two > div > .hm-points li b{color:#fff} .band-brand > .wrap.hm-two > div > .hm-points .hm-pi{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.40);color:#fff} /* --- the A/B/C picker, which stands on the band rather than in a card ----- */ /* the caption under it is --ink-2 and has nothing to sit on */ .band-brand .bt-cap{color:#fff} .band-brand .bt-cap .ic{color:#fff} /* THE CHIPS THEMSELVES STAY WHITE CARDS -- "Light cards on color background" -- and only the picked one had to change: --brand-soft is violet at NINE PER CENT, so the gradient came straight through the one chip that is meant to look chosen. #F0EEFF and #DBD6FF are those tokens composited over white: what they already look like on a light page, made opaque. Same fault and same fix as .vs-p.is-on. */ .band-brand .bt-c.is-on{background:#F0EEFF;border-color:#DBD6FF} .band-brand .bt-c.is-on::after{background:#F0EEFF; border-right-color:#DBD6FF;border-bottom-color:#DBD6FF} /* --- shapes the homepage did not have, met on /about and /courses --- A closing section paints itself --surface, which is white, so one given a band came out white -- the same fix .hm-band already needed. And the closes put their eyebrow, heading and lede as DIRECT children of .wrap instead of inside a .sechead, so nothing above reached them. */ /* THE THIRD ONE, and it was missed when the scrim came off the other two -- which is exactly how it was found: "in about last section ... does not have the same background as other color backgrounds". It was the only band left still 30% deeper than the rest. */ .hm-close.band-brand{background:var(--grad-hero);border-top:0} .band-brand > .wrap > h2{color:#fff} .band-brand > .wrap > .eyebrow{color:#fff} .band-brand > .wrap > .lede{color:#fff} /* /about's biography column is prose, not a card, so it stands on the colour. */ .band-brand .ab-prose p{color:#fff} .band-brand .ab-prose .ab-open{color:#fff} .band-brand .ab-prose b{color:#fff} /* THE ONE THAT NO CONTRAST CHECK WOULD HAVE REPORTED. .ab-open b is var(--grad) clipped to the letters with color:transparent -- the band's own gradient, on the band. Invisible, and invisible while computing as `transparent` rather than as a colour anything could measure. */ .band-brand .ab-prose .ab-open b{background:none; -webkit-background-clip:border-box;background-clip:border-box; color:#fff;-webkit-text-fill-color:#fff} .sechead{max-width:60ch;margin-bottom:clamp(24px,4vw,40px)} .sechead h2{font-size:clamp(27px,4.4vw,40px)} .sechead p{margin-top:12px} /* ------------------------------------------------------------------- hero */ .hero{padding-top:clamp(36px,6vw,72px);padding-bottom:clamp(40px,6vw,80px)} @media (min-width:940px){ .herogrid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} } .hero h1{font-size:clamp(28px,6.4vw,52px);line-height:1.04} .hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text; background-clip:text;color:transparent;padding-right:.08em;margin-right:-.08em} .hero .lede{margin-top:18px} .herocta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;color:var(--ink-3);font-size:13.5px} .trust b{color:var(--ink);font-family:var(--f-dis);font-weight:800;font-size:19px; letter-spacing:-.03em;display:block;font-variant-numeric:tabular-nums} /* ------------------------------------------------------- the live question */ .demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl); padding:clamp(20px,3vw,28px);box-shadow:var(--sh-3);position:relative} .demoq{font-family:var(--f-dis);font-weight:750;font-size:clamp(17px,2.4vw,20px); letter-spacing:-.02em;line-height:1.3;margin-bottom:16px} .opts{display:flex;flex-direction:column;gap:9px} .opt{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left; padding:14px 15px;border-radius:15px;background:var(--surface-2); border:1.5px solid var(--line);font-size:15px;line-height:1.45; transition:border-color .2s,background .2s,transform .25s var(--spring)} .opt:hover:not([disabled]){border-color:var(--brand-line);transform:translateY(-1px)} .opt .k{flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;place-items:center; background:var(--surface-3);color:var(--ink-3);font-family:var(--f-dis);font-weight:750; font-size:11.5px;margin-top:1px;transition:background .2s,color .2s} .opt[data-state="right"]{border-color:var(--ok-line);background:var(--ok-soft)} .opt[data-state="right"] .k{background:var(--ok);color:#fff} .opt[data-state="wrong"]{border-color:var(--no-line);background:var(--no-soft)} .opt[data-state="wrong"] .k{background:var(--no);color:#fff} .opt[disabled]{cursor:default} .why{margin-top:16px;padding:15px 16px;border-radius:15px;background:var(--brand-soft); border:1px solid var(--brand-line);font-size:14.5px;line-height:1.6;color:var(--ink-2)} .why b{color:var(--ink);font-family:var(--f-dis)} .why[hidden]{display:none} /* ══════════════════════════════════ THE FIRST SCREEN ON A PHONE ══════════ This block used to reorder a two-column hero — .herogrid, .demo, .lede-more — that no longer exists anywhere in the markup; /elearn's first screen is .tour .t-first now and carries its own rules further down. The dead selectors are gone. TWO OF THEM WERE NOT MERELY DEAD. `.hero .eyebrow{display:none}` and the pair of `.herocta` rules were written unscoped, so the moment the coaching pages arrived with heroes of their own they hid every eyebrow on a phone and forced three call-to-action buttons onto one 390px line — "Call 9117001777" squeezed into 110px. That is the argument for scoping a rule to the thing it was written for even when only one thing exists at the time. */ @media (max-width:939px){ .trust{margin-top:14px;gap:14px} /* the question itself is tightened, because a question with its last two answers off the screen is not a question anybody will answer */ .demoq{margin-bottom:11px} .opts{gap:7px} .opt{padding:10px 12px;font-size:14.4px;border-radius:13px} .why{margin-top:12px;padding:12px 13px;font-size:13.8px} } /* ══════════════════════════════════════════════════════ THE TOUR ══════════ /elearn is the app, running, scrolled. Every beat is a real screen of the product with Pipo beside it saying one line - which is what he does inside it, and the reason he belongs here rather than being a mascot on a brochure. Two columns on a wide screen, alternating sides so the eye is not walking down a straight line. One column on a phone, and the app ALWAYS comes before the words there: a first screen that opens with a paragraph is a first screen somebody scrolls past. */ .tour{padding:clamp(34px,6vw,72px) 0} /* ROOM ABOVE "MINATI MA'AM'S ACADEMY". This was clamp(18px,3vw,44px), and 3vw of a 390px phone is 11.7 -- so it sat at the 18px floor, which put the eyebrow almost against the header bar. The hero is a coloured band now, and a band that begins 18px above its own first word reads as cropped rather than as a band. The floor is what mattered; the ceiling barely moved. */ .t-first{padding-top:clamp(34px,3.4vw,48px)} .tourgrid{display:grid;gap:clamp(20px,3.4vw,48px);align-items:center} @media (min-width:980px){ .tourgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)} .tourgrid.alt .tourwords{order:2} } /* ON A PHONE THE BUTTONS COME AFTER THE LESSON, not before it. The first screen shows a real lesson running -- the mistake, the correction, Pipo -- and asking somebody to choose a course above it is asking before showing. Below 980px the grid is one column, so the demo lands under the headline and the two buttons follow it, which is the order the page argues in. HOW, because the buttons are not a sibling of the lesson: .herocta sits inside .tourwords and the lesson panel is that div's sibling, so no amount of `order` on either can interleave them. display:contents dissolves .tourwords for layout only -- its five children become grid items in their own right and can then be ordered against the panel. It carries no box styling of its own, so nothing is lost by dissolving it; checked before relying on it. row-gap:0 because the grid's gap is up to 48px and was written for the space BETWEEN THE TWO COLUMNS. Applied between five promoted children it would blow the headline apart. Each of them already carries its own margin-top, which is the spacing the page was designed with; the panel gets the column gap back explicitly. */ @media (max-width:979px){ .t-first .tourgrid{row-gap:0} .t-first .tourwords{display:contents} .t-first .tourwords > .eyebrow{order:1} .t-first .tourwords > h1{order:2} .t-first .tourwords > .lede{order:3} .t-first .tourwords > .trust{order:4} .t-first .appwin{order:5;margin-top:clamp(20px,3.4vw,32px)} .t-first .tourwords > .herocta{order:6;margin-top:20px} } /* THE PINNED BAR IS .ctabar, A CHILD OF BODY, and it has to be. These rules were on .t-first .herocta first, and the bar scrolled behind every coloured section below it: .band-brand carries overflow:hidden, and overflow:hidden on an ancestor CLIPS a position:fixed descendant -- z-index cannot argue with that, because the element never gets out of the box. page_foot() emits .ctabar outside
instead, exactly where .callbar has always been, and these are .callbar's own measurements. The buttons still in the page keep their order:6 above: they are what a desktop shows, what a blocked page.js falls back to, and what a phone reads after the lesson if it scrolls that far. */ .ctabar{display:none} @media (max-width:979px){ .ctabar{display:flex;gap:9px;position:fixed;left:0;right:0;bottom:0;z-index:70; padding:10px clamp(12px,3.4vw,16px); /* the safe area, so the bar clears the home indicator on an iPhone */ padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); background:var(--glass);backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-top:1px solid var(--line)} .ctabar .btn{flex:1 1 0;min-width:0;height:46px;padding:0 12px;font-size:14.4px} /* the page gives back the room it takes, so the footer's last line is not sitting underneath it */ body.has-ctabar{padding-bottom:74px} .ctabar.is-auto{transition:transform .28s var(--ease),opacity .2s var(--ease)} .ctabar.is-auto.is-off{transform:translateY(105%);opacity:0;pointer-events:none} } .tourwords h1{font-size:clamp(28px,6vw,52px);line-height:1.04;letter-spacing:-.03em} /* ONE SENTENCE PER LINE, AT EVERY WIDTH. Two lines, and they are the two the headline is written as: "You're not bad at English." then "You're out of practice." * * At 6vw/52px the first sentence wrapped by itself as "You're not bad / at * English." -- a line ending on "at", which is the break that sends a reader * back to the start of it. Splitting each half deliberately was tried and * rejected; this is the version that keeps each sentence whole. * * Two changes, both small: the words take a slightly larger share of the row so * there is room for the longer sentence, and the type scales with the viewport * sooner so a 1024px screen is not still asking for 52px. Verified at eleven * widths from 1440 to 320. */ /* THE GAP UNDER "MINATI MA'AM'S ACADEMY", and it belongs here rather than in the phone block where I first wrote it. A desktop had the eyebrow sitting straight on top of the headline while a phone had 11px under it -- the same hero, two different spacings, which is exactly the kind of thing that reads as unfinished. The phone block still tightens it slightly; this is the rule both of them start from. */ .t-first .tourwords .eyebrow{margin-bottom:13px} .t-first .tourgrid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} .t-first .tourwords h1{font-size:clamp(27px,4vw,48px)} /* text-wrap:balance evens the two halves where a browser supports it, and does nothing at all where it does not -- the sizing above is what actually fixes the break; this only tidies it. */ .t-first .tourwords h1{text-wrap:balance} @media (max-width:359px){ /* the last width, and the same reason as all the others: at the clamp's 25px floor "You're not bad at English." needs 285px, and a 320px screen gives the text 273. It broke on "at", which is the worst word in the sentence to end a line on. 23px fits it. .tour.t-first, NOT .t-first: the phone block further down sets this same property on .t-first .tourwords h1, and being later in the file it was winning the tie and putting 25px back. Both classes are on the one element, so this is the same element at one more point of specificity. */ .tour.t-first .tourwords h1{font-size:23px} } .tourwords h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text; background-clip:text;color:transparent} .tourwords h2{font-size:clamp(24px,3.9vw,38px);line-height:1.08;letter-spacing:-.025em} .tourwords .lede{margin-top:14px} .tourwords .herocta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} /* ink-2, NOT ink-3. On /elearn the label under each number is a bare text node -- "lessons written", not lessons written -- so .trust span never reaches it and it inherits from here. At --ink-3 on the white tile that is 3.80:1 at 13.5px, under the 4.5 small text needs. --ink-2 takes it to about 7. This was true before the tiles ever stood on a band; it was simply never measured, because the sweep only ever looked at text sitting on the colour. */ .tourwords .trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px; color:var(--ink-2);font-size:13.5px} /* ═════════════════════════════════════ the tour, standing on a band ══════ FOUR OF /elearn's EIGHT SECTIONS ARE COLOURED NOW. The page was eight white sections in a row -- the one page an online student actually lands on, and the only public page here with no rhythm at all. Every other one alternates. The app window needs nothing: it is a white card, which is exactly what a band wants standing on it. What needs a white counterpart is everything the tour draws in ink beside it. .tourwords is a level deeper than .wrap, so none of the `.band-brand > .wrap >` rules further up reach it. These are its own. */ .tour.band-brand .tourwords .eyebrow{color:#fff;opacity:.85} .tour.band-brand .tourwords h1, .tour.band-brand .tourwords h2{color:#fff} /* THE GRADIENT WORD GOES PALE RATHER THAN STAYING A GRADIENT. h1 em paints itself with --grad through background-clip:text; the button gradient laid over the band gradient is one saturated thing on another and the word disappears into it. --au1 is the aurora's pale blue, the light register of the same palette, so the emphasis still reads as a colour change and not as damage. */ .tour.band-brand .tourwords h1 em{background:none;color:var(--band-em); -webkit-text-fill-color:currentColor} .tour.band-brand .tourwords .lede{color:#fff} /* THE TRUST TILES ARE NOT INVERTED, and getting that wrong made them vanish. .trust > div is a WHITE CARD -- so on a coloured band the tiles are already light-cards-on-colour, which is the rule, and their text has to stay dark. Turning it white put white numerals on a white card: measured at 1:1, which is not low contrast, it is nothing at all. The owner found it before I did. So there is no rule here. The defaults -- ink for the number, ink-3 for the label -- are correct on the card, band or no band. */ .tour.band-brand .tourwords .herocta .btn-solid{background:#fff;color:var(--h2); box-shadow:0 14px 34px -10px rgba(0,0,0,.35)} .tour.band-brand .tourwords .herocta .btn-solid:hover{background:#fff; transform:translateY(-2px)} .tour.band-brand .tourwords .herocta .btn-ghost{background:rgba(255,255,255,.12); color:#fff;border-color:rgba(255,255,255,.42)} .tour.band-brand .tourwords .herocta .btn-ghost:hover{background:rgba(255,255,255,.2); color:#fff;transform:translateY(-2px)} /* .ctabar sits outside .band-brand, so its buttons are already .btn-solid and .btn-ghost as the rest of the site draws them. The override that used to be needed here is gone with the rules that made it necessary. */ /* ------------------------------------------------------------- the window */ /* The app's own frame. It is the product on the page rather than a picture of the product, which is the whole argument this page makes. */ .appwin{position:relative;background:var(--surface);border:1px solid var(--line-strong); border-radius:var(--r-2xl);box-shadow:var(--sh-3);overflow:hidden} .aw-bar{display:flex;align-items:center;gap:10px;padding:11px 14px; background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12.4px} .aw-brand{display:flex;align-items:center;gap:7px;font-family:var(--f-dis); font-weight:800;color:var(--ink);letter-spacing:-.01em;white-space:nowrap} .aw-brand i{width:17px;height:17px;border-radius:6px;background:var(--grad);flex:0 0 auto} .aw-where{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; flex:1 1 auto;text-align:center} .aw-chips{display:flex;gap:6px;flex:0 0 auto} .aw-chips b{font-family:var(--f-dis);font-weight:750;font-size:11.4px;padding:3px 8px; border-radius:999px;background:var(--brand-soft);color:var(--brand)} .aw-body{padding:clamp(16px,2.4vw,24px);padding-bottom:74px} .aw-k{font-family:var(--f-dis);font-weight:750;font-size:11px;letter-spacing:.15em; text-transform:uppercase;color:var(--ink-4)} /* the lesson */ .aw-bad,.aw-ok{font-family:var(--f-dis);font-weight:750;letter-spacing:-.02em; line-height:1.32;font-size:clamp(18px,2.3vw,23px)} .aw-bad{color:var(--ink-3);margin-top:10px} .aw-bad span{position:relative;display:inline-block} .aw-bad span::after{content:'';position:absolute;left:-.05em;right:-.05em;top:56%;height:2px; border-radius:2px;background:var(--no);transform:scaleX(0);transform-origin:left center} .jsr .aw-bad span::after{transform:scaleX(0)} .jsr .reveal.in .aw-bad span::after{animation:awStrike .42s .28s cubic-bezier(.4,0,.2,1) forwards} .aw-ok{color:var(--ok);display:flex;align-items:baseline;gap:9px;margin-top:9px} .jsr .aw-ok{opacity:0} .jsr .reveal.in .aw-ok{animation:awUp .42s .72s var(--spring) forwards} .aw-ok i{flex:0 0 auto;font-style:normal;width:20px;height:20px;border-radius:7px; display:inline-grid;place-items:center;background:var(--ok);color:#fff;font-size:11.5px; transform:translateY(2px)} .aw-rule{margin-top:15px;padding:13px 14px;border-radius:14px;background:var(--brand-soft); border:1px solid var(--brand-line);font-size:14.2px;line-height:1.6;color:var(--ink-2)} .jsr .aw-rule{opacity:0} .aw-rule b{color:var(--ink);font-family:var(--f-dis)} .jsr .reveal.in .aw-rule{animation:awUp .42s 1s var(--spring) forwards} @keyframes awStrike{to{transform:scaleX(1)}} @keyframes awUp{to{opacity:1;transform:none}} /* the flashcards */ /* A DECK: one card, face up, and a way to the next. Three cards stacked in a column was a list of sentences - this waits, turns over, and moves on, which is the whole of what a flashcard does. */ .aw-deck,.aw-quiz{display:flex;flex-direction:column;gap:14px} .qitem[hidden]{display:none} .qitem .why{margin-top:14px} .deck{position:relative} .fcard{perspective:1100px;background:none;border:0;padding:0;text-align:left; cursor:pointer;width:100%;display:block} .fcard[hidden]{display:none} .fc-in{position:relative;display:block;min-height:132px; transition:transform .6s var(--spring);transform-style:preserve-3d} .fcard.flip .fc-in{transform:rotateY(180deg)} .fc-f,.fc-b{position:absolute;inset:0;display:flex;flex-direction:column; justify-content:center;gap:9px;padding:18px 20px;border-radius:18px; backface-visibility:hidden;-webkit-backface-visibility:hidden} .fc-f{background:var(--surface-2);border:1.5px solid var(--line-strong);box-shadow:var(--sh-1)} .fc-b{transform:rotateY(180deg);background:var(--ok-soft);border:1.5px solid var(--ok-line)} .fc-k{font-family:var(--f-dis);font-weight:750;font-size:10.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--ink-4)} .fc-b .fc-k{color:var(--ok);opacity:.8} .fc-f b,.fc-b b{font-family:var(--f-dis);font-weight:750;letter-spacing:-.02em; font-size:clamp(17px,2.2vw,21px);line-height:1.32} .fc-f b{color:var(--ink-2)} .fc-b b{color:var(--ok)} /* the two behind it, so it reads as a deck rather than a single card */ .deck::before,.deck::after{content:'';position:absolute;left:9px;right:9px;bottom:-5px; height:16px;border-radius:0 0 18px 18px;background:var(--surface-2); border:1.5px solid var(--line);border-top:0;z-index:-1} .deck::after{left:16px;right:16px;bottom:-10px;opacity:.6} /* THE END OF THE QUESTIONS. It replaces the deck rather than sitting under it, so the panel does not grow a second screen's worth of content at the moment somebody finishes. Same white window, so it needs no colour of its own -- the score is the only loud thing in it. */ .qsum{text-align:center;padding:6px 0 2px} .qsum-n{margin-top:10px;font-family:var(--f-dis);font-weight:800; font-size:clamp(15px,2vw,17px);color:var(--ink-3);letter-spacing:-.01em} /* same contract as .trust b above: one `color`, and it is transparent */ .qsum-n b{font-size:clamp(38px,6vw,52px);letter-spacing:-.04em; background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent;display:block;line-height:1.02} .qsum-l{margin-top:12px;color:var(--ink-2);font-size:14.6px;line-height:1.58; max-width:38ch;margin-left:auto;margin-right:auto} .qsum-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:18px} .deckfoot[hidden]{display:none} .qsum[hidden]{display:none} .deckfoot{display:flex;align-items:center;justify-content:space-between;gap:12px} .deckn{font-size:12.8px;color:var(--ink-3)} .deckn b{font-family:var(--f-dis);font-weight:800;color:var(--ink);font-size:14px} /* what it remembers */ .aw-stats{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))} .aw-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:14px; padding:12px;text-align:center} .aw-stat b{display:block;font-family:var(--f-dis);font-weight:800;font-size:clamp(19px,2.4vw,24px); color:var(--ink);letter-spacing:-.02em} .aw-stat span{font-size:11.6px;color:var(--ink-3);line-height:1.3;display:block;margin-top:3px} .aw-cert{grid-column:1/-1;margin-top:4px;padding:16px;border-radius:15px; background:var(--grad-btn);color:#fff;text-align:center;box-shadow:var(--sh-brand)} .aw-cert .aw-k{color:rgba(255,255,255,.72)} .aw-certname{font-family:var(--f-dis);font-weight:800;font-size:clamp(20px,2.6vw,26px); letter-spacing:-.02em;margin-top:5px} .aw-certsub{font-size:12.4px;opacity:.86;margin-top:3px} /* ------------------------------------------------------------- meet pipo */ /* A conversation, not a caption. Everywhere else on this page Pipo is pinned to the bottom of a window saying one line about what is above him; here he is the thing being shown, so the window is his and the 74px that was reserving room for that pinned line comes back as ordinary padding. .aw-body.aw-chat is two classes deliberately: it has to beat the mobile rule that sets padding-bottom on .aw-body, and doing it on specificity rather than source order means neither block can be moved and quietly break the other. */ .aw-body.aw-chat{padding-bottom:clamp(16px,2.4vw,24px)} .aw-ex + .aw-ex{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)} /* The student's side: right-aligned and tinted, the arrangement every messaging app has already taught everybody to read without a legend. */ .aw-ask{display:flex;justify-content:flex-end} .aw-ask span{max-width:86%;padding:9px 13px;border-radius:15px 15px 4px 15px; background:var(--brand-soft);color:var(--ink);font-size:13.4px;line-height:1.45} .aw-say{display:flex;align-items:flex-start;gap:10px;margin-top:10px} /* His face, borrowed from .tpipo-f and sized down - one gradient square in the stylesheet rather than two that can drift apart. */ .aw-say .tpipo-f{width:34px;height:34px;border-radius:13px} .aw-say .tpipo-f svg{width:23px;height:23px} .aw-say p{background:var(--surface-2);border:1px solid var(--line); border-radius:15px 15px 15px 4px;padding:10px 13px; font-size:13.2px;line-height:1.55;color:var(--ink-2)} .aw-say p i{color:var(--ink);font-style:italic} /* ------------------------------------------------------------------- pipo */ /* The same face and the same rounded square he wears in the app, in the corner he occupies there. A copy, not an extraction: his behaviour is a personality engine with no business on a marketing page, and his look is one SVG. */ /* row-reverse, so he is on the RIGHT with the bubble opening to his left - which is where he stands in the app and the only place he has ever stood. Putting him on the left made him a different character wearing the same face. */ .tpipo{position:absolute;left:14px;right:14px;bottom:12px;display:flex; flex-direction:row-reverse;align-items:flex-end;gap:10px;pointer-events:none} .tpipo-f{flex:0 0 auto;width:46px;height:46px;border-radius:17px;display:grid;place-items:center; position:relative; background:linear-gradient(145deg,var(--a1),var(--a2) 55%,var(--a3));box-shadow:var(--sh-brand)} .tpipo-f svg{width:31px;height:31px;position:relative;z-index:1} /* HIS EYES WERE SHUT, AND THAT IS WHY HE DID NOT LOOK LIKE HIMSELF. * * The SVG is a byte-for-byte copy of the app's, and it carries two filled with the same near-white as his face -- one over each eye. * In the app, p06.html collapses them: `#pipoBtn .lid{transform:scaleY(0)}`, and * they only scale up for the length of a blink. * * That rule was never copied here. So on every public page both lids drew at * full size, directly over the pupils, and Pipo had a blank face. The markup was * right, the drawing was right, and one missing line took his eyes off him. * * NO IDLE BLINK, deliberately, and for the app's own stated reason: "Pipo sits * still. No breathing, no idle pulse -- hover, the celebration hop and the blink * are all deliberate reactions." There is nothing here for him to react to. */ .tpipo-f .lid{transform-origin:center;transform:scaleY(0)} /* and the halo the app's button has behind it, which is the other half of why he read as flatter here than in the product */ .tpipo-f::before{content:'';position:absolute;inset:-6px;border-radius:21px; background:inherit;filter:blur(11px);opacity:.5;z-index:0;pointer-events:none} /* the tail is on the right now, pointing at him */ .tpipo-b{background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 4px 16px; padding:9px 13px;font-size:12.9px;line-height:1.45;color:var(--ink-2);box-shadow:var(--sh-2); transform-origin:bottom right} .jsr .tpipo-b{opacity:0;transform:translateY(6px) scale(.96)} /* HE SPEAKS ALMOST AT ONCE. This was 1.9s, sitting behind a chain of 0.5, 1.05 and 1.5 - so on the first screen a visitor watched an empty corner for the best part of two seconds before the one voice on the page said anything. Half a second is long enough to read as arriving rather than as already there. Only the lesson window waits longer, and only because its own sentence is still correcting itself while he waits. */ .jsr .reveal.in .tpipo-b{animation:awPop .42s .5s var(--spring) forwards} .jsr #awLesson.reveal.in .tpipo-b{animation-delay:1.25s} /* AND THE FAILSAFE HAS TO FINISH THE JOB. .shown is what the script falls back to when the observer never fires, and it was revealing the window while leaving everything the window is FOR - the correction, the rule, Pipo's line - still at opacity 0, because those are revealed by animations keyed on .in. A rescue that leaves the page empty is not a rescue. */ .reveal.shown .aw-ok,.reveal.shown .aw-rule,.reveal.shown .tpipo-b{ opacity:1;transform:none;animation:none} .reveal.shown .aw-bad span::after{transform:scaleX(1);animation:none} @keyframes awPop{to{opacity:1;transform:none}} /* --------------------------------------------------------- arriving ------ */ /* Each window is still until it is on the screen, then it plays once. That is the delight on every scroll, and it is also why the animations above are written against .reveal.in rather than running on load: a screen that has already performed by the time you reach it has performed to nobody. */ /* NOTHING IS HIDDEN UNLESS THE SCRIPT IS RUNNING. The hiding is applied by the script's own class on , so a blocked, failed or still-downloading page.js leaves every window plainly visible instead of leaving the landing page blank - which is what hiding by default and revealing by script would do, and it would do it silently. */ .jsr .reveal{opacity:0;transform:translateY(18px); transition:opacity .6s var(--ease),transform .7s var(--spring)} .jsr .reveal.in,.reveal.shown{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{transition:none} .jsr .reveal.in .aw-bad span::after{animation:none;transform:scaleX(1)} .jsr .reveal.in .aw-ok,.jsr .reveal.in .aw-rule,.jsr .reveal.in .tpipo-b{animation:none;opacity:1;transform:none} .fc-in{transition:none} } @media (max-width:979px){ /* THE APP FIRST, ALWAYS. A first screen that opens with a paragraph is a first screen somebody scrolls past, and this page's whole argument is that you have used the product before you have read about it. */ /* align-items:stretch is not decoration here. .tourgrid sets align-items to center for the two-column layout, where it means vertical; the moment this becomes a flex COLUMN that same property means horizontal, so the window shrank to its own content width while every other window on the page - all of them still grid - stayed full width. Same page, two widths. */ .t-first .tourgrid{display:flex;flex-direction:column;align-items:stretch} /* The words, whole, and then the card - which is document order, so nothing needs reordering at all. It was tried the other way round twice: the card first, then the card wedged between the headline and the lede. The owner wants the section read as it is written. */ .t-first .appwin{margin-top:30px} /* and the window itself stops holding its own contents so tightly */ .aw-body{padding:18px 17px 74px} .aw-bad{margin-top:13px} /* ROOM TO BREATHE. The five blocks were 10, 16, 14 and 24px apart - close enough that the screen read as one dense slab rather than as a headline, a sentence, a choice and a demonstration. The rhythm now grows down the screen, 18 / 26 / 24 / 30, which is what makes it read as separate things said one after another instead of everything said at once. It costs about 50px and the card still lands whole above the fold. */ .t-first .tourwords h1{font-size:clamp(25px,7vw,33px);line-height:1.1} .t-first .tourwords .lede{font-size:15.3px;margin-top:18px;line-height:1.62} .t-first .tourwords .herocta{margin-top:26px;flex-wrap:nowrap;gap:10px} .t-first .tourwords .herocta .btn{flex:1 1 0;min-width:0;padding:0 12px;font-size:14.6px} /* THREE TILES, ONE ROW, by the owner's instruction. On a phone .tourwords .trust was a flex row that wrapped, so the tiles sized themselves to their own text: measured at 390, 126, 94 and 154px across two rows with a hole on the right of the first. Every other thing in this hero -- headline, lede, buttons, app window -- runs the full width, so three ragged boxes read as a mistake. Equal thirds now. A 343px screen gives each tile 108px, which is tight, so the padding and the label come down to fit it rather than the row breaking. The tiles stretch to the tallest of the three, so they stay square-edged however the labels wrap. */ /* the text block above the tiles, loosened. A two-line headline at 1.04 is set for one long line, not for two short ones stacked, and the eyebrow was sitting right on top of it. */ .t-first .tourwords h1{line-height:1.14} .t-first .tourwords .eyebrow{display:block;margin-bottom:11px} .t-first .tourwords .lede{margin-top:15px} .t-first .tourwords .trust{margin-top:24px;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:none} /* @media (max-width:420px) further down sets .trust>div:last-child to span the whole row, which is right for the home page's tiles and is exactly what put the third one on a line of its own here below 430px. Overridden by specificity rather than by moving either rule. */ .t-first .tourwords .trust > div:last-child{grid-column:auto} .t-first .tourwords .trust > div{padding:10px 9px} .t-first .tourwords .trust b{font-size:19px} .t-first .tourwords .trust > div{font-size:11.6px;line-height:1.3} .aw-body{padding-bottom:70px} .tpipo-b{font-size:12.4px} } @media (max-width:400px){ .aw-stats{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ------------------------------------------------------- the mistake strip */ .mistakes{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)} @media (min-width:700px){ .mistakes{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1000px){ .mistakes{grid-template-columns:repeat(3,minmax(0,1fr))} } .mis{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:18px;box-shadow:var(--sh-1);text-align:left;width:100%; transition:transform .3s var(--spring),box-shadow .3s,border-color .2s} .mis:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--brand-line)} /* One child, and everything laid out inside it. A