/* ========================================================================== 3andB DESIGN SYSTEM · v3 · "Teacher's Desk" in brand colors -------------------------------------------------------------------------- Palette drawn straight from the logo: bright green, electric blue, magenta-purple, deep navy. Brighter + happier than v2; navy replaces brown. Site-wide: loaded from base.html; every :root token below is available to any page/component, public or admin. ========================================================================== */ /* ======================================================================== 1 · TOKENS (from the logo) ======================================================================== */ :root{ /* Bright material */ --paper: #F6F8FD; /* cool bright white : background */ --paper-card: #FFFFFF; /* clean sheet */ --paper-2: #EAF0FB; /* light cool band */ --ink: #0C1478; /* deep navy (logo triangle) : dark surfaces */ --ink-2: #141E92; /* raised navy */ --text: #16205E; /* navy ink : body text on light */ --text-soft: #5B658C; /* muted slate-blue */ --line: #DBE3F3; /* cool hairline */ /* Brand markers */ --green: #12C93C; /* tuned logo green (fills, buttons) */ --green-hi: #00E637; /* pop green (hand-drawn circle) */ --green-ink: #063C13; /* text on green */ --green-d: #0A9E2F; /* pressed/shadow green */ --blue: #2440F0; /* electric blue */ --purple: #A814EE; /* magenta-purple */ --cyan: #23A6DE; /* gradient cyan */ --red: #F5533D; /* alerts, errors */ --amber: #C4700A; /* deliberate, temporary states — maintenance mode. Darker than the orange in the subject palette on purpose: this one is read as text on a tint, so it has to hold contrast rather than just catch an eye. */ /* Subject coding (DB: subjects.slug) — bright + happy. storefront.ACCENTS says which subject wears which; every subject in the taxonomy has one, and anything added later falls back to --ink rather than borrowing a colour. */ --s-science: #12B83C; --s-ela: #2440F0; --s-social: #17A6C9; --s-math: #E8890C; --s-stem: #A814EE; /* technology */ --s-psych: #E33FA0; --s-lifeskills: #0E9E9E; --s-cte: #F5533D; /* career readiness, and CTE pathways */ --s-econ: #8C5A2B; /* economics & personal finance */ --s-life: #E33FA0; /* Type */ --display:"Bricolage Grotesque",Georgia,serif; --body:"Hanken Grotesk",system-ui,sans-serif; --hand:"Shantell Sans","Comic Sans MS",cursive; --wrap:1180px; --gut:clamp(20px,5vw,56px); --r:10px; --r-lg:16px; --shadow:0 2px 0 rgba(12,20,120,.04),0 14px 30px -20px rgba(12,20,120,.35); --shadow-h:0 2px 0 rgba(12,20,120,.05),0 24px 46px -20px rgba(12,20,120,.45); } /* ======================================================================== 2 · RESET + BASE ======================================================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* The browser's own [hidden] rule is a bare element selector, so any class that sets display — .card, .chipset, .btn — silently outranks it and the element stays on screen. The finder toggles visibility with the attribute on exactly those elements, so it has to win here. */ [hidden]{display:none!important} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--body);color:var(--text);background:var(--paper); line-height:1.55;font-size:clamp(16px,1.05vw,17px);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} :focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:3px} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} /* ======================================================================== 3 · TYPE ======================================================================== */ h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.02em} .display{font-family:var(--display);font-weight:800;font-size:clamp(2.8rem,7.5vw,6rem);line-height:.94;letter-spacing:-.035em} .h2{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.9rem);letter-spacing:-.025em} .eyebrow{font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)} .hand{font-family:var(--hand);font-weight:500} .tape{display:inline-block;font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; color:var(--green-ink);background:var(--green);padding:.3em .6em;border-radius:3px;box-shadow:1px 1px 0 rgba(12,20,120,.16)} /* ======================================================================== 4 · BUTTONS ======================================================================== */ .btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:.95rem;padding:.82em 1.4em;border-radius:99px; transition:transform .16s,box-shadow .16s,background .16s,color .16s} .btn:active{transform:translateY(1px)} .btn--primary{background:var(--green);color:var(--green-ink);box-shadow:0 3px 0 var(--green-d)} .btn--primary:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--green-d)} .btn--primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green-d)} .btn--ink{background:var(--ink);color:#fff} .btn--ink:hover{background:var(--ink-2)} .btn--outline{border:2px solid var(--ink);color:var(--ink)} .btn--outline:hover{background:var(--ink);color:#fff} .btn--sm{padding:.55em 1em;font-size:.86rem} /* The product page's primary action. Bigger than a nav button because it is the only thing on that page anyone is asked to press, and a call to action the same size as "About" is not a call to action. */ .btn--lg{padding:1em 1.6em;font-size:1rem} /* --- the buy buttons ---------------------------------------------------- These were btn--primary and btn--outline: bright green with dark green text, and a transparent button with a navy hairline. Both were hard to read, for different reasons. The green one measured 5.68:1, which passes AA — so this was NOT a contrast failure, and it is worth being precise about that because the fix would have been the wrong one. #063C13 on #12C93C is dark green type on bright green: the luminance gap is fine and the hue gap is nothing, and type that separates only by lightness within one hue is type the eye has to work at. On a product page it was also sitting inside a hero washed with the subject accent, which for every science title is green as well — so a green button on a green tint, in a page whose whole colour system is that accent. The outline one was the opposite problem: 14.25:1 text, and no fill at all, so on that same tinted wash it read as an empty rectangle rather than as a thing to press. Legible, invisible. So: navy fill, white text, 15.14:1. Navy is the one colour on this site that is constant across all nine subject accents, so this reads identically loudly whether the page around it is green, magenta or orange, and the hue gap against every one of those tints is enormous. Green does not leave, it moves: the mark inside is --green-hi at 8.92:1 on navy, the same white-text-with-a- green-mark treatment the chat launcher already uses. ONE style, for both. The first pass gave TPT the solid button and Amazon a quiet outlined one, which was wrong: a styling difference in a row of two is read as a recommendation, and this site is not recommending a store. They are different products — the PDF and the printed book — sold by whoever sells that format, and a teacher who wants paper is not taking second best. So the only thing separating them is the store's own mark (see _icons.html), which distinguishes without ranking. Anything added here later has to keep that property: no hover that fires on one and not the other, no order-dependent emphasis, nothing that makes one of them the answer. Squarer than the site's pills, deliberately. Everything else on a product page — chips, facts, the look-inside pill, the nav — is a 99px pill, so a 12px radius is what makes these read as the things that are actually buttons rather than as two more pieces of furniture. */ .btn--buy{background:var(--ink);color:#fff;border-radius:12px;letter-spacing:-.005em;gap:.6em; box-shadow:0 1px 2px rgba(12,20,120,.24),0 10px 24px -12px rgba(12,20,120,.75)} .btn--buy:hover{background:var(--ink-2);transform:translateY(-2px); box-shadow:0 2px 5px rgba(12,20,120,.26),0 16px 30px -14px rgba(12,20,120,.8)} .btn--buy:active{transform:translateY(0)} .btn--buy .ico{color:var(--green-hi)} /* The arrow is a leaves-this-site signal, not a second call to action, so it sits back until the button is under the cursor. */ .btn--buy .arw{opacity:.55;transition:transform .16s,opacity .16s} .btn--buy:hover .arw{opacity:1} /* --- on a dark band ----------------------------------------------------- The closing call to action sits on a navy gradient, where the hero's navy button would disappear. So it inverts: white with navy type, the strongest thing that can be drawn on navy, keeping the 12px corner and the green mark of its twin at the top of the page. Both buttons take it, for the same reason both take btn--buy up there. */ .btn--onink{background:#fff;color:var(--ink);border-radius:12px;letter-spacing:-.005em;gap:.6em; box-shadow:0 2px 6px rgba(0,0,0,.22),0 14px 28px -14px rgba(0,0,0,.55)} .btn--onink:hover{transform:translateY(-2px); box-shadow:0 3px 8px rgba(0,0,0,.24),0 20px 34px -16px rgba(0,0,0,.6)} .btn--onink:active{transform:translateY(0)} .btn--onink .ico{color:var(--green-d)} .btn--onink .arw{opacity:.6;transition:transform .16s,opacity .16s} .btn--onink:hover .arw{opacity:1} .btn .arw{transition:transform .16s} .btn:hover .arw{transform:translateX(3px)} /* Inline marks never shrink to fit their label — a squashed icon looks broken in a way a wrapped one does not. */ .btn .ico,.ico{flex:none} /* ======================================================================== 5 · TOP BAR ======================================================================== */ .topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--line)} .topbar__in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:1.5rem} .brand{display:flex;align-items:center;gap:.6rem} .brand img{height:44px;width:auto} .brand__tag{font-family:var(--hand);font-size:.98rem;color:var(--purple);transform:rotate(-3deg);white-space:nowrap} .nav{display:flex;align-items:center;gap:1.7rem} .nav a{font-weight:600;font-size:.92rem;color:var(--text);opacity:.78;transition:opacity .15s} .nav a:hover{opacity:1} .nav .btn{padding:.6em 1.1em;font-size:.88rem} .navtoggle{display:none;font-size:1.5rem;color:var(--ink)} /* logout is a POST form, styled to sit in the nav like any other link */ .nav__form{display:flex} .nav__logout{font-weight:600;font-size:.92rem;color:var(--text);opacity:.78;transition:opacity .15s} .nav__logout:hover{opacity:1} /* ======================================================================== 6 · HERO ======================================================================== */ .hero{padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4.5rem)} .hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center} .hero__eye{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem} .hero__eye .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--blue))} .hero h1{color:var(--ink)} /* hand-drawn circle around a word */ .circled{position:relative;display:inline-block} .circled svg{position:absolute;inset:-22% -12% -22% -12%;width:124%;height:144%;overflow:visible;pointer-events:none} .circled path{fill:none;stroke:var(--green-hi);stroke-width:7;stroke-linecap:round; stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.2s .4s cubic-bezier(.6,0,.2,1) forwards} @keyframes draw{to{stroke-dashoffset:0}} /* margin note in handwriting with a little arrow */ .notenote{margin-top:1.5rem;display:flex;align-items:flex-start;gap:.5rem;max-width:38ch} .notenote .arrow{flex:none;color:var(--purple);font-size:1.4rem;line-height:1;transform:translateY(-2px) rotate(8deg)} .notenote span{font-family:var(--hand);font-size:1.12rem;color:var(--text);transform:rotate(-1.2deg);line-height:1.4} .hero__sub{margin-top:1.4rem;color:var(--text-soft);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:44ch;line-height:1.55} .hero__cta{margin-top:1.9rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:center} /* the "index card" of honest stats — pinned like a note */ .card-stats{background:var(--paper-card);border:1.5px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow);transform:rotate(1.4deg);position:relative;overflow:hidden} .card-stats::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg); width:120px;height:26px;background:color-mix(in srgb,var(--green) 55%,transparent); border-left:1px dashed rgba(255,255,255,.6);border-right:1px dashed rgba(255,255,255,.6)} .card-stats__hd{padding:1.5rem 1.3rem .4rem;font-family:var(--hand);font-size:1.05rem;color:var(--text-soft)} .stat{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 1.3rem;border-top:1.5px dashed var(--line)} .stat:first-of-type{border-top:none} .stat dt{color:var(--text-soft);font-size:.92rem} .stat dd{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);color:var(--ink);display:flex;flex-direction:column;align-items:flex-end} .stat dd small{font-family:var(--hand);font-weight:500;font-size:.72rem;color:var(--purple)} /* ======================================================================== 7 · SECTIONS ======================================================================== */ .section{padding-block:clamp(3rem,7vw,5.5rem)} .band-2{background:var(--paper-2)} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:2.2rem;flex-wrap:wrap} /* h1 as well as h2: /samples is a landing page in its own right — the nav button, the homepage call to action and the sitemap all aim at it — so its statement is the document's heading rather than a section's, and it wears the same .h2 type as every other band head on the site. */ .sec-head h2,.sec-head h1{max-width:22ch} .sec-head p{color:var(--text-soft);max-width:38ch} /* ======================================================================== 8 · BROWSE — subjects as sticky notes + grade "class list" ======================================================================== */ .browse{display:grid;grid-template-columns:2fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start} .subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .note{--c:var(--ink);position:relative;display:block;background:var(--paper-card);border-radius:4px; padding:1.15rem 1.1rem 1.25rem;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s;border-top:6px solid var(--c)} .note:nth-child(3n+1){transform:rotate(-1.4deg)} .note:nth-child(3n+2){transform:rotate(.8deg)} .note:nth-child(3n){transform:rotate(-.5deg)} .note:hover{transform:rotate(0) translateY(-4px) scale(1.02);box-shadow:var(--shadow-h)} .note__code{font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c)} .note__name{font-family:var(--display);font-weight:800;font-size:1.2rem;margin-top:.45rem;letter-spacing:-.02em;color:var(--ink)} .note__meta{font-size:.82rem;color:var(--text-soft);margin-top:.15rem} .classlist{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:1.4rem 1.5rem 1.6rem;box-shadow:var(--shadow)} .classlist h3{color:#fff;font-size:1.1rem;margin-bottom:.2rem} .classlist .hand{color:var(--green-hi);font-size:1rem;display:block;margin-bottom:1rem} .grade{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-top:1px dashed rgba(255,255,255,.22);transition:padding-left .15s,color .15s} .grade:hover{padding-left:.4rem;color:var(--green-hi)} .grade__l{font-family:var(--display);font-weight:700;font-size:1.05rem} .grade__r{font-family:var(--hand);font-size:.92rem;opacity:.8} /* ======================================================================== 9 · PRODUCT CARDS ======================================================================== */ /* Heading on the left, then the stamp and the catalog link. The first child takes the slack, so the two on the right stay together and wrap as a pair rather than being spread to opposite ends of the row. */ .rail-head{display:flex;align-items:center;margin-bottom:1.8rem;gap:.9rem 1.3rem;flex-wrap:wrap} .rail-head>:first-child{margin-right:auto} .products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem)} .card{--c:var(--s-science);display:flex;background:var(--paper-card);border-radius:var(--r);overflow:hidden; box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-h)} /* The whole card is one link. It carries the flex column the card used to, so that the click target is the card and not just the words inside it. */ .card__link{display:flex;flex-direction:column;width:100%} .cover{position:relative;aspect-ratio:3/4;padding:1rem;display:flex;flex-direction:column;justify-content:space-between; background:radial-gradient(130% 90% at 100% 0%,color-mix(in srgb,var(--c) 30%,#fff),transparent 58%),var(--paper-2);border-bottom:1px solid var(--line)} .cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--c);z-index:1} /* A real cover is the whole tile. contain, not cover: these are scans of book covers at whatever aspect the printer used, and cropping one to fill the frame cuts the title off the top of the book. */ .cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:.55rem .55rem .55rem .9rem} .cover__code{align-self:flex-end} .cover__title{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.03;letter-spacing:-.02em;padding-left:.15rem;color:var(--ink)} .cover__series{font-family:var(--hand);font-size:.82rem;color:var(--text-soft);margin-top:.35rem} /* Corner flag for the two hand-set booleans. Only one shows — a title that is both new and a best seller is a best seller, which is the stronger claim. */ .flag{position:absolute;top:.7rem;left:.7rem;z-index:2;font-weight:800;font-size:.62rem;letter-spacing:.08em; text-transform:uppercase;padding:.35em .6em;border-radius:99px;box-shadow:0 2px 0 rgba(12,20,120,.14)} .flag--best{background:var(--green);color:var(--green-ink)} .flag--new{background:var(--purple);color:#fff} .card__body{padding:.9rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.6rem;flex:1} /* Two lines, then an ellipsis. Imported titles run long — "25x: Life Sciences - Middle School · 25 mini-lessons…" — and four cards in a row have to agree on a height or the grid looks broken. */ .card__name{font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:1.16;letter-spacing:-.02em;color:var(--ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card__teaser{font-size:.87rem;line-height:1.4;color:var(--text-soft); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .chips{display:flex;gap:.4rem;flex-wrap:wrap} .chip{font-weight:600;font-size:.68rem;padding:.3em .65em;border-radius:99px;background:var(--paper-2);color:var(--text-soft)} .chip--subject{background:color-mix(in srgb,var(--c) 16%,#fff);color:color-mix(in srgb,var(--c) 72%,#000)} .card__title{font-weight:600;font-size:.97rem;line-height:1.3} /* Wraps rather than collides: in a two-up grid on a 320px screen "View →" and the page count have less room between them than they need. */ .card__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:.25rem .8rem} .card__view{font-weight:700;font-size:.85rem;display:inline-flex;gap:.4em;transition:gap .15s} .card:hover .card__view{gap:.65em;color:color-mix(in srgb,var(--c) 62%,#000)} .card__count{font-family:var(--hand);font-size:.88rem;color:var(--text-soft)} /* /samples: the same card, with the three free files listed on it. Four links means the card can no longer BE one link, so it stacks — the cover and body go to the workbook's page, and the files sit under a dashed rule in the strip below. The strip is a fixed three rows on every card, because the shelf only holds workbooks that have all three; nothing here has to cope with a card that offers two. That is what lets the grid keep four cards the same height without a min-height anywhere. */ .card--sample{flex-direction:column} .card--sample .card__link{flex:1} .card--sample .card__body{padding-bottom:.85rem} .flag--sample{background:var(--purple);color:#fff} .card__kit{list-style:none;border-top:1px dashed var(--line);padding:.45rem .5rem .55rem; display:flex;flex-direction:column;gap:.1rem} /* Rows, not a three-across row of buttons: at the width of a card in a four-up grid, three labels side by side are three abbreviations, and "Answer key" abbreviated is the one thing on this card a teacher is scanning for. */ .card__kit a{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:8px; font-weight:600;font-size:.83rem;line-height:1.2;color:var(--text); transition:background .14s,color .14s} .card__kit a:hover{background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--ink)} .card__kitico{flex:none;display:grid;place-items:center;color:var(--c)} .card__kitname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .card__kit .arw{margin-left:auto;color:var(--text-soft);transition:transform .14s} .card__kit a:hover .arw{transform:translateX(3px);color:var(--ink)} /* Fills the fourth slot when there are fewer than four best sellers. A row that stops after two cards reads as a broken grid; a note that says why reads as a shop that is still filling its shelves — which is the truth. */ .card--ghost{flex-direction:column;justify-content:center;align-items:flex-start;gap:.5rem; padding:1.4rem 1.3rem;background:none;border:2px dashed var(--line);box-shadow:none} .card--ghost:hover{transform:none;border-color:var(--green);box-shadow:none} .card--ghost .hand{color:var(--purple);font-size:1.05rem} .card--ghost strong{font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.15;color:var(--ink)} /* Rubber stamp. It used to be absolutely positioned at the right edge of .rail-head, which parked it directly on top of the "See the whole catalog" button at every width where both fitted — desktop included. It sits in the flow now and keeps only the tilt. */ .stamp{flex:none;transform:rotate(-8deg);font-family:var(--display);font-weight:800;font-size:.8rem; letter-spacing:.06em;text-transform:uppercase;color:var(--purple);border:3px double var(--purple);border-radius:8px; padding:.4em .7em;opacity:.85;line-height:1;background:color-mix(in srgb,var(--purple) 6%,transparent)} /* ======================================================================== 10 · PROOF ======================================================================== */ .proof{background:var(--ink);color:#fff} .proof .wrap{padding-block:clamp(3rem,6vw,4.5rem)} .proof__top{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem} .proof__top h2{color:#fff;max-width:18ch} .proof__top .hand{color:var(--green-hi);font-size:1.2rem} .badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:2.2rem} .badge{border:1.5px dashed rgba(255,255,255,.24);border-radius:var(--r);padding:1.3rem 1.2rem} .badge b{display:block;font-family:var(--display);font-weight:800;font-size:1.55rem;color:var(--green-hi);letter-spacing:-.02em} .badge span{font-size:.85rem;color:rgba(255,255,255,.72);margin-top:.25rem;display:block} .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .quote{background:var(--paper-card);color:var(--text);border-radius:var(--r);padding:1.3rem;box-shadow:var(--shadow)} .quote:nth-child(2){transform:rotate(-1deg)} .quote:nth-child(3){transform:rotate(.8deg)} .quote .stars{color:var(--green);letter-spacing:.1em;font-size:.95rem;margin-bottom:.6rem} .quote p{font-size:.98rem;line-height:1.5} .quote footer{margin-top:.9rem;font-family:var(--hand);font-size:.95rem;color:var(--text-soft)} .ph{font-size:.62rem;color:var(--text-soft);opacity:.6;display:block;margin-top:.5rem} /* ======================================================================== 11 · CTE SPOTLIGHT ======================================================================== */ .spot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center} .spot__panel{background:linear-gradient(135deg,var(--s-cte),#d63062);color:#fff;border-radius:var(--r-lg);padding:clamp(1.8rem,4vw,2.8rem);box-shadow:var(--shadow);position:relative} .spot__panel .eyebrow{color:rgba(255,255,255,.82)} .spot__panel h2{color:#fff;margin:.55rem 0 1rem} .spot__panel p{color:rgba(255,255,255,.93);max-width:42ch} .pathlist{margin-top:1.5rem} .pathlist a{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;border-top:1px dashed rgba(255,255,255,.4);font-weight:600;transition:padding-left .15s} .pathlist a:hover{padding-left:.4rem} .pathlist a span{font-family:var(--hand);opacity:.9;font-weight:500} .spot__copy h3{font-size:1.4rem;margin-bottom:.5rem;color:var(--ink)} .spot__copy>p{color:var(--text-soft);margin-bottom:1rem} .spot__copy ul{list-style:none;display:flex;flex-direction:column;gap:.7rem} .spot__copy li{display:flex;gap:.7rem;align-items:flex-start;font-size:.96rem} .spot__copy li::before{content:"✓";flex:none;color:#fff;background:var(--green);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;margin-top:.1rem} /* ======================================================================== 12 · CLOSER + FOOTER ======================================================================== */ .closer{background:var(--paper-2);text-align:center} .closer .wrap{padding-block:clamp(3rem,7vw,5rem)} .closer .hand{color:var(--purple);font-size:1.3rem;display:block;margin-bottom:.5rem;transform:rotate(-1.5deg)} .closer h2{max-width:17ch;margin-inline:auto;color:var(--ink)} .closer p{color:var(--text-soft);max-width:44ch;margin:.9rem auto 1.8rem} .closer__cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap} .foot{background:var(--ink);color:rgba(255,255,255,.74)} .foot .wrap{padding-block:3rem 2rem} .foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.2rem;border-bottom:1px dashed rgba(255,255,255,.2)} .foot h4{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:.9rem} .foot ul{list-style:none;display:flex;flex-direction:column;gap:.55rem} .foot a{font-size:.9rem;transition:color .15s} .foot a:hover{color:var(--green-hi)} .foot__brand img{height:52px;width:auto;margin-bottom:.9rem} .foot__brand p{font-size:.88rem;max-width:32ch;line-height:1.5} /* The category links. A wrapping row rather than a fifth column of the grid above: there are a few dozen of them and they grow with the catalog, so a column would either be a very long one or a list that quietly stops. Smaller and dimmer than the columns because this is the index, not the navigation — somebody looking for "Contact" should still find it first. */ .foot__cats{padding-top:1.6rem;border-bottom:1px dashed rgba(255,255,255,.2); padding-bottom:1.6rem} .foot__cats ul{flex-direction:row;flex-wrap:wrap;gap:.4rem 1.1rem} .foot__cats a{font-size:.82rem;opacity:.8} .foot__cats a:hover{opacity:1} .foot__bottom{display:flex;justify-content:space-between;padding-top:1.5rem;flex-wrap:wrap;gap:.8rem;font-size:.8rem} /* ======================================================================== 13 · RESPONSIVE ======================================================================== */ @media (max-width:1000px){ .hero__grid{grid-template-columns:1fr} .card-stats{max-width:400px;transform:rotate(0)} .browse{grid-template-columns:1fr} .products{grid-template-columns:repeat(3,1fr)} .badges{grid-template-columns:repeat(2,1fr)} .quotes{grid-template-columns:1fr} .spot{grid-template-columns:1fr} .foot__grid{grid-template-columns:1fr 1fr} } /* The nav folds into the toggle at 990, not 640. Between those two widths the links wrap onto a second row, "unlocking potential" runs underneath "Catalog", and a signed-in admin — who gets two links more — pushes the bar past the viewport and makes the whole page scroll sideways. WAS 900, FOR SEVEN LINKS. "Contact" made it eight, and a link is not free: measured from Hanken Grotesk at the .92rem/600 this rule renders it at, the word is 53.4px and the flex gap before it is 1.7rem = 27.2px, so the row needs 80.6px more than it did. 900 + 81 = 981, rounded up to 990 to keep the margin the old number had. Anything below that is the toggle, which is a working menu; getting this wrong in the other direction is a bar that overflows the viewport, so it is rounded up rather than down. IF A NINTH LINK IS EVER ADDED, this number moves again — measure the word at .92rem/600, add 27.2 for its gap, and add the total here. */ @media (max-width:990px){ .nav{position:absolute;top:70px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0; border-bottom:1.5px solid var(--line);padding:.4rem var(--gut) 1.2rem;display:none; box-shadow:0 18px 34px -24px rgba(12,20,120,.55)} .nav.open{display:flex} .nav a{padding:.85rem 0;border-top:1px dashed var(--line)} /* The dashed rule is a divider between links; on the pill it just draws a line across the top of the button. */ .nav .btn{margin-top:.7rem;justify-content:center;border-top:none} .nav__form{border-top:1px dashed var(--line)} .nav__logout{padding:.85rem 0;width:100%;text-align:left} .navtoggle{display:block} } /* The card grid rode along in the block above while the nav folded at the same width. It does not belong to the nav and its width was never in question, so it stays at 900 rather than following the header up to 990 — which would have left the three-column shelf alive over a ten-pixel range between 1000 and 990 and dropped everything else straight to two. */ @media (max-width:900px){ .products{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .brand__tag{display:none} .subjects{grid-template-columns:1fr 1fr} .badges{grid-template-columns:1fr} .foot__grid{grid-template-columns:1fr} .note{transform:none!important} } /* Two cards per row on a phone. One card per row makes the cover a 300px-tall slab and puts a single book on a whole screen, so the shelf reads as a list of posters. The trade is a card about 160px wide, which is too narrow for the type set above — so everything on it steps down here: tighter gap and padding to buy back width, smaller title and chips, and a teaser that hyphenates rather than breaking mid-word. */ @media (max-width:560px){ .products{grid-template-columns:repeat(2,1fr);gap:.75rem} .cover{padding:.7rem} .cover__img{padding:.4rem .4rem .4rem .7rem} .cover__title{font-size:1.05rem} .cover__series{font-size:.75rem} .card__body{padding:.7rem .75rem .8rem;gap:.45rem} .chips{gap:.3rem} .chip{font-size:.62rem;padding:.28em .5em} .card__name{font-size:.92rem} /* Long single words — "Comprehension", a bare URL in an imported teaser — are wider than the column, so let them hyphenate before they overflow. */ .card__teaser{font-size:.8rem;-webkit-line-clamp:2;hyphens:auto;overflow-wrap:break-word} .card__view{font-size:.8rem} .card__count{font-size:.8rem} /* The file strip keeps all three rows at half width — they are what the card is for — and buys the room back from the padding around them. */ .card__kit{padding:.35rem .35rem .45rem} .card__kit a{font-size:.78rem;gap:.4rem;padding:.35rem .4rem} /* Spans the row: at half width the ghost's three lines of copy stack into a ragged block taller than the cards it sits beside. */ .card--ghost{grid-column:1/-1;padding:1.1rem} .card--ghost strong{font-size:1.05rem} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .circled path{stroke-dashoffset:0} } /* ======================================================================== 14 · FORMS · AUTH SCREENS ======================================================================== */ .authwrap{display:grid;place-items:center;padding-block:clamp(2.5rem,7vw,5rem);min-height:58vh} .authcard{width:100%;max-width:410px;background:var(--paper-card);border:1.5px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(1.5rem,4vw,2.2rem);position:relative;overflow:hidden} /* washi-tape strip, same signature as the hero stat card */ .authcard::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg); width:120px;height:26px;background:color-mix(in srgb,var(--green) 55%,transparent); border-left:1px dashed rgba(255,255,255,.6);border-right:1px dashed rgba(255,255,255,.6)} .authcard h1{font-size:1.7rem;letter-spacing:-.025em;color:var(--ink);margin-top:.5rem} .authcard .hand{display:block;margin-top:.35rem;font-size:1rem;color:var(--purple)} .authcard__logo{height:56px;width:auto;margin:.6rem 0 1rem} .field{display:flex;flex-direction:column;gap:.4rem;margin-top:1.2rem} .field label{font-weight:600;font-size:.85rem;color:var(--text-soft)} .field input,.field select,.field textarea{font:inherit;color:var(--text);background:var(--paper); border:1.5px solid var(--line);border-radius:var(--r);padding:.7em .85em;transition:border-color .15s,box-shadow .15s} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent);outline:none} .field__hint{font-size:.78rem;color:var(--text-soft)} .authcard .btn{width:100%;justify-content:center;margin-top:1.5rem} .alert{margin-top:1.2rem;padding:.75rem .9rem;border-radius:var(--r);font-size:.88rem;line-height:1.4; border-left:4px solid var(--red);background:color-mix(in srgb,var(--red) 8%,var(--paper-card))} .alert--note{border-left-color:var(--purple);background:color-mix(in srgb,var(--purple) 10%,var(--paper-card))} /* .alert--ok has been in _layout.html's flash markup since the admin was built and has never had a rule, so every "Saved." has been rendering in the red of a failure. Green, which is what it was always asking for. */ .alert--ok{border-left-color:var(--green);background:color-mix(in srgb,var(--green) 9%,var(--paper-card))} /* Not an error and not good news either: the state the site is deliberately in while somebody works on it. */ .alert--warn{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,var(--paper-card))} /* Several to a table cell on the old-site review screen, where an alert is one row's objection rather than the whole page's bad news. */ .alert--tight{margin-top:0;padding:.5rem .6rem;font-size:.82rem} /* ======================================================================== 15 · ADMIN -------------------------------------------------------------------------- Same tokens as the public site, but flatter and denser — a working desk, not a shop window. No rotation, no hand-drawn marks except the greeting. ======================================================================== */ .adminbar{background:var(--ink);color:#fff} .adminbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-block:1.6rem 1.5rem} .adminbar h1{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.025em} .adminbar .eyebrow{color:rgba(255,255,255,.6)} .adminbar .hand{color:var(--green-hi);font-size:1.02rem;display:block;margin-top:.35rem} .adminbar__actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center} .adminbar .btn--outline{border-color:rgba(255,255,255,.55);color:#fff} .adminbar .btn--outline:hover{background:#fff;color:var(--ink)} .admin{padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,4.5rem)} /* quick-read metric tiles */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.1rem);margin-bottom:clamp(1.6rem,3vw,2.4rem)} .tile{--c:var(--blue);background:var(--paper-card);border:1.5px solid var(--line);border-radius:var(--r); padding:1.1rem 1.2rem;border-top:5px solid var(--c)} .tile dt{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--text-soft)} .tile dd{font-family:var(--display);font-weight:800;font-size:1.9rem;color:var(--ink);letter-spacing:-.02em;margin-top:.3rem;line-height:1} .tile dd small{display:block;font-family:var(--body);font-weight:500;font-size:.78rem;color:var(--text-soft);letter-spacing:0;margin-top:.35rem} /* panel grid — each panel is one area of the admin */ /* min(280px,100%), not a bare 280px: a bare track minimum is a floor the track cannot go under, so on a viewport narrower than the minimum plus the gutters the grid pushes past the screen edge and the whole page scrolls sideways. Every auto-fit/auto-fill grid below is capped the same way. */ .panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(1rem,2vw,1.4rem)} .panel{background:var(--paper-card);border:1.5px solid var(--line);border-radius:var(--r-lg); padding:1.3rem 1.4rem 1.4rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.55rem} .panel__hd{display:flex;align-items:center;justify-content:space-between;gap:.8rem} .panel h2,.panel h3{font-size:1.12rem;color:var(--ink);letter-spacing:-.02em} .panel p{font-size:.92rem;color:var(--text-soft);line-height:1.5} .panel__foot{margin-top:auto;padding-top:.9rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center} /* status pill: what's live vs. what's still to build */ .pill{font-weight:700;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;padding:.35em .7em;border-radius:99px;white-space:nowrap} .pill--soon{background:color-mix(in srgb,var(--purple) 12%,#fff);color:var(--purple)} .pill--live{background:color-mix(in srgb,var(--green) 16%,#fff);color:var(--green-ink)} /* Also the header marker, where it is an — hence the explicit colour on hover, which would otherwise take the nav link's. */ .pill--maint{background:color-mix(in srgb,var(--amber) 18%,#fff);color:var(--amber); border:1.5px solid color-mix(in srgb,var(--amber) 40%,transparent)} a.pill--maint:hover{background:var(--amber);color:#fff;border-color:var(--amber);text-decoration:none} /* key/value rows — session details, and a shape for future record lists */ .kv{list-style:none;display:flex;flex-direction:column} .kv li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;border-top:1px dashed var(--line);font-size:.92rem} .kv li:first-child{border-top:none} .kv span:first-child{color:var(--text-soft)} .kv span:last-child{font-weight:600;color:var(--ink);text-align:right;overflow-wrap:anywhere} @media (max-width:1000px){ .tiles{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .tiles{grid-template-columns:1fr} .adminbar .wrap{flex-direction:column;align-items:flex-start} } /* ======================================================================== 16 · ADMIN · CMS COMPONENTS ======================================================================== */ /* section nav under the admin bar */ .subnav{background:var(--ink-2);position:sticky;top:70px;z-index:40} .subnav .wrap{display:flex;gap:1.4rem;overflow-x:auto} .subnav a{color:rgba(255,255,255,.7);font-weight:600;font-size:.88rem;padding:.85rem 0;white-space:nowrap; border-bottom:3px solid transparent;transition:color .15s,border-color .15s} .subnav a:hover{color:#fff} .subnav a.is-on{color:#fff;border-bottom-color:var(--green-hi)} .flash{margin-bottom:1.4rem} .muted{color:var(--text-soft)} .small{font-size:.84rem} .warn{color:var(--red);font-weight:600} /* editor tab strip */ .tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.6rem;border-bottom:1.5px solid var(--line)} .tab{padding:.7em 1.1em;font-weight:700;font-size:.9rem;color:var(--text-soft); border:1.5px solid transparent;border-bottom:none;border-radius:var(--r) var(--r) 0 0;margin-bottom:-1.5px} .tab:hover{color:var(--ink)} .tab.is-on{background:var(--paper-card);border-color:var(--line);color:var(--ink)} .tab.is-off{opacity:.4;cursor:not-allowed} /* list toolbar + filters */ .listbar{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem} .filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center} .filters input,.filters select{font:inherit;font-size:.9rem;color:var(--text);background:var(--paper-card); border:1.5px solid var(--line);border-radius:var(--r);padding:.5em .7em} .filters input:focus,.filters select:focus{border-color:var(--green);outline:none} /* data table */ .table{width:100%;border-collapse:collapse;background:var(--paper-card);border:1.5px solid var(--line); border-radius:var(--r);overflow:hidden} .table th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft); padding:.8rem .9rem;background:var(--paper-2);border-bottom:1.5px solid var(--line);white-space:nowrap} .table td{padding:.8rem .9rem;border-top:1px solid var(--line);vertical-align:top;font-size:.92rem} .table tr:hover td{background:color-mix(in srgb,var(--paper-2) 45%,transparent)} .table a strong{color:var(--ink)} .thumb{display:block;width:228px;height:auto;border-radius:4px;border:1px solid var(--line)} .thumb--empty{aspect-ratio:2/3;background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 5px,#fff 5px,#fff 10px)} /* workbook cards — the "Edit a workbook" list. Two to a row on desktop at half the cover width, because that list is searched by looking at covers and a full-width row showed four books at a time. minmax(0,1fr) rather than 1fr so a long slug can't hold a column open wider than half the page; min-width:0 on the body for the same reason one level down. One column below 900px, where the table it replaced used to start scrolling sideways. */ .wbgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start} .wbcard{display:grid;grid-template-columns:114px minmax(0,1fr);gap:1rem; background:var(--paper-card);border:1.5px solid var(--line);border-radius:var(--r); padding:1rem;transition:border-color .15s ease} .wbcard:hover{border-color:color-mix(in srgb,var(--green) 45%,var(--line))} .wbcard__cover{display:block} .wbcard .thumb{width:100%} .wbcard__body{min-width:0;display:flex;flex-direction:column;gap:.4rem} .wbcard__body a strong{color:var(--ink)} .wbcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem} .wbcard__meta .bar{margin-top:0;flex:1 1 60px;max-width:80px} .wbcard__acts{margin-top:auto;padding-top:.3rem} @media (max-width:900px){ .wbgrid{grid-template-columns:1fr} } @media (max-width:420px){ .wbcard{grid-template-columns:84px minmax(0,1fr);gap:.8rem} } .rowacts{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .linkbtn{font-weight:600;font-size:.84rem;color:var(--blue);text-decoration:underline;text-underline-offset:2px} .linkbtn:hover{color:var(--purple)} /* status pills reuse the .pill base from section 15 */ .pill--published{background:color-mix(in srgb,var(--green) 16%,#fff);color:var(--green-ink)} .pill--draft{background:var(--paper-2);color:var(--text-soft)} .pill--retired{background:color-mix(in srgb,var(--red) 12%,#fff);color:var(--red)} /* editor forms */ .formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(1rem,2vw,1.4rem);align-items:start} .formgrid .panel,.repeater{gap:0} /* minmax(0,1fr) rather than 1fr, plus min-width:0 on the children: a grid item defaults to min-width:auto, so a text input's intrinsic width (~20 chars) would hold these columns open wider than the panel and spill the fields out of it. Both halves are needed — the track has to be allowed to shrink AND the item has to be allowed to shrink inside it. */ .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem} .pair>*{min-width:0} .field input,.field select,.field textarea{max-width:100%} .field textarea{resize:vertical;font-family:inherit} /* Links & resources: a full-width panel so its own two columns have room. In a ~340px formgrid track two columns of URL fields would be unreadable, so the panel spans every track and splits inside itself instead. */ .panel--wide{grid-column:1/-1} .linkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.4rem} .linkgrid>*{min-width:0} /* The uploaded-file line sits between the label and the input, so it reads as part of the field rather than as a hint about it. */ .filenow{display:flex;flex-direction:column;gap:.15rem;font-size:.85rem} .filenow a{color:var(--green);font-weight:600} .filenow em{color:var(--text-soft);font-style:normal;font-size:.78rem;line-height:1.4} .field input[type=file]{padding:.5rem .6rem;font-size:.88rem} .linkgrid .check{margin-top:.1rem;font-size:.85rem} @media (max-width:860px){ .linkgrid{grid-template-columns:1fr} } .checks{display:flex;flex-direction:column;gap:.55rem;margin-top:.9rem} .check{display:flex;align-items:center;gap:.55rem;font-size:.93rem;cursor:pointer} .check input{width:17px;height:17px;accent-color:var(--green);flex:none} .check em{color:var(--text-soft);font-style:normal;font-size:.82rem} .preview{max-width:130px;border-radius:6px;border:1px solid var(--line);margin-bottom:.5rem} /* An explicit rule, because the import screen redefines .preview as a grid container further down this file — and any author display: beats the UA sheet's [hidden]{display:none}. Without this, a product with no cover yet renders the empty the edit page keeps in place for the upload to fill. */ .preview[hidden]{display:none} .formactions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem;align-items:center} /* subject picker with a primary radio */ .picker{width:100%;border-collapse:collapse;margin-top:.6rem} .picker th{text-align:left;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; color:var(--text-soft);padding:.4rem .3rem} .picker td{padding:.4rem .3rem;border-top:1px dashed var(--line);font-size:.93rem} .picker input[type=checkbox]{width:17px;height:17px;accent-color:var(--green)} .picker input[type=radio]{width:17px;height:17px;accent-color:var(--purple)} .picker label{cursor:pointer} /* pathways lock until CTE is selected */ [data-pathways][data-locked] .checks{opacity:.45;pointer-events:none} /* repeaters: editions, listings, attached standards */ .repeater{margin-bottom:.4rem} .subdelete{margin:0 0 1.4rem .2rem} .editionblock{margin-bottom:2.2rem} .editionblock__hd{font-size:1.1rem;color:var(--ink);margin-bottom:.8rem; display:flex;align-items:baseline;gap:.6rem;border-bottom:1.5px dashed var(--line);padding-bottom:.5rem} /* inline-editable rows (standards + taxonomy libraries) */ .resultlist{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem} .resultrow{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;background:var(--paper-card); border:1.5px solid var(--line);border-radius:var(--r);padding:.7rem .9rem} .resultrow input,.resultrow select{font:inherit;font-size:.9rem;color:var(--text);background:var(--paper); border:1.5px solid var(--line);border-radius:8px;padding:.45em .6em} .resultrow input:focus,.resultrow select:focus{border-color:var(--green);outline:none} .resultrow .grow{flex:1;min-width:140px} .resultrow__id{flex:1;min-width:200px} .empty{background:var(--paper-card);border:1.5px dashed var(--line);border-radius:var(--r-lg); padding:2.4rem 1.5rem;text-align:center;display:flex;flex-direction:column;gap:.5rem;align-items:center} .dangerzone{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap; margin-top:2.5rem;padding:1.1rem 1.3rem;border:1.5px solid color-mix(in srgb,var(--red) 35%,var(--line)); border-radius:var(--r);background:color-mix(in srgb,var(--red) 4%,var(--paper-card))} .dangerbtn{border-color:var(--red);color:var(--red)} .dangerbtn:hover{background:var(--red);color:#fff} /* Stars, in the admin. The home page's .quote .stars is more specific and so keeps its own colour — this is the bare class, for the review dashboard and the star picker. */ .stars{color:var(--green);letter-spacing:.08em;white-space:nowrap} /* Visually hidden but still focusable and still submittable. Used for the default submit button that makes Return save a form rather than trip one of the buttons that happens to come first in the markup. */ .offscreen{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em; background:var(--paper-2);padding:.15em .4em;border-radius:4px} /* A data table scrolls sideways instead of being crushed. display:block is what makes overflow-x apply; the cell minimums are what stop the columns from collapsing to one word each once it does — without them a title column ends up a 40px ribbon of hyphenated slug. */ @media (max-width:900px){ .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} .table th,.table td{min-width:8rem} .table th:first-child,.table td:first-child{min-width:15rem} } @media (max-width:640px){ .pair{grid-template-columns:1fr} .subnav{top:70px} } /* ======================================================================== 17 · ADMIN · IMPORT WIZARD ======================================================================== */ /* numbered step rail */ .steps{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem} .step{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:99px; background:var(--paper-card);border:1.5px solid var(--line);font-size:.88rem;color:var(--text-soft)} .step__n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--paper-2);color:var(--text-soft);font-weight:800;font-size:.78rem} .step.is-on{border-color:var(--green);color:var(--ink);font-weight:600} .step.is-on .step__n{background:var(--green);color:var(--green-ink)} .step.is-done{border-color:color-mix(in srgb,var(--green) 45%,var(--line))} .step.is-done .step__n{background:var(--green-hi);color:var(--green-ink)} /* preview: image beside the pulled data */ .preview{display:grid;grid-template-columns:260px 1fr;gap:clamp(1.2rem,3vw,2rem); background:var(--paper-card);border:1.5px solid var(--line);border-radius:var(--r-lg); padding:clamp(1.2rem,3vw,1.8rem);box-shadow:var(--shadow)} .preview__img img{width:100%;border-radius:var(--r);border:1px solid var(--line);margin-bottom:.6rem} .preview__body h2{color:var(--ink);font-size:1.4rem;letter-spacing:-.02em} /* compliance / feature bullets */ .rules{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem} /* Deliberately not display:flex. These items carry inline and inside the sentence, and each one of those becomes a flex item of its own — so the line breaks into side-by-side columns as soon as the panel is narrow. The marker is positioned instead, which leaves the sentence a single run. */ .rules li{position:relative;padding-left:1.1rem;font-size:.92rem;line-height:1.5;color:var(--text)} .rules li::before{content:"·";position:absolute;left:.1rem;top:-.12em; color:var(--green);font-weight:800;font-size:1.4rem;line-height:1} @media (max-width:760px){ .preview{grid-template-columns:1fr} } /* ======================================================================== 18 · ADMIN · SIDE-BY-SIDE DESCRIPTION EDITOR ======================================================================== */ .sxs{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1rem;align-items:start} .sxs .field{margin-top:0} .sxs textarea{font-family:inherit;font-size:.93rem;line-height:1.5;resize:vertical;min-height:14rem} .sxs label .muted{font-weight:500;text-transform:none;letter-spacing:0} @media (max-width:860px){ .sxs{grid-template-columns:1fr} } /* ======================================================================== 19 · ADMIN · IMPORT WIZARD RAIL + PUBLIC PRODUCT PAGE ======================================================================== */ /* progress rail — five steps, current one highlighted, done ones clickable */ .wiz{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:1rem} .wiz__step{display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;border-radius:var(--r); background:var(--paper-card);border:1.5px solid var(--line);transition:border-color .15s,transform .15s} a.wiz__step:hover{border-color:var(--green);transform:translateY(-2px)} .wiz__n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center; font-weight:800;font-size:.8rem;background:var(--paper-2);color:var(--text-soft)} .wiz__label{display:flex;flex-direction:column;line-height:1.2;min-width:0} .wiz__label strong{font-size:.9rem;color:var(--ink)} .wiz__label em{font-style:normal;font-size:.72rem;color:var(--text-soft); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wiz__step.is-on{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 15%,transparent)} .wiz__step.is-on .wiz__n{background:var(--green);color:var(--green-ink)} .wiz__step.is-done .wiz__n{background:var(--green-hi);color:var(--green-ink)} .wiz__step.is-todo{opacity:.55} .wiz__meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1.6rem} /* thin progress bar in the products list */ .bar{height:4px;border-radius:99px;background:var(--paper-2);margin-top:.3rem;overflow:hidden;max-width:110px} .bar span{display:block;height:100%;background:var(--green);border-radius:99px} /* browser-chrome frame around the step-4 preview */ .previewframe{border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--paper-card)} .previewframe__bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;background:var(--paper-2);border-bottom:1.5px solid var(--line)} .previewframe__bar .dot{width:10px;height:10px;border-radius:50%;background:var(--line)} .previewframe__url{margin-left:.6rem;font-size:.78rem;color:var(--text-soft); background:var(--paper-card);border-radius:99px;padding:.2em .8em;border:1px solid var(--line)} .previewframe__page{padding:clamp(1.2rem,3vw,2.2rem)} .donecard{display:flex;gap:1.2rem;align-items:flex-start} .donecard__mark{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--green);color:var(--green-ink);font-size:1.4rem;font-weight:800} /* The public product page used to live here, sharing a section header with the wizard rail because the wizard's step-4 preview renders it. It has its own section at the end of this file now — it outgrew a footnote, and being last is also what lets it win against the unscoped .chip and .muted rules the admin sections declare further down. See §27. */ @media (max-width:900px){ .wiz{grid-template-columns:repeat(2,1fr)} .wiz__label em{display:none} } @media (max-width:560px){ .wiz{grid-template-columns:1fr} } /* ======================================================================== 20 · SAMPLE PAGES + TABLE OF CONTENTS -------------------------------------------------------------------------- Two blocks that appear twice each: in the product editor's tabs, and on the public page (which the wizard's step-4 preview renders too). The admin variants add controls; the shapes themselves are shared. ======================================================================== */ /* a section label with an action on the far right */ .sechead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap} /* --- admin: the sample-page gallery being arranged ---------------------- */ .pagegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:1rem} .pagecard{position:relative;background:var(--paper-card);border:1.5px solid var(--line); border-radius:var(--r);padding:.6rem;display:flex;flex-direction:column;gap:.5rem} .pagecard img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--paper-2); border-radius:6px;border:1px solid var(--line)} /* the position number, so the order is readable at a glance rather than inferred from where a card happens to have wrapped to */ .pagecard__n{position:absolute;top:.4rem;left:.4rem;z-index:1;min-width:22px;height:22px; padding:0 .35em;border-radius:99px;display:grid;place-items:center; font-weight:800;font-size:.72rem;background:var(--ink);color:#fff} .pagecard figcaption{display:flex;flex-direction:column;gap:.45rem} .pagecard input{font:inherit;font-size:.82rem;width:100%;color:var(--text);background:var(--paper); border:1.5px solid var(--line);border-radius:8px;padding:.4em .55em} .pagecard input:focus{border-color:var(--green);outline:none} .pagecard__acts{display:flex;gap:.35rem;flex-wrap:wrap} .pagecard__acts .btn{padding:.35em .7em;font-size:.78rem} .pagecard__acts .btn[disabled]{opacity:.35;cursor:not-allowed} .pagecard__acts .btn[disabled]:hover{background:none;color:var(--ink);transform:none} /* --- admin: the parsed-review check table ------------------------------- One card per review the model pulled out of a paste, before any of them are written. See _reviews_import.html. Every field is a real input rather than text with an Edit button, because the whole purpose of this screen is that somebody reads each row against the source and fixes what came out wrong. A row that has to be opened first is a row that gets skimmed. The unticked state is dimmed rather than hidden: the decision to drop a review stays visible and reversible until Import is pressed. :has() does that with no script; browsers without it simply show every row at full strength, which is a cosmetic loss and not a functional one. */ .revrows{display:flex;flex-direction:column;gap:1rem;margin-top:1rem} .revrow{display:flex;flex-direction:column;gap:.75rem; background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r); padding:1rem 1.05rem;transition:opacity .15s,border-color .15s} .revrow:has(.revrow__keep input:not(:checked)){opacity:.45} .revrow:has(.revrow__keep input:checked){border-color:color-mix(in srgb,var(--green) 34%,var(--line))} .revrow__keep{font-weight:700;font-size:.86rem} .revrow__meta{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:.7rem} .revrow .field{margin:0} .revrow textarea{min-height:0} /* What arrived, under a summary. Monospaced so a punctuation fix is visible as a difference rather than as a feeling that something moved. */ .revrow__diff summary{cursor:pointer;font-size:.82rem;font-weight:700;color:var(--text-soft)} .revrow__diff summary:hover{color:var(--ink)} .revrow__diff p{margin-top:.5rem;padding:.7rem .8rem;border-radius:8px; background:var(--paper-2);border:1px solid var(--line); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem; line-height:1.55;color:var(--text);white-space:pre-wrap} @media (max-width:640px){ .revrow__meta{grid-template-columns:1fr} } /* --- table of contents (admin preview and public page) ------------------ */ /* Row gap carries the separation between units in the admin preview, which has no card around each one to do it. The public page overrides it in §27.8, where .pdp .toc__unit is a bordered card and 1rem is already plenty. */ .toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:1.6rem 2rem;margin-top:.6rem} .toc__unit{break-inside:avoid} .toc__unit strong{display:block;font-family:var(--display);font-weight:800;font-size:1rem; color:var(--ink);letter-spacing:-.01em;padding-bottom:.35rem;margin-bottom:.4rem; border-bottom:1.5px dashed var(--line)} .toc__unit ul{list-style:none;display:flex;flex-direction:column;gap:.25rem} .toc__unit li{font-size:.9rem;color:var(--text-soft);line-height:1.4} .toc--public .toc__unit li{color:var(--text)} .samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:1rem;margin-top:1rem} .sample{display:flex;flex-direction:column;gap:.4rem} .sample img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--paper-2); border-radius:var(--r);border:1.5px solid var(--line);box-shadow:var(--shadow); transition:transform .16s,box-shadow .16s} .sample a:hover img{transform:translateY(-3px);box-shadow:var(--shadow-h)} .sample figcaption{font-size:.82rem;color:var(--text-soft);line-height:1.4} @media (max-width:560px){ .pagegrid,.samples{grid-template-columns:repeat(2,1fr)} .toc{grid-template-columns:1fr} } /* ======================================================================== 21 · /ed · EDUCATION NEWS ------------------------------------------------------------------------ SKELETON. This is the plain structural pass that makes /ed a real page while the pipeline is built; the dense, headline-forward treatment replaces this section wholesale at step 6. Anything here that survives that pass survives on merit, not because it was written first. Accent colours are not hard-coded: each column sets --c from ed_categories.accent_color and everything inside reads it. ======================================================================== */ .edhead{border-bottom:2.5px solid var(--ink);padding-block:1.4rem 1rem} .edhead__in{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;flex-wrap:wrap} .edhead h1{font-size:clamp(1.9rem,4.2vw,2.9rem);color:var(--ink)} .edhead__meta{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;font-size:.9rem} .edhead__date{font-weight:700;color:var(--text-soft);font-variant-numeric:tabular-nums} .edhead__today{font-weight:700;padding:.28em .7em;border-radius:99px; background:color-mix(in srgb,var(--c,var(--blue)) 14%,#fff);color:var(--c,var(--blue))} .edcols{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding-block:1.6rem 3rem} .edcol{--c:var(--blue);padding-inline:clamp(.6rem,1.2vw,1rem);border-left:1px solid var(--line)} .edcol:first-child{border-left:0;padding-left:0} .edcol:last-child{padding-right:0} .edcol__hd{border-top:4px solid var(--c);padding-top:.55rem;margin-bottom:1rem} .edcol__hd h2{font-size:1.02rem;color:var(--ink);letter-spacing:-.01em} .edcol__hd p{font-size:.78rem;color:var(--text-soft);line-height:1.35;margin-top:.25rem} .edpost{padding-block:.9rem;border-top:1px solid var(--line)} .edcol__list>.edpost:first-child{border-top:0} /* The card thumbnail. 3:2 to match what the image stage asks the model for, so a generated illustration is cropped by nothing here. */ .edpost__art{display:block;margin-bottom:.5rem} .edpost__art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover; border-radius:2px;background:color-mix(in srgb,var(--c,var(--blue)) 8%,#fff)} .edpost h3{font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:1.15;letter-spacing:-.015em} .edpost h3 a:hover{color:var(--c)} .edpost__dek{font-size:.85rem;color:var(--text-soft);line-height:1.4;margin-top:.3rem} .edpost__meta{display:flex;gap:.5rem;align-items:baseline;margin-top:.4rem;font-size:.76rem;color:var(--text-soft)} .edpost__date{font-variant-numeric:tabular-nums;font-weight:600} .edempty{font-size:.84rem;color:var(--text-soft);line-height:1.45;padding-block:.9rem} /* --- The post itself ------------------------------------------------------- Used by the public page, the admin preview and the run result screen, which is why it lives here rather than in a