/* ==========================================================================
Astrocaffe — block styles, Phase 1a Stage 3
Rebuilt from docs/02-design-system.md's extracted system, using the
tokens in design/tokens.css. Not copied file-by-file from
docs/_design-pack/css/style.css — structure follows the pack (same
selectors, same layout behaviour) but every literal colour, size, radius,
shadow and weight has been routed through a token where one exists, per
the consolidation decided 2026-08-03.
No Rails, no locale keys yet — this is Phase 1a. Copy is plain text,
reused from the pack's Slovenian, not yet translated or moved to YAML.
========================================================================== */
/* ---- Reset / base — shared by every block page ---- */
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background-color: var(--c-blue-950);
font-family: var(--font-body);
color: var(--c-white-85);
font-size: var(--fs-base);
line-height: var(--lh-loose);
}
img {
max-width: 100%;
display: block;
border: 0;
/* `height: auto` is the other half of `max-width: 100%` and was missing.
Added 2026-08-06 with the width/height attributes that now sit on the
markup for layout stability: an `height="2100"` attribute is a
presentational hint that sets a real CSS height, so without this the
constrained width no longer scales the height with it — a 2100px
square rendered 2100px tall in a 351px slot, and it also silenced
`aspect-ratio` wherever that is used to art-direct a crop. */
height: auto;
}
a {
color: var(--c-orange-400);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--c-green);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
p {
margin: 0 0 var(--space-3);
}
/* HEADINGS ARE LORA. Decided 2026-08-07 (Zlatan): every heading is
--font-heading, and --font-body on a heading is a special occasion, set
by hand, never a default.
Before this, `h2` alone declared --font-body and h3/h4 inherited Source
Sans from the body. That put the typeface on the tag, so correcting a
heading LEVEL — as the 8-h1 SEO fix on product.html did — silently changed
the typeface of six section headings from serif to sans. Heading level
belongs to the document; heading look belongs to the class. */
h1,
h2,
h3,
h4 {
margin: 0 0 var(--space-2);
font-family: var(--font-heading);
font-weight: var(--fw-light);
line-height: var(--lh-tight);
}
h1 {
font-size: var(--fs-5xl);
font-weight: var(--fw-bold);
letter-spacing: -1px;
}
h2 {
font-size: var(--fs-4xl);
font-weight: var(--fw-light);
}
.w-container {
max-width: var(--container-w);
margin: 0 auto;
padding-left: .75em;
padding-right: .75em;
}
/* Two halves of ONE .w-container, with NO wrapper (2026-10-03, Zlatan's
drawing: "I don't want to put it in a w-container"). Two .w-container-50
side by side, straight in a section:
left
right
Together they are exactly as wide as a .w-container (940px at most, the
screen's width below that), centred; each is half of it and brings the
container's padding on BOTH its sides, so the outer edges sit where a
container's padding does and the two paddings meet in the middle.
How, without a wrapper: they float left, each min(50%, half the container)
of the PARENT; the first of a pair gets the margin that centres the pair
(a percentage margin is a share of the parent's width); and the parent,
whatever it is, becomes display: flow-root so it still wraps its floats and
its background still shows. A lone half is centred. On a phone they stack,
each the whole width. Needs :has (every current browser). */
section:has(> .w-container-50),
div:has(> .w-container-50) {
display: flow-root;
}
.w-container-50 {
float: left;
width: min(50%, calc(var(--container-w) / 2));
padding-left: .75em;
padding-right: .75em;
}
.w-container-50:not(.w-container-50 + .w-container-50) {
margin-right: calc((100% - min(100%, var(--container-w))) / 2);
}
.w-container-50:only-child {
margin-left: calc((100% - min(50%, calc(var(--container-w) / 2))) / 2);
}
@media (max-width: 767px) {
.w-container-50,
.w-container-50:not(.w-container-50 + .w-container-50),
.w-container-50:only-child {
float: none;
width: 100%;
margin-right: 0;
/* margin-bottom: var(--space-12) */
}
}
.narrow-box {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.text-center {
text-align: center !important;
}
.uppercase {
text-transform: uppercase !important;
}
.hidden {
display: none;
}
.button-row {
text-align: center;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: var(--space-4) !important;
}
.mb-1x {
margin-bottom: var(--space-6) !important;
}
.mb-2 {
margin-bottom: var(--space-8) !important;
}
.mb-3 {
margin-bottom: var(--space-12) !important;
}
.mb-4 {
margin-bottom: var(--space-16);
}
/* The mb- steps, sideways (Zlatan, 2026-10-07). */
.mr-1 {
margin-right: var(--space-4) !important;
}
.mb-5 {
margin-bottom: var(--space-20);
}
.padding-x {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
/* ==========================================================================
Mobile: full-width sections centre their text
Added 2026-09-08 (Zlatan, from the mobile review).
`.reading-intro` already did this and it was the reason he asked for it
everywhere — a single column at 375px reads better centred, because the
ragged right edge of left-aligned text is the only thing distinguishing one
block from the next once everything is the same width.
Stated once here rather than per section, so a new section inherits it
instead of being forgotten.
THE OPT-OUTS ARE THE INTERESTING PART. Three kinds of content get worse
centred, and all three are opted out below rather than left to look wrong:
- anything with a bullet or an icon hanging to the LEFT of it. The bullet
stays put while the text slides away from it, so the two come apart.
- form fields. A label centred over a full-width input has no visible
relationship to it, and the eye has to re-find the start of every line.
- cards. They are their own little columns; centring is decided inside
the card, not by the section it happens to sit in.
- a long text meant to be READ, not scanned — the astrology basics
chapter (added 2026-09-26, PROVISIONAL). The rule above is right for
blocks of two or three sentences; over twenty paragraphs a centred
column makes the eye hunt for the start of every line.
========================================================================== */
@media (max-width: 767px) {
article > section {
text-align: center;
}
.form-wrapper,
.order-features,
.author-facts,
.feature-list,
.review-card,
.confirm-list,
.place-suggestions,
.account-menu,
.chapter-layout,
.chapter-card,
.planet-list {
text-align: left;
}
}
.padding-xl {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
.padding-xxl {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
/* Demo-page-only chrome — not part of the design system, just lets each
block file stand alone with some breathing room and a caption. */
.demo-section {
padding: var(--space-8) var(--space-4);
}
.demo-caption {
max-width: var(--container-w);
margin: 0 auto var(--space-4);
font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
font-size: var(--fs-xs);
color: var(--c-text-soft);
}
.demo-caption a {
color: var(--c-blue-500);
}
.demo-section.dark-demo {
background: var(--c-blue-950);
}
.demo-section.dark-demo .demo-caption {
color: var(--c-white-75);
}
/* ==========================================================================
Buttons / CTAs — _cta_button
========================================================================== */
.button {
display: inline-block;
/* Vertical padding one step down from horizontal on the spacing scale.
1rem vs 1.5rem is 33% smaller — the scale has no 1.125rem step, which
is what an exact 25% would need. */
padding: var(--space-4) var(--space-6);
border-radius: var(--radius);
background-color: var(--c-orange-red);
font-family: var(--font-body);
color: var(--c-white-soft);
font-weight: var(--fw-regular);
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
border: none;
transition: background-color var(--transition), transform var(--transition);
font-size: var(--fs-md);
}
.button:hover {
background-color: var(--c-green);
color: var(--c-white);
box-shadow: var(--shadow-tight);
}
.button.outline {
/* padding now inherited from .button — was a duplicate of the same values */
border: 2px solid var(--c-white-75);
background-color: transparent;
color: var(--c-white-75);
text-transform: none;
letter-spacing: normal;
}
.button.outline:hover {
background-color: var(--c-green);
color: var(--c-white);
border-color: var(--c-green);
}
.button.outline.blue {
box-shadow: none;
border-color: var(--c-border);
color: var(--c-text);
}
.button.outline.blue:hover {
background-color: var(--c-green);
color: var(--c-white);
border-color: var(--c-green);
}
.button.outline.small-button {
padding: var(--space-2) var(--space-4);
}
.cart-button {
margin: var(--space-6) 0;
padding: var(--space-4) 2rem var(--space-4) var(--space-20);
background-color: var(--c-orange-red);
background-image: url(../img/i-cart.svg);
background-position: var(--space-6) 47%;
background-size: 2.5rem;
background-repeat: no-repeat;
box-shadow: var(--shadow-tight);
font-size: var(--fs-lg);
letter-spacing: 1px;
font-weight: var(--fw-semibold);
}
@media (max-width:767px) {
#naroci-cols2 .cart-button {
margin: var(--space-1) 0;
}
}
.cart-button:hover {
background-color: var(--c-green);
background-image: url(../img/next-icon.png);
background-size: 32px;
background-position: 30px 50%;
}
/* ==========================================================================
Site chrome — _header, _nav_cart_icon, _footer, _floating_cta
========================================================================== */
.site-header {
background-color: var(--c-header);
width: 100%;
}
.site-header:hover {
background-color: var(--c-blue-850);
}
/* Stripped chrome — the reduced header/footer used on checkout steps.
It keeps `.site-header`'s own background, so it is the same bar as
everywhere else; only the contents are stripped back. That background is
semi-transparent by design, so the page nests this header INSIDE its first
starfield section exactly as `product.html` nests it inside the hero —
given something dark behind it, the shared token reads correctly and no
colour override is needed.
The hover darkening is dropped: with no nav links to reveal it only reads
as a stray hit area. */
.stripped-header:hover {
background-color: var(--c-header);
}
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 4%;
margin: 0;
position: relative;
}
.nav-logo {
padding: var(--space-2) 0;
flex-grow: 1;
}
.nav-logo .logo {
height: 40px;
width: auto;
}
.nav-menu {
display: flex;
align-items: stretch;
}
.nav-link {
display: inline-block;
padding: var(--space-4);
background-color: transparent;
font-family: var(--font-body);
color: var(--c-white-75);
font-weight: var(--fw-regular);
}
.nav-link:hover {
background-color: var(--c-green);
color: hsla(0, 0%, 100%, .9);
}
.nav-link.active-link {
border-top: 4px solid var(--c-orange);
color: var(--c-orange);
padding-top: .7rem;
}
.nav-link.active-link:hover {
background-color: var(--c-header);
}
.menu-toggle {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
padding: var(--space-2);
border-radius: var(--radius-sm);
transition: var(--transition);
}
.menu-toggle:hover {
background-color: var(--c-blue-950-80);
}
.menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--c-white);
}
/* 899, not 900. The hero rules below start at `min-width: 900px`, and a
max-width of 900 would match the same pixel — at exactly 900 the drawer
opened over a desktop-laid-out hero. Written the way the 768 boundary
already is. Measured and fixed 2026-09-13. */
@media (max-width: 899px) {
.nav-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background: var(--c-blue-950);
z-index: 100;
}
.nav-menu.open {
display: flex;
}
.nav-menu .nav-link {
width: 100%;
text-align: left;
font-size: 1.25em;
}
.nav-link.active-link {
border-top: none;
border-left: 4px solid var(--c-orange);
padding-top: var(--space-4);
}
.menu-toggle {
display: flex;
}
}
/* ---- _nav_account — "My astro", signed out and signed in ----
Added 2026-09-08.
ONE ITEM, TWO STATES, set by data-account-state on the wrapper:
out the link opens _auth_overlay. No menu.
in the link opens this dropdown.
The state is an attribute rather than two different markups because the
only thing that changes is what the click does — the item, its position and
its label are identical either way, and a signed-in header that reflows is
a header that looks broken for a moment on every page load.
In Rails the
is rendered ONLY when signed in. It is present in both
states here so the static design pages can show the menu at all; the CSS
below is what hides it when signed out, and it is belt-and-braces, not the
mechanism. */
.nav-account {
position: relative;
display: flex;
align-items: stretch;
}
.account-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
z-index: 10;
min-width: 180px;
/* An address can be long. The menu grows to fit one, then stops, and the
row inside it truncates rather than the menu reaching off the screen.
The viewport term is what keeps it on a narrow phone held sideways. */
max-width: min(22rem, calc(100vw - var(--space-8)));
padding: var(--space-2) 0;
border-radius: var(--radius-sm);
background-color: var(--c-blue-950);
box-shadow: var(--shadow-tight);
}
.nav-account[data-account-state="in"].open .account-menu {
display: block;
}
/* Signed in, the trigger goes to full white. The links either side sit at 75%,
so the difference is small on purpose: it is a confirmation for somebody who
already knows, not an announcement. Zlatan, 2026-09-12.
It is NOT orange, which was the first idea. Orange is already this nav's
"you are on this page" (.active-link below), and the pages behind this very
menu — Charts, Orders, Addresses, Settings — would have carried both meanings
on the same item at the same time. */
.nav-account[data-account-state="in"] > .nav-link {
color: var(--c-white);
}
.nav-account[data-account-state="in"] > .nav-link:hover {
color: var(--c-white);
}
/* ---- the signed-in address, at the top of the menu ----
Added 2026-09-12. The only thing we can honestly call the user: sign-up takes
an email and a password, nothing else, and the name on a chart belongs to the
chart — it is often a gift for somebody else.
Not a link, and not in the header. It would sit on screen in every screenshot
and every shared screen, and it is the identifier half of a credential. It
also answers a different question from "My astro": which account, rather than
where does this go. */
.account-email {
display: flex;
padding: var(--space-1) var(--space-6) var(--space-3);
margin-bottom: var(--space-2);
border-bottom: 1px solid var(--c-blue-800);
font-size: var(--fs-xs);
color: var(--c-white-55);
cursor: default;
}
/* TRUNCATE THE NAME, NEVER THE DOMAIN. `text-overflow: ellipsis` cuts the end
off, which would throw away the half that identifies the account: you know
your own address by its domain and its first few characters, not by its last
ones. So the two halves are separate elements — the local part shrinks and
the domain does not — and "zlatanbogd…@gmail.com" falls out of flexbox with
no script at all.
In Rails that is one `split('@')`. Worth it. */
.account-email__local {
overflow: clip;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 1.5ch;
/* always show who, even at the worst width */
}
/* Last resort only: a domain long enough to fill the menu on its own truncates
too, rather than pushing out of the box. The local part has already shrunk to
its minimum by then. */
.account-email__domain {
flex: 0 0 auto;
max-width: 100%;
overflow: clip;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-link {
display: block;
padding: var(--space-2) var(--space-6);
font-family: var(--font-heading);
color: var(--c-white-75);
white-space: nowrap;
}
.account-link:hover {
background-color: var(--c-blue-900);
color: var(--c-white);
}
/* Log out is the one destructive item in the list, so it is separated rather
than coloured — a red item in a six-item menu reads as an error state. */
.account-link--out {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--c-blue-800);
}
/* 899 to match the drawer above — the two have to switch on the same pixel or
the account menu styles itself for a drawer that is not there. */
@media (max-width: 899px) {
/* In the drawer there is nothing to drop DOWN from — the nav is already a
vertical list, so the submenu indents inside it instead of floating. */
.nav-account {
flex-direction: column;
}
.account-menu {
position: static;
min-width: 0;
padding: 0 0 var(--space-2) var(--space-6);
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.account-link {
padding: var(--space-2) var(--space-4);
font-size: 1.1em;
}
}
.cart-icon {
padding: 5px;
border-radius: var(--radius-sm);
transition: var(--transition);
position: relative;
width: 34px;
margin-left: var(--space-1);
}
.cart-icon:hover {
background-color: var(--c-green);
}
.cart-badge {
background-color: var(--c-orange-400);
color: var(--c-white);
position: absolute;
font-size: var(--fs-xs);
line-height: 1;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
right: -5px;
top: -5px;
}
.footer {
padding: var(--space-12) var(--space-4) 1px;
background-color: var(--c-blue-950);
background-image: linear-gradient(180deg, var(--c-blue-950), var(--c-blue-900));
color: var(--c-white-75);
border-top: 7px solid var(--c-blue-700);
/* border-top: var(--border-orange-5) */
}
.footer .w-container {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: space-between;
margin-bottom: var(--space-12);
}
.footer-company {
/* font-family: var(--font-heading) */
color: var(--c-cream);
font-size: var(--fs-base);
}
.footer-heading {
color: var(--c-orange);
font-weight: var(--fw-regular);
letter-spacing: 1px;
margin-bottom: var(--space-1);
line-height: var(--fs-2xl);
}
.footer-company .footer-heading {
margin-top: 1.5rem;
}
.stripped-footer .footer-company .footer-heading {
margin-top: 1.45rem;
}
.company-address {
/* margin-bottom: 1.6rem */
/* font-weight: var() <- left without a token (2026-09-29); an empty var() is invalid, so browsers skipped it anyway */
}
.footer-nav {
padding-left: var(--space-4);
border-left: 1px solid hsla(0, 0%, 100%, .25);
/* font-family: var(--font-heading) */
color: var(--c-cream);
font-size: var(--fs-base);
}
.footer-nav a,
.footer-company a {
display: block;
line-height: var(--fs-2xl);
}
.footer-nav a {
line-height: var(--fs-3xl);
}
.whitelink {
color: var(--c-white-75);
line-height: 24px;
}
.whitelink:hover {
color: var(--c-green);
}
/* Payment, modernised 2026-09-16 (Zlatan: "This is old school. Make it
modern."). It sat in a near-white box on a dark footer with a strip of
2010-era 3-D Secure logos. Now it is a column like its neighbours: the same
orange heading as "Published by", a row of quiet outlined badges, and the
sentence underneath with a lock. The divider-grade border matches
.footer-nav's own column rule, so the three columns read as one set. */
.footer-payment {
max-width: 45%;
}
.payment-methods {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: var(--space-2) 0 var(--space-3);
padding: 0;
list-style: none;
}
.payment-methods li {
padding: var(--space-1) var(--space-2);
border: 1px solid hsla(0, 0%, 100%, .25);
border-radius: var(--radius-sm);
color: var(--c-white-75);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: .02em;
line-height: 1;
white-space: nowrap;
}
/* --c-white-55 over the footer's gradient measures 6.16:1 at its dark end and
5.65:1 at its light end, so the quietest text in the column still passes. */
.payment-text {
padding-left: var(--space-6);
background: url('../img/icons/lock-white.svg') no-repeat 0 .2em / .95rem;
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--c-white-55);
}
/* THE PAYMENT COLUMN READS AS ITS OWN PANEL. Zlatan, 2026-09-24: "make it
visible that this is a different set of information." Beside two columns of
links, a third column of text looked like more links. A quiet inset box with
a rule around it separates it without adding colour to the footer.
The methods are grouped by kind behind one icon each — card, and the phone
wallets — rather than five word badges in a row. The icons are plain
glyphs, NOT brand marks: the real Visa and Mastercard artwork comes from
Stripe's asset kit in Phase 2, and a hand-drawn logo is worse than none.
Scoped to .footer-payment so the checkout's .payment-methods--light keeps
its badges, where they sit beside a radio and have to read as a set. */
.footer-payment {
padding: var(--space-4);
border: 1px solid var(--c-white-25);
border-radius: var(--radius);
background-color: var(--c-blue-950-80);
}
.footer-payment .payment-methods {
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.footer-payment .payment-methods li {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 0;
border: 0;
font-size: var(--fs-sm);
font-weight: var(--fw-regular);
letter-spacing: normal;
color: var(--c-cream);
}
.footer-payment .payment-methods img {
flex: 0 0 auto;
opacity: .7;
}
.legal-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--space-8);
/* font-family: var(--font-heading) */
color: var(--c-cream);
font-size: .75rem;
}
.legal-footer a {
/* .l-white merged into .whitelink 2026-08-03 — only the subfooter-specific
layout (inline flow + gap) needed to survive; colour now comes from
.whitelink itself. */
display: inline-block;
margin-right: var(--space-4);
/* Capitals from here, not typed (2026-10-09): typed capitals made
"PRIVACY" a second row in the text file beside "Privacy". */
text-transform: uppercase;
}
/* Three columns in one row from 768px. Fixed 2026-09-21 (Zlatan: broken
between 768 and 817px). The payment column used to ask for its full 45% up
front, and company + sitemap + 45% + the gaps is wider than the container
until about 818px, so it dropped to a second row. Now it starts from
nothing and takes whatever the other two leave, still capped at 45%; 12rem
is the narrowest its badges and sentence stay readable in. */
@media (min-width: 768px) {
.footer-payment {
flex: 1 1 0;
min-width: 12rem;
}
}
@media (max-width: 767px) {
.footer .w-container {
justify-content: flex-start;
flex-shrink: 1;
}
.footer-nav {
width: 50%;
flex-grow: 1;
margin-bottom: var(--space-4);
}
.footer-payment {
max-width: 100%;
}
}
/* The cookie consent banner was here. Removed 2026-09-06 at Zlatan's
request — the whole block, its markup on every page, initCookieBanner()
and blocks/cookie-banner.html. See docs/07-removals.md. The cookie POLICY
is untouched: it is page 17 on the page list and still linked from every
footer. */
/* Floating CTA — no markup in the pack either (#create-book-cta target
doesn't exist in product.html); rebuilt from the .floating-cta rules,
which do exist in the CSS. */
/* BUILT LIKE THE CART'S CHECKOUT BAR (Zlatan, 2026-09-24). It was a rounded
pill floating at the right edge; the cart's bar is a full-width strip across
the foot of the screen, blurred, with a drawn top seam. Two bars doing the
same job — "the way on is down here" — now look like one idea.
The collapse tab survives the change: it still slides the whole strip right
by its own width less the tab, so the tab stays at the edge and nothing is
dismissed for good. */
.floating-cta {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 200;
padding: var(--space-3) var(--space-4) var(--space-3) 0;
border-top: 1px solid var(--c-blue-700);
background-color: var(--c-blue-950-80);
backdrop-filter: blur(6px);
box-shadow: var(--shadow-tight);
text-align: center;
--cta-tab: 3.5rem;
transition: transform .35s ease;
}
/* The button keeps the right-hand end, as the checkout bar's does, and the
price sits between them rather than leaving the middle empty. */
.floating-cta.visible {
justify-content: space-between;
}
.floating-cta__price {
margin: 0 auto 0 0;
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--c-orange);
font-variant-numeric: tabular-nums;
}
/* "Free shipping" beside a lone book price — Zlatan, 2026-09-27. The rule:
every book price at a buy point, never on a card, never where free shipping
is already said nearby (home's and the product hero's price boxes), never
on an ebook. Small and quiet: it answers a doubt, it does not sell. */
.price-note {
font-size: var(--fs-sm);
font-weight: var(--fw-regular);
color: var(--c-text-soft);
}
/* In the order overlay the note always shares the price's line (Zlatan,
2026-09-27). In the floating bar too — except on a narrow phone, where the
bar gives the price about 115px and one line would squeeze the button.
539/540: the product-card boundary, a special case listed in tokens.css. */
.floating-cta__price .price-note {
font-size: var(--fs-xs);
white-space: nowrap;
/* "Free / shipping" on two lines squeezed the price */
color: var(--c-white-75);
}
/* The bar on a narrow phone, in one place: the price aligns left on a 2rem
line (Zlatan, 2026-09-27) and "Free shipping" drops beneath it. */
@media (max-width: 539px) {
.floating-cta__price {
text-align: left;
line-height: 2rem;
}
.floating-cta__price .price-note {
display: block;
line-height: 1.4;
/* its own, not the price's: no gap under it */
}
/* No room for the struck price here: it took a line of its own and
pushed "Order the book" onto two (measured at 375px, 2026-10-08). The
paid price stays; the comparison is on the page, twice. */
.floating-cta__price .price-was {
display: none;
}
}
.floating-cta.visible {
display: flex;
align-items: center;
}
/* THE TAB (Zlatan, 2026-09-21: the close button became an arrow). Collapsing
slides the whole bar right by its width less the tab's, so the tab alone
stays at the edge, and the arrow turns to point back in. Both are one
transform on existing boxes: nothing re-lays out and nothing is removed,
so the bar comes back exactly as it left. --cta-tab is the tab's width,
shared by the tab and the slide so the two can never disagree. */
.floating-cta[data-cta-state="collapsed"] {
transform: translateX(calc(100% - var(--cta-tab)));
}
.floating-cta__toggle {
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
flex: 0 0 var(--cta-tab);
margin: calc(-1 * var(--space-4)) var(--space-4) calc(-1 * var(--space-4)) 0;
padding: 0;
border: 0;
border-right: 1px solid hsla(0, 0%, 100%, .15);
background: transparent;
cursor: pointer;
opacity: .75;
transition: opacity var(--transition);
}
.floating-cta__toggle:hover,
.floating-cta__toggle:focus-visible {
opacity: 1;
}
.floating-cta .floating-cta__toggle img {
height: 1.75rem;
width: auto;
margin: 0;
transition: transform .35s ease;
}
.floating-cta[data-cta-state="collapsed"] .floating-cta__toggle img {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.floating-cta,
.floating-cta .floating-cta__toggle img {
transition: none;
}
}
.floating-cta .close-button {
position: absolute;
top: .5rem;
right: .75rem;
opacity: .6;
cursor: pointer;
border: 1px solid white;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-image: url('../img/icons/close-white.svg');
background-position: center center;
background-size: 1rem;
}
.floating-cta .close-button:hover {
opacity: 1;
}
.floating-cta .button {
margin: 0;
}
@media (max-width: 600px) {
/* .floating-cta {
||*| right: 0 |*||
/* left: 0 */
/* bottom: 1rem */
/* min-width: 0 */
/* border-radius: 0 */
}
/* ==========================================================================
Section framing — _section_kicker, _arrow_divider, _curve_divider
========================================================================== */
.section-label {
font-weight: var(--fw-bold);
color: var(--c-orange);
margin-bottom: var(--space-6);
font-family: var(--font-body);
}
.section-label span {
border-bottom: 1px dotted var(--c-orange-50);
padding-bottom: .15rem;
letter-spacing: 2px;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.section-arrow {
display: block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid var(--c-text);
margin-left: auto;
margin-right: auto;
}
.section-arrow.dark {
border-top-color: #010506;
}
.section-arrow.orange {
border-top-color: var(--c-orange);
}
/* Was .yellow until 2026-10-08 (Zlatan): the colour is --c-cream, and the
name now says so. */
.section-arrow.cream {
border-top-color: var(--c-cream);
}
.section-arrow.tan {
border-top-color: var(--c-tan);
}
.section-arrow.white {
border-top-color: var(--c-white);
}
.section-arrow.grey {
border-top-color: var(--c-tan);
}
/* .section-arrow.star removed 2026-08-03 — --c-blue-star merged into --c-blue-950,
which made .star an exact duplicate of .dark. Use .dark. */
.section-arrow.blue950 {
border-top-color: var(--c-blue-950);
}
.section-arrow.blue900 {
border-top-color: var(--c-blue-900);
}
.section-arrow.blue800 {
border-top-color: var(--c-blue-800);
}
.section-arrow.blue850 {
border-top-color: var(--c-blue-850);
}
.section-arrow.blue700 {
border-top-color: var(--c-blue-700);
}
.section-arrow.blue500 {
border-top-color: var(--c-blue-500);
}
.curve-divider,
.curve-divider img {
width: 100%;
min-width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
/* ==========================================================================
Content sections
========================================================================== */
/* _hero, _scroll_cue
THE HERO PHOTOGRAPH IS AN , NOT A BACKGROUND. Decided 2026-08-04,
reasoning in docs/05-decisions.md.
It is the Largest Contentful Paint element on every page, and a CSS
background is invisible to the browser's preload scanner — it cannot begin
downloading until the stylesheet has been fetched, parsed and the selector
matched. An in the markup starts immediately, accepts `srcset`, and
lets each page supply its own photograph without anyone editing CSS.
The image is absolutely positioned, so it is out of flow and the section's
height still comes from its contents exactly as it did as a background. */
.product-intro {
position: relative;
min-height: 400px;
background-color: var(--c-blue-950);
/* border-bottom: var(--border-blue-7) */
}
/* is only a wrapper for the art-directed sources and must not
generate a box of its own — its own content is out of flow, but an inline
box with nothing in it still forces a line box on the parent, which would
add a few stray pixels to the hero's height. */
.product-intro picture {
display: contents;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* The crop anchor switches at the SAME breakpoint as the art itself, or
the two fight each other.
Anchored right — correct on desktop, where it keeps the woman in
frame — a narrow slot would discard the book entirely and leave a face
with no product in it.
35% is measured, not eyeballed. The mobile file is 698x964 (portrait,
recomposed 2026-08-05 — it was 1000x929 and lost 63% of its width to
the crop; now it loses 45%). At a 375-wide slot the visible window is
source x 109-495, which keeps the printed name (~90-280) intact and
still reaches the smile. The name is the entire point of the product,
so it is the thing that must never be cropped out. */
object-position: right center;
}
@media (min-width: 900px) {
.hero-bg {
object-position: right center;
}
}
/* The homepage hero breathes. Asked for 2026-09-12: gentle, slow.
ID-scoped, not a class: only the homepage wants it today. It becomes a
grouped selector the first time a second page does, and the ID stays.
A SLOW SCALE ON ONE IMAGE, not a slideshow through the sixteen product
heroes. Those are one photograph retouched per design, so cross-fading them
would read as the cover art glitching rather than as a gallery, and the
desktop files together weigh 3.9 MB behind the element this page is fastest
on. The range of covers is already shown by the grid further down the page,
where it costs nothing. Motion here costs no extra bytes at all.
Always scaling UP, never below 1: at scale(1) the image exactly fills its
box, so anything smaller would open a gap at the edges.
12% over 20 seconds. CHANGED 2026-09-16 from 6% over 32s, which was
measured running and reported by Zlatan as "no animation": three seconds in,
the image had moved about a tenth of a percent, so in practice it never
visibly moved. At this rate it reads as a slow push-in within a few seconds
and still never as motion competing with the headline. `alternate` breathes
back out instead of snapping to the start. No fill keyword: an infinite
alternate animation has no end state to pin, and a filled one would outrank
later declarations in the cascade. */
#home-hero .hero-bg {
/* The origin MATCHES the crop anchor above at both widths. Scaling holds
the origin still and pushes everything else outward, so putting it
anywhere else would slowly walk the printed name out of frame — the one
thing the crop comment says must never happen. */
transform-origin: 35% center;
animation: hero-drift 20s ease-in-out infinite alternate;
}
@media (min-width: 900px) {
#home-hero .hero-bg {
transform-origin: right center;
}
}
@keyframes hero-drift {
from {
transform: scale(1);
}
to {
transform: scale(1.12);
}
}
@media (prefers-reduced-motion: reduce) {
#home-hero .hero-bg {
animation: none;
}
}
/* The scaled image has to be contained, and `.product-intro` cannot do it:
it is the containing block for the header, whose mobile drawer sits above
everything at z-index 100, and a clip there would cut the drawer off.
So the becomes the clipping box instead. It drops `display:
contents` for this page only and takes the same `inset: 0` frame the image
had. Out of flow, so it still generates no line box of its own, which is the
whole reason `display: contents` was there. `clip`, not `hidden`, per the
note on `.hero-content`. */
#home-hero picture {
display: block;
position: absolute;
inset: 0;
z-index: 0;
overflow: clip;
}
/* Its own crop anchor, for free-chart.html's chart photograph. Added
2026-09-06.
That file (astro-home-visual-background.jpg, 1500x856) is composed the
opposite way round to the product heroes: the zodiac wheel sits between
about 55% and 95% of the width, with empty sky to the left. .hero-bg's
measured 35% is right for the product photograph, where the crop has to
keep a printed NAME in frame; here it would show a phone screen of empty
blue. 72% puts the wheel in the middle of a portrait window and still
keeps the light burst that gives the image its centre.
Both breakpoints are restated rather than relying on the rule above:
this class is later in the file, so without its own desktop rule it would
win at every width and the desktop crop would be lost. */
.hero-bg--chart {
object-position: 72% center;
}
@media (min-width: 900px) {
.hero-bg--chart {
object-position: right center;
}
}
/* The scrim is its own layer now, and that is what removes the duplication:
the mobile and desktop gradients differ only in their second stop, yet each
previously had to restate the image URL alongside it. */
.hero-scrim {
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, .4));
pointer-events: none;
}
@media (min-width: 900px) {
.hero-scrim {
background-image: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
}
}
@media (min-width:1052px) {
.hero-scrim {
background-image: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}
}
#shop-hero .hero-scrim {
background-image: linear-gradient(to right, rgba(0, 0, 0, .0), rgba(0, 0, 0, 0));
}
/* Positioned elements paint above non-positioned ones REGARDLESS of source
order, so everything meant to sit on the photograph has to be positioned
too. Without this the header and the copy render behind it even though
they come later in the markup. */
.product-intro > .site-header,
.product-intro > .hero-content,
.product-intro > .text-center {
position: relative;
z-index: 2;
}
/* THE HEADER OUTRANKS THE HERO COPY. Fixed 2026-09-08 — Zlatan found the
mobile menu opening *behind* the hero text.
The three rules above gave the header and .hero-content the same z-index, so
painting order fell to source order and the copy — which comes later — won.
The open drawer's own `z-index: 100` could not save it: that number is
resolved INSIDE the header's stacking context, and a child can never escape
its parent's place in the stack. So the whole drawer, background included,
was painted over.
3 rather than a large number: it only has to beat 2, and the hero's layers
(image 0, scrim 1, content 2) are a deliberately short ladder. */
.product-intro > .site-header {
z-index: 3;
}
.hero-content {
/* color: var(--c-white-soft) */
text-shadow: var(--shadow-text);
text-align: center;
padding-top: var(--space-20);
/* Contains the .hero-cta entrance. At 375px the button rests only 18px
clear of the viewport edge, so a 2.5rem slide-in pushes it 22px past it
and the body picks up a horizontal scrollbar for the ~0.7s the delay and
animation last. Measured, not theoretical.
`clip`, NOT `hidden`. `overflow-x: hidden` forces the other axis to
compute as `auto`, which would turn the hero copy into a vertical scroll
container; `clip` leaves overflow-y genuinely visible. It also creates no
scroll container at all, so nothing can be scrolled into that dead space
programmatically or by a stray focus. */
overflow-x: clip;
}
#chapter-hero .hero-content {
padding-bottom: var(--space-16);
}
@media (min-width: 900px) {
.hero-content {
text-align: left;
padding-left: var(--space-6);
padding-right: 38%;
}
}
@media (min-width:1052px) {
.hero-content {
padding-right: 400px;
}
}
@media (min-width:1148px) {
.hero-content {
padding-right: 32%;
}
}
@media (min-width:1200px) {
.hero-content {
padding-right: 380px;
}
}
.hero-heading {
font-size: var(--fs-5xl);
font-family: var(--font-heading-fat);
line-height: var(--lh-snug);
color: var(--c-white-85);
letter-spacing: -1px;
}
.hero-text {
font-size: var(--fs-lg);
/* margin-bottom: var(--space-4) */
font-weight: var(--fw-light);
letter-spacing: 1px;
}
/* 3.5rem is a desktop size. At 375px it put the headline on four lines at 81px
each — 325px of heading, which is most of a phone screen spent before
anything is said. Dropped a step and tightened; the copy is unchanged and
is Phase 2's to shorten if it still wants to. */
@media (max-width: 767px) {
.hero-heading {
font-size: var(--fs-4xxl);
line-height: var(--lh-tight);
}
.hero-text {
font-size: var(--fs-md);
letter-spacing: 0;
}
}
/* _hero_commerce — the one piece of hard sell this page is allowed.
Added 2026-08-06.
Rating and price, so nobody has to wonder what this costs or whether it is
trusted, and a single CTA that scrolls into the story rather than jumping to
the form. This is a considered, 100% personalised purchase: an impulse buy
on it comes back as a refund and a bad review, so the first screen is
deliberately not a checkout.
Everything here sits on the hero photograph, so anything inheriting a
dark-on-light colour from the buy blocks further down has to be restated. */
.hero-commerce {
margin-top: var(--space-6);
/* The hero's bottom breathing room used to come from the scroll cue's
wrapper. That went with the cue, and the CTA ended up flush against the
bottom edge of the photograph.
Padding rather than margin, deliberately: .hero-content has no bottom
padding of its own, so a bottom margin here collapses straight out
through the section and buys nothing. Padding cannot collapse. It also
keeps the fix on the one element that only exists on this page, so
blocks/hero.html — which still has the cue — is untouched. */
padding-bottom: var(--space-16);
}
.hero-rating {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.hero-rating .star-rating {
margin-bottom: 0;
}
.hero-commerce .rating-score {
color: var(--c-white-soft);
font-weight: var(--fw-bold);
}
.hero-commerce .rating-count {
color: var(--c-white-soft);
font-size: var(--fs-sm);
text-decoration: underline;
}
.hero-buy {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-4);
}
.hero-price {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
/* --c-text-soft is a 70% slate — correct on the cream price box further down,
invisible here. */
.hero-commerce .price-text.strike-price {
color: var(--c-white-75);
}
/* Slides in from the right a beat after load, 2026-08-06 (Zlatan). It replaced
the scroll cue, which had its own entrance, so the hero keeps one moment of
movement rather than losing it — and the delay means the CTA arrives after
the headline has been read rather than competing with it.
`backwards`, NOT `forwards` or `both` — the same trap documented on
.scroll-cue above. A filled animation outranks normal declarations in the
cascade, so a forwards fill would go on pinning `transform` after the
animation ended and `.button`'s hover transform could never move it.
`backwards` fills only during the 0.25s delay, which is exactly what holds
the button off-screen-right until it is due; at rest the base rule applies,
and it matches what the keyframes end on.
The travel would overflow the viewport on a phone on its own — the button
rests only 18px clear of the edge at 375px. `.hero-content` carries an
`overflow-x: clip` for exactly this; see the note there. The clip is on the
copy container rather than `.product-intro`, because the hero section cannot
be clipped while blocks/hero.html relies on `.scroll-cue`'s -2.5rem
overhang below it. */
.hero-cta {
white-space: nowrap;
animation: hero-cta-enter .45s ease-out .25s backwards;
}
/* Held back while the hero photo is still loading — see initHeroCta. Removing
the attribute restores the animation above, which starts it afresh. */
.hero-cta[data-cta-wait] {
animation: none;
opacity: 0;
}
@keyframes hero-cta-enter {
from {
opacity: 0;
transform: translateX(2.5rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-cta {
animation: none;
}
}
@media (min-width: 900px) {
.hero-rating,
.hero-buy {
justify-content: flex-start;
}
}
.scroll-cue {
display: inline-block;
width: var(--space-20);
height: var(--space-20);
padding: var(--space-4);
border-radius: 50%;
/* was 100%, merged into 50% for circles, 2026-08-03 */
background-color: var(--c-text);
opacity: .65;
transition: opacity var(--transition);
transform: scale3d(.8, .8, .8);
margin-bottom: -2.5rem;
/* `backwards`, NOT `both`. A finished animation with a forwards fill keeps
holding its end state, and a filled animation outranks normal
declarations in the cascade — so the entrance was still pinning
`opacity` and `transform` after it ended and :hover could not move the
cue at all (only its background-colour, which the animation does not
touch, still responded). `backwards` fills only before the animation
starts; at rest the base rule below applies, which is the same value
the keyframes end on, so nothing changes visually. */
animation: scroll-cue-enter .8s ease-out backwards;
}
.scroll-cue:hover {
opacity: .85;
background-color: var(--c-green);
transform: scale3d(1, 1, 1) translateY(15px);
transition: all var(--transition);
}
/* Slides down from the top of the page into its resting position on load. */
@keyframes scroll-cue-enter {
from {
opacity: 0;
transform: translateY(-100vh) scale3d(.8, .8, .8);
}
to {
opacity: .65;
transform: translateY(0) scale3d(.8, .8, .8);
}
}
@media (prefers-reduced-motion: reduce) {
.scroll-cue {
animation: none;
}
}
.scroll-cue img {
width: 100%;
}
/* _book_ribbon */
.intro-ribbon {
background-color: var(--c-blue-900);
font-family: var(--font-heading);
color: var(--c-white-soft);
padding: 3.5rem 1.5rem 4rem;
border-top: 5px solid var(--c-orange);
text-shadow: var(--shadow-text);
text-align: center;
background-repeat: no-repeat;
background-size: 150%;
background-image: url('../img/chart-drawing-blue900-transparent-1500.webp'), linear-gradient(var(--c-blue-900), var(--c-blue-800));
}
.intro-ribbon span {
font-weight: var(--fw-regular);
}
.small-heading {
font-weight: var(--fw-regular);
letter-spacing: 1px;
font-size: var(--fs-4xl);
line-height: var(--lh-loose);
}
/* Same reasoning as .product-heading below — the family and size were coming
from the `h1` base rule, so demoting the tag changed the design. The
tracking and weight below were always this block's own; only the two
inherited properties are new. */
.white-heading {
color: var(--c-white-85);
font-family: var(--font-heading);
font-size: var(--fs-4xxl);
line-height: var(--lh-tight);
letter-spacing: 0;
font-weight: var(--fw-semibold);
}
.cover-ribbon {
background-color: var(--c-orange);
padding: 0 var(--space-6);
min-height: var(--space-12);
width: fit-content;
font-family: var(--font-body);
letter-spacing: 1px;
text-align: center;
white-space: nowrap;
clip-path: polygon(100% 0%, calc(100% - .75rem) 50%, 100% 100%, 0 100%, .75rem 50%, 0 0);
color: var(--c-cream);
background-image: var(--c-orange-gradient-400);
min-width: 270px;
margin: var(--space-8) auto 0;
transform: skew(-2deg, -2deg);
/* The pack had `box-shadow: 0 0 40px 132px #ff2e2e` here. Dropped
2026-08-03: clip-path clips box-shadow, so that red glow never
rendered on the live page — it was dead styling, not a colour choice. */
padding-top: var(--space-1);
padding-bottom: var(--space-1);
}
.cover-ribbon div {
padding: 0;
margin: 0;
line-height: 1;
}
.ribbon-label {
color: var(--c-blue-850);
font-weight: var(--fw-regular);
letter-spacing: 1px;
font-size: var(--fs-xs);
padding-top: .45rem;
}
.ribbon-title {
font-weight: var(--fw-semibold);
font-size: var(--fs-2xl);
padding: .35rem 0 .45rem;
text-shadow: var(--shadow-text);
}
/* _product_intro layout + _price_cta */
/* ==========================================================================
_product_head — the opening block of a catalogue product page
Added 2026-08-06, from the product-page evaluation.
Replaces _hero + _book_ribbon + _product_intro on product.html. Those three
rule sets above are deliberately NOT deleted: blocks/hero.html and
blocks/book-ribbon.html still demonstrate them, and product-original.html
is the kept before-state.
The whole point of this block is the 375px fold. Zlatan confirmed
2026-08-06 that the page is reached by clicking a product in a catalogue,
so everything the click has to be paid off with — the photographs, the
product name, the rating, the price and a way to buy — belongs above it.
The vertical budget is therefore designed rather than incidental.
========================================================================== */
.product-head {
background-color: var(--c-cream);
background-image: var(--c-white-gradient-cream);
padding-bottom: var(--space-12);
}
/* --c-header is semi-transparent by design and expects something dark behind
it. The old hero handed it a photograph; this head is light, so the bar has
to state a colour of its own. */
.product-head > .site-header {
background-color: var(--c-blue-900);
}
.product-head > .site-header:hover {
background-color: var(--c-blue-850);
}
#head-cols.row {
align-items: flex-start;
gap: 4%;
padding-top: var(--space-6);
}
/* Native 1:1 — the masters are square and this shows them uncropped. Only the
phone crops, and only because the fold there is worth more than the corners
of the frame (see the max-width rule below). */
#head-col-gallery .image-slider .slide img {
display: block;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.product-title {
font-family: var(--font-heading);
font-size: var(--fs-4xl);
line-height: var(--lh-tight);
color: var(--c-blue-900);
margin-bottom: var(--space-2);
}
.product-lede {
font-size: var(--fs-md);
font-weight: var(--fw-light);
line-height: var(--lh-snug);
margin-bottom: var(--space-4);
}
.product-rating {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
/* .star-rating stacks above the review text in a testimonial card and carries
a bottom margin for it. Here it is one item on a single line. */
.product-rating .star-rating {
margin-bottom: 0;
}
.rating-score {
font-weight: var(--fw-bold);
color: var(--c-blue-900);
}
.rating-count {
font-size: var(--fs-sm);
text-decoration: underline;
}
/* Project Bible 1a, the product truth: "You choose the design. The sign is
already yours." Set apart from the lede because it is not a description. */
.cover-promise {
margin-bottom: var(--space-6);
padding-left: var(--space-3);
border-left: 3px solid var(--c-orange);
font-family: var(--font-heading);
font-size: var(--fs-md);
line-height: var(--lh-snug);
color: var(--c-blue-900);
}
.buy-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
}
.buy-price {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
/* .cart-button carries 1.5rem of its own vertical margin for the places it
sits alone in a .button-row. Inside the buy row the flex gap already does
that job, and the margin would only push the CTA toward the fold. */
.buy-row .cart-button {
margin: 0;
}
.head-assurances,
.head-specs,
.author-facts {
padding-left: 0;
list-style: none;
}
.head-assurances {
margin: var(--space-6) 0 0;
}
.head-specs {
margin: var(--space-4) 0 0;
}
/* Same star bullet as .order-features used, kept as its own selector rather
than sharing one: that rule is scoped to .order-features, which is part of
the block this head replaced. */
.head-specs .feature-item,
.author-facts .feature-item,
.reading-detail .feature-item,
.chapter-body .feature-item {
position: relative;
margin-bottom: var(--space-3);
padding-left: var(--space-8);
background-image: url('../img/icons/astro-star-bullet.svg');
background-repeat: no-repeat;
background-size: 1.25rem;
background-position: .25rem top;
font-weight: var(--fw-light);
line-height: var(--lh-snug);
}
/* THE CONSTRAINT THESE NUMBERS WERE MEASURED AGAINST IS GONE. The cookie
consent banner was removed 2026-09-06; the fold at 375x812 is now the full
812px, not the 673px a 139px fixed banner left.
What was written here: the block was built around that 673px fold, the CTA
ended at 642px with the banner up, and every value below was reduced to buy
that clearance. They are kept unchanged — the block reads fine with more room
and this is _product_head, which only product-v01.html still uses — but they
are no longer forced, and anyone tuning them should know the pressure is off
rather than re-deriving a limit that no longer exists. Klaro (2026-10-08)
does not bring it back: its notice floats over the page and is gone after
one answer, so nothing is tuned around it. */
@media (max-width: 767px) {
#head-cols.row {
padding-top: var(--space-2);
}
/* 3:2 rather than 4:3. The masters are square and the book is centred in
every frame, so the deeper crop still costs only empty ground — and it
is what paid for the CTA clearing the cookie banner, back when there
was one. See the note above. */
#head-col-gallery .image-slider .slide img {
aspect-ratio: 3 / 2;
}
.product-title {
font-size: var(--fs-3xl);
}
.product-lede,
.product-rating {
margin-bottom: var(--space-3);
}
.cover-promise {
margin-bottom: var(--space-4);
}
.buy-row {
gap: var(--space-3);
}
/* Full width on a phone: it is the one thing on the screen that has to be
hit, and a price sitting beside it would halve the target. */
.buy-row .cart-button {
flex: 1 1 100%;
}
}
/* ==========================================================================
_showcase_photo — the photograph that used to be the hero
Added 2026-08-06.
Full bleed behind a headline is what made it read as decoration. Here it
illustrates the gift argument instead, framed like every other photograph
on the page. The art direction it had as a hero is kept: two files, and the
crop anchor switches at the same breakpoint as the art.
========================================================================== */
.showcase-photo {
margin-bottom: var(--space-8);
}
/* aspect-ratio rather than width/height attributes, because serves
a portrait file to phones and a landscape one to desktops — one pair of
attributes cannot describe both, and the wrong ratio is worse than none.
4:5 on phones, and the ratio is measured rather than chosen for looks. The
mobile file is 698x964 and carries two things that must survive the crop:
her eyes, which start around y=150, and the name printed on the cover at
y=790-840. A 4:3 box crops to y=220-744 and loses both ends — the reason
the earlier pass showed a face cut off at the eyebrows. 4:5 crops to
y=46-918 and keeps the whole of it.
It costs 176px of page height, which is the most expensive single thing on
this page and still worth it: this is the only photograph of a person, and
it shows a real name printed on a real cover. That is proof, not styling. */
.showcase-photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
/* Same breakpoint as the art itself, or the crop and the file fight. */
@media (min-width: 900px) {
.showcase-photo img {
aspect-ratio: 16 / 9;
object-position: right center;
}
}
/* ==========================================================================
_author_block — Marsa
Added 2026-08-06. Project Bible 2 and 8: a publisher's author page, in
first person, with a photo — not a testimonial.
Sits on the cream-first gradient so it joins onto #book-reading's cream end
and hands #book-reviews a white top. See --c-white-gradient-cream-rev.
========================================================================== */
.author-section {
/* background-color: var(--c-cream) */
/* background-image: var(--c-blue-gradient-950) */
/* color: var(--c-white-soft) */
padding-top: 0;
/* padding-bottom: var(--space-14) */
/* background-image: var(--c-white-gradient-cream-rev) */
/* padding-top: var(--space-12) */
}
/* ---- .author-section--deep — Marsa on blue ----
Added 2026-09-08 with the colour pass (Zlatan: "use more blue backgrounds,
blue-light-blue-light").
The homepage ran three light sections back to back — reading intro, Marsa,
covers — and the middle one is the natural place to break, because it is the
only one of the three that is about a person rather than a product. A
portrait on deep blue also simply looks better than a portrait on cream.
--c-blue-gradient-700 rather than the -900 the other blue bands use, and
that is the point of the pass: the page should not be one blue repeated.
The deep blues bracket the page (hero at the top, the starfield form at the
bottom) and the mid-page bands sit lighter, so scrolling reads as an arc
rather than as stripes.
The orange star bullets on .author-facts already work on either ground, so
only the text colour has to be restated. */
.author-section--deep {
/* border-bottom: var(--border-blue-7) */
}
/* --shadow-soft is black, and a black shadow on deep blue is invisible — the
portrait loses its edge and reads as a hole. A hairline in the next blue up
gives it back. */
.author-section--deep .author-portrait img {
/* border: 1px solid var(--c-blue-500) */
box-shadow: var(--shadow-raised);
}
.author-row {
align-items: flex-start;
gap: 4%;
text-shadow: var(--shadow-text);
}
.author-portrait img {
display: block;
width: 100%;
max-width: 90%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
/* Above 768, the portrait matches the planet image in .reading-intro exactly.
Zlatan, 2026-09-16.
Two things kept them apart, and only one was visible. The 90% cap made the
photo narrower. But the columns themselves were wider too: `.author-row
{ gap: 4% }` has never applied, because `.row { gap: 0 }` has the same
weight and comes later in this file — so the portrait row laid out with no
gap and each column grew to 50%. Doubling the class wins that without
moving either rule, and the row now uses the reading block's own grid:
48% + 4% + 48%, so the two images are equal by construction, not by a
number typed to match. Below 768 is untouched.
The photo is 371px wide and now shows at up to 440, so it is enlarged and
will look soft on sharp screens. A Marsa photograph of at least 900px is
already an open roadmap item. */
@media (min-width: 768px) {
.row.author-row {
column-gap: 4%;
}
.author-portrait img {
max-width: 100%;
}
}
.author-body p {
line-height: var(--lh-relaxed);
}
.author-facts {
margin-top: var(--space-6);
}
@media (max-width: 767px) {
.author-portrait {
margin-bottom: var(--space-12);
}
.author-portrait img {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: flex-start;
gap: 0;
flex-grow: 1;
}
.col-48 {
flex: 1 1 auto;
width: 48%;
}
.col-52 {
width: 52%;
}
.col-4 {
width: 50%;
}
@media (min-width: 768px) {
.col-4 {
width: 25%;
}
}
@media (max-width: 767px) {
.col-48,
.col-52 {
width: 100%;
}
}
#naroci-cols.row {
align-items: center;
gap: 4%;
}
@media (max-width:899px) {
#naroci-cols.row {
align-items: flex-start;
}
}
#naroci-cols2.row {
justify-content: space-between;
align-items: flex-end;
}
@media (max-width: 767px) {
/* Stacked: constrain the column so long lines don't run the full width,
and centre the whole block. */
#naroci-cols.row {
width: 100%;
max-width: 550px;
margin-left: auto;
margin-right: auto;
column-gap: 0;
}
/* Once stacked, the bullets sit directly under the slider and need
breathing room that the 4% column gap was providing on wide screens. */
#naroci-cols .order-features {
margin-top: var(--space-12);
}
}
/* _image_slider — auto-advancing, pauses on hover. Driven by js/blocks.js. */
.image-slider {
position: relative;
overflow: hidden;
/* border-radius: var(--radius-lg) */
background-color: var(--c-cream);
}
/* Every slide sits in the SAME grid cell and moves by its own transform, so
the one on screen is always at translateX(0). Fixed 2026-09-16 (Zlatan saw
photos 3 onward sitting 1px off). The old version slid one long flex track
by -200%, -300%...: the column is a fractional width (439.68px at desktop),
the browser snaps each slide to a whole pixel on its own, and those
rounding errors pile up along the track — from the third photo they no
longer cancel. A slide that is never moved off its cell has nothing to
round. */
.image-slider .slider-track {
display: grid;
grid-template-columns: 100%;
}
.image-slider .slide {
grid-area: 1 / 1;
transition: transform .5s ease;
}
/* Before the script runs, everything but the first photo waits off to the
right — otherwise the LAST slide, painted on top, would be the one shown. */
.image-slider .slide + .slide {
transform: translateX(100%);
}
.image-slider .slide img {
width: 100%;
}
/* The demo film is 16:9 and the slider is square. `cover` keeps the book,
which is centred in frame, and loses the edges — the same crop the photos
take on a phone. Added 2026-09-17. */
.image-slider .slide video {
display: block;
width: 100%;
/* The markup's height="720" is a presentational height, and an explicit
height beats aspect-ratio. */
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.order-features ul.feature-list li {
position: relative;
margin-bottom: var(--space-3);
padding-left: var(--space-8);
background-image: url('../img/icons/astro-star-bullet.png');
background-repeat: no-repeat;
background-size: 1.05rem;
background-position: .15rem .2rem;
}
ul.feature-list li.selected-cover {
font-size: var(--fs-3xl);
padding: var(--space-2) 0;
border: 1px solid var(--c-orange);
border-left: 0;
border-right: 0;
background: none;
padding-left: 0;
line-height: 1;
margin-bottom: var(--space-6);
}
ul.feature-list li.selected-cover span {
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--c-orange);
}
.price-box {
display: flex;
justify-content: center;
align-items: stretch;
border-radius: var(--radius);
background-color: var(--c-cream);
flex-wrap: wrap;
margin-top: var(--space-6);
width: fit-content;
padding: var(--space-2) var(--space-4);
background-image: var(--c-white-gradient-cream);
text-shadow: none;
/* flex-shrink: 1 */
}
.price-box.landing {
flex-wrap: nowrap;
}
#chart-to-book .price-box {
margin-bottom: var(--space-6);
}
#covers-section .price-box,
#chart-covers .price-box {
margin: var(--space-8) auto var(--space-12);
}
/* Must come after the base rule above, or its margin-top wins. `width:
fit-content` means auto side margins are what keep this centred once the
row stops being a two-column layout. */
@media (max-width: 767px) {
.price-box,
#chart-to-book .price-box {
margin: var(--space-8) auto;
}
}
.price-list.feature-list {
margin: 0;
padding-left: 0;
}
.feature-item.price-list {
/* margin-top: var(--space-2) */
margin-bottom: 0;
padding-left: 47px;
padding-top: var(--space-2);
padding-bottom: var(--space-2);
background-image: url(../img/checked-b.png);
background-position: 0 50%;
background-size: 36px;
background-repeat: no-repeat;
line-height: var(--lh-snug);
font-weight: var(--fw-light);
color: var(--c-blue-900);
text-align: left;
}
.flex-column.price-amount {
flex: 1 1 auto;
align-items: baseline;
margin-left: var(--space-2);
padding: var(--space-3) 0 0 var(--space-4);
border-left: 1px solid var(--c-tan);
justify-content: flex-start;
text-align: left;
position: relative;
}
.price-text {
color: var(--c-orange-red);
font-size: var(--fs-3xl);
font-weight: var(--fw-bold);
/* text-shadow: 1px 1px 1px #999 */
}
/* A PRICE ON A LIGHT GROUND IS DARK BLUE (Zlatan, 2026-09-24). The orange
stays wherever a price sits on dark blue — it measures 5.6:1 there and is
the accent it is meant to be. On the cream card it measured 2.6:1, under
the 3:1 minimum for large bold text, and a price is the one number on the
page somebody checks. Scoped rather than set on .price-text itself, which
lives on both grounds: the panels are cream, the product hero is not. */
.chart-confirm__product .price-text {
color: var(--c-blue-900);
}
.price-text.strike-price {
font-size: var(--fs-2xl);
font-weight: var(--fw-light);
color: var(--c-text-soft);
position: relative;
/* text-decoration: line-through */
text-shadow: none;
display: inline-block;
line-height: 1rem;
margin-bottom: var(--space-2);
margin-top: -0.5rem;
}
.price-text.strike-price::after {
content: "";
position: absolute;
left: -7%;
right: -10%;
top: 55%;
/* border-top: 1px solid currentColor; */
border-top: 2px solid var(--c-blue-950-80);
transform: rotate(-7deg);
transform-origin: center;
pointer-events: none;
}
/* Section backgrounds — these were inline styles on the block demo pages;
promoted to real rules here so page compositions can just use the id/class. */
#book-intro {
/* background-color: var(--c-white) */
/* background-image: var(--c-white-gradient-cream) */
}
.reviews-section {
/* background-color: var(--c-blue-900) */
/* background-image: var(--c-blue-gradient-950) */
text-align: center;
padding-bottom: var(--space-12);
/* color: var(--c-white-soft) */
}
#products-section,
.cover-gallery {
/* background-color: var(--c-blue-900) */
/* color: var(--c-white-soft) */
text-shadow: var(--shadow-text);
/* background-image: url('../img/bgr/space-galaxy.webp') */
/* background-repeat: no-repeat */
/* background-position: center center */
/* background-size: cover */
/* background-attachment: fixed */
/* background-image: var(--c-blue-gradient-950) */
/* background-color: var(--c-cream) */
/* background-image: var(--c-white-gradient-cream) */
}
.cover-gallery {
padding-bottom: var(--space-16);
}
/* The book's price, once, in the book section's own copy. Added 2026-09-16.
Zlatan noticed the homepage did not read as though anything was for sale.
Not on the cover cards: every cover is the same price and the heading beneath
says so, so nine cards repeating one number would contradict it.
The amount is its own element because in Rails it comes from the product
record. The quiet note beside it ("with the PDF included") went on
2026-09-17: on this site the PDF is not included with the book. The flex
wrapper stays, so a second element can sit beside the amount again.
Also used by free-chart.html's book section. */
.book-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: var(--space-1) var(--space-3);
margin: var(--space-6) 0 0;
}
.book-price__amount {
font-family: var(--font-heading-fat);
font-size: var(--fs-4xl);
line-height: 1;
/* Dark blue: this price always sits on the cream offer card. See
.chart-confirm__product .price-text above. */
color: var(--c-blue-900);
display: block;
min-width: 75px;
}
@media (max-width:409px) {
.book-price__amount {
font-size: var(--fs-3xl);
}
}
.price-box sup {
font-size: var(--fs-md);
}
/* Left-aligned variant for a text column (free-chart.html), where a centred
price would float away from the paragraph above it. */
.book-price--start {
justify-content: flex-start;
margin: var(--space-4) 0 var(--space-4);
}
/* Section header sitting on the magic-hands starfield. Not a named block in
02b-block-inventory.md — it is _section_kicker over a full-bleed image.
Worth naming if it turns up on a second page. */
/* `contain` reverses the 2026-08-04 switch to `cover`: the photo now shows
whole, and --c-blue-star fills whatever the image does not reach — which
is the reason that token exists and had to come back.
The text sits directly on the photograph, so it carries the shadow token
rather than relying on the image staying dark behind it. */
.astro-star-header {
min-height: 200px;
padding: 65vw 0 var(--space-16);
background-color: var(--c-blue-star);
background-image: url(../img/magic-hands-star-n.webp);
border-top: var(--border-orange-5);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
font-family: var(--font-heading);
color: var(--c-white-soft);
text-shadow: var(--shadow-text);
text-align: center;
}
.intro-container {
/* max-width: 720px */
/* margin: 0 auto */
}
/* _book_carousel intro row */
#products-intro {
text-align: center;
display: flex;
flex-wrap: wrap;
margin-bottom: var(--space-8);
justify-content: center;
}
/* Was `#products-intro h1`. The catalogue heading is an h2 now that the page
has a single h1, and a tag-scoped rule silently stops applying when the tag
changes — this one carried the heading's 3rem size and its spacing. Matched
to the markup 2026-08-06 rather than left to fail quietly. */
#products-intro h2 {
margin-bottom: var(--space-8);
font-family: var(--font-heading);
font-weight: var(--fw-bold);
letter-spacing: -1px;
font-size: 3rem;
}
@media (min-width: 900px) {
#products-intro {
text-align: left;
margin-bottom: var(--space-12);
flex-wrap: nowrap;
align-items: flex-end;
gap: var(--space-8);
}
#products-intro h2 {
margin-bottom: 0;
}
}
/* _feature_grid */
/* .proof-grid added 2026-09-06 with home.html: this is #book-proof-box turned
into a class, and nothing about the treatment was ever page-specific — it
was written as an ID only because product.html was the only page that
existed. The ID stays so product.html is untouched by the homepage build;
it adopts the class in the batch that translates it. */
#book-proof-box,
.proof-grid {
/* color: var(--c-white-soft) */
/* padding-top: var(--space-12) */
padding-bottom: var(--space-12);
text-shadow: var(--shadow-text);
}
/* The same grid on the light ground, added 2026-09-06 for free-chart.html.
That page is short and its dark moment is the form; a second blue band
above it would leave the page with no contrast at all. The orange feature
icons were always readable on both grounds — only the text colour and the
background change. */
.proof-grid--light {
color: var(--c-text);
background-color: var(--c-cream);
background-image: var(--c-white-gradient-cream);
padding-bottom: var(--space-12);
}
/* Colour comes from .astro-stars-bg, which this element always carries. */
.book-highlights {
text-align: center;
padding-bottom: var(--space-12);
}
.book-highlights .row {
padding: var(--space-8) 0;
row-gap: var(--space-8);
}
.book-highlights .col-4,
#book-proof-box .col-4,
.proof-grid .col-4 {
padding: var(--space-4);
}
/* Two mobile length-cuts lived here (proof-grid icons shrunk, planet drawing
capped). Reverted 2026-08-06 when product.html was restored: they were part
of the length pass, which is being reconsidered, and both are shared rules
that would have altered the restored page without anyone asking for it.
product-v01.html measures ~0.3 screens taller than reported because of it. */
.feature-icon {
display: inline-block;
width: var(--space-20);
height: var(--space-20);
margin: 0 auto;
border-radius: 50%;
background-color: var(--c-orange);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 3.5rem;
}
.feature-icon.quality {
background-image: url('../img/icons/i-quality.png');
}
.feature-icon.magic {
background-image: url('../img/icons/i-magic.png');
}
.feature-icon.delivery {
background-image: url('../img/icons/i-delivery.png');
}
.feature-icon.shield {
background-image: url('../img/icons/i-shield.png');
}
.feature-icon.unique {
background-image: url(../img/bullet-unique.webp);
}
.feature-icon.knjiga {
background-image: url(../img/bullet-book.webp);
}
.feature-icon.stars {
background-image: url('../img/icons/stars-white.svg');
}
.feature-icon.chart {
background-image: url('../img/icons/i-chart.svg');
}
.feature-icon.reading {
background-image: url(../img/bullet-razlaga.webp);
}
.feature-title {
margin: var(--space-4) 0 var(--space-3);
font-weight: var(--fw-bold);
font-size: var(--fs-lg);
}
#our-exact .feature-title {
color: var(--c-orange);
margin-bottom: var(--space-2);
}
.feature-caption {
margin-top: var(--space-4);
}
/* _two_col_row */
.reading-intro {
/* color: var(--c-white-soft) */
text-shadow: var(--shadow-text);
padding-bottom: var(--space-16);
padding-top: var(--space-16);
/* background-image: url('../img/bgr/space-planets.webp') */
/* background-repeat: no-repeat */
/* background-position: right center */
/* background-size: cover */
/* background-attachment: fixed */
/* background-color: var(--c-cream) */
/* background-image: var(--c-white-gradient-cream) */
/* The section closes on its own padding rather than on the CTA's bottom
margin. It used to end with the Marsa pull-quote, so that margin was
internal and harmless; with the quote moved to #marsa the CTA became
the last child and its margin collapsed straight out of the section,
showing 80px of white body between this and the block below. */
}
#chart-to-book.reading-intro {
padding-top: var(--space-16);
}
.reading-intro .row {
align-items: stretch;
column-gap: 4%;
row-gap: 3rem;
}
@media (max-width: 767px) {
.reading-intro {
text-align: center;
}
.reading-image {
/* margin-bottom: 2.5rem */
/* max-width: 500px */
margin-left: auto;
margin-right: auto;
/* margin-bottom: var(--space-12) */
}
}
/* Heading LOOK belongs to the class; heading LEVEL belongs to the document.
Filled in 2026-08-06, and it was an empty rule until then.
The two are very differently styled here — `h1` is bold Lora at --fs-5xl
with -1px tracking, `h2` is light Source Sans at --fs-4xl. So the base tag
was carrying the design, and the heading level could not be corrected for
SEO without redesigning the page. When this page went from 8 `h1`s to 1,
six section headings silently changed typeface, size and weight — serif to
sans, bold to light — while the change was being described as markup-only.
This class now states the look outright, so the tag is free to describe the
document and nothing else. Same values the `h1` base rule gives, so the
headings render exactly as they did before the demotion. */
.product-heading {
font-family: var(--font-heading);
font-size: var(--fs-4xxl);
font-weight: var(--fw-bold);
letter-spacing: 0px;
line-height: var(--lh-tight);
color: var(--c-white-85);
}
#shop-catalogue .intro-container .product-heading {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Same step-down .hero-heading got: 3rem on a phone put a long heading on five
lines, most of the screen before anything is said. One step smaller, and
still one step below the hero's phone size. Zlatan, 2026-10-08. */
@media (max-width: 767px) {
.product-heading {
font-size: var(--fs-4xl);
}
}
.reading-intro .col-48 img {
border-radius: 17px;
}
#chart-to-book.reading-intro .col-48 img {
border-radius: 0px;
}
@media (max-width: 767px) {
.reading-intro .col-48 img {
border-radius: var(--radius-lg);
}
}
/* _marsa_quote */
.quote-section {
background-image: url('../img/marsa-t.png');
background-repeat: no-repeat;
background-position: right bottom;
background-size: 33%;
padding-bottom: var(--space-12);
}
.quote-card {
position: relative;
min-height: 50px;
padding: var(--space-4);
border-radius: .75em;
background-color: var(--c-white-soft);
color: var(--c-blue-700);
box-shadow: var(--shadow-tight);
margin-right: 35%;
text-align: left;
}
.quote-text {
font-size: var(--fs-md);
font-family: var(--font-heading);
font-weight: var(--fw-thin);
font-style: italic;
}
.quote-signature {
font-size: var(--fs-xs);
color: var(--c-text);
margin-top: .75rem;
border-top: 1px dotted var(--c-blue-800);
padding-top: var(--space-2);
}
.quote-signature b {
color: var(--c-orange-200);
}
.quote-card:after {
content: '';
position: absolute;
right: 0;
top: 80%;
width: 0;
height: 0;
border: 1em solid transparent;
border-left-color: var(--c-white-soft);
border-right: 0;
border-bottom: 0;
margin-top: -.5em;
margin-right: -1em;
}
@media (min-width: 768px) {
.quote-section {
background-size: contain;
}
.quote-card {
margin-left: 5%;
}
.quote-card:after {
top: 70%;
}
}
@media (min-width: 868px) {
.quote-card {
margin-left: 10%;
margin-right: 30%;
}
.quote-card:after {
top: 60%;
}
}
/* Shared starfield section background — used by the 3D book section, the
highlights grid and the chart form section. */
/* The starfield owns its own text colour. Anything laid on it is on a dark
surface by definition, so the colour belongs here once rather than being
restated by every section that uses it.
The corollary: a LIGHT panel sitting inside a starfield section now has to
declare its own text colour, because it no longer gets the dark default by
inheritance — see `.confirm-card`. */
.astro-stars-bg,
.astro-stars-math,
.astro-stars-about {
background-color: var(--c-blue-900);
background-image: url('../img/bgr/space-galaxy.webp');
background-repeat: no-repeat;
background-size: cover;
/* background-attachment: fixed */
color: var(--c-white-soft);
background-position: center center;
}
/* The My astro pages' starfield (Zlatan, 2026-10-15): the same ground with
another picture, so it shares the rule above and swaps only the image. */
.astro-stars-math {
background-image: url('../img/bgr/space-math.webp');
}
.astro-stars-about {
background-image: url('../img/bgr/space-planets-show.webp');
}
@media (min-width:768px) {
.astro-stars-about {
background-image: url('../img/bgr/space-planets-show-w.webp');
}
}
/* _3d_book_viewer — section framing only. The book itself lives in
css/book3d.css and js/book3d.js (built 2026-08-04).
`.book-display` and `.viewer-controls` were removed with the static shell
they styled; the live block uses .book3d__stage and .book3d__controls. */
/* Colour comes from .astro-stars-bg, which this element always carries. */
.showcase-intro {
text-align: center;
/* border-top: var(--border-orange-5) */
position: relative;
background-color: var(--c-cream);
}
.book-viewer {
z-index: 10;
position: relative;
text-align: center;
/* The book's ground shadow is deliberately wider than the book — up to
1.28x a cover — so that it spreads past its own footprint. When the
book is sized by the 92vw term rather than by 80vh (any portrait or
narrow window), that spread runs past the right edge of the viewport
and gives the whole page a horizontal scrollbar.
Clipped here, at the full-bleed wrapper, because this is the only
ancestor as wide as the viewport: anything narrower would cut visible
shadow instead of just the part nobody can see. `clip` rather than
`hidden` so no scroll container is created — `hidden` would compute
overflow-y to `auto` and could trap the shadow in an inner scroller.
`hidden` stays first as the fallback for Safari below 16.
Safe for the 3D scene: a non-visible overflow forces `transform-style:
flat` only on the element carrying it, and this element is not part of
the preserve-3d chain, which starts below it at .book3d__book. */
/* overflow-x: hidden; */
overflow-x: clip;
padding-top: var(--space-8);
padding-bottom: var(--space-16);
}
/* _chart_picker */
ul.chart-list {
list-style: none;
padding: 0;
margin: 0 auto;
background: var(--c-orange);
text-align: center;
color: var(--c-text);
max-width: var(--max-form-width);
}
ul.chart-list li {
display: block;
position: relative;
width: 100%;
text-transform: uppercase;
}
ul.chart-list li ul {
position: absolute;
top: 100%;
left: 0;
display: block;
width: 100%;
z-index: 2;
max-height: 0;
opacity: 0;
overflow: hidden;
visibility: hidden;
transition: max-height var(--transition), opacity var(--transition), visibility 0s linear var(--transition);
}
/* A chart's name may run to 36 characters, and on this list the whole name
has to be read — the wrong one ends up printed on a cover. So an entry
wraps rather than being cut off (2026-10-01: "Štefan Aleksander
Bogosavljević" was clipped under the arrow on a phone). Was nowrap +
hidden. The sides are Zlatan's own (he set them back the same day). */
ul.chart-list li a {
display: block;
padding: var(--space-4);
padding-right: var(--space-8);
text-decoration: none;
color: var(--c-white-soft);
border-bottom: 1px solid var(--c-black-25);
}
ul.chart-list li:first-child > a {
border-top: 1px solid var(--c-black-25);
}
/* Opens on hover (mouse), on .open (click/tap, toggled by blocks.js) and on
:focus-within (keyboard, works even before blocks.js has run). */
ul.chart-list li:hover > ul,
ul.chart-list li.open > ul,
ul.chart-list li:focus-within > ul {
max-height: 20rem;
/* Scrolls inside its 20rem rather than hiding the end of the list: a
reader may have ten charts, and wrapped names make each one taller
(2026-10-01 — the fourth sample chart was half cut off on a phone). */
overflow-y: auto;
opacity: 1;
visibility: visible;
transition: max-height var(--transition), opacity var(--transition), visibility 0s linear;
}
ul.chart-list li.charts-label:hover,
ul.chart-list li ul {
/* box-shadow: var(--shadow-tight) */
}
/* The submenu is opaque on its own, not only while hovered — it can now be
opened by click and by keyboard, where no :hover state exists. */
ul.chart-list li ul {
background: var(--c-orange-red);
}
ul.chart-list li ul a {
background-color: var(--c-orange);
background-image: url('../img/icons/arrow-right.svg');
background-repeat: no-repeat;
background-size: .6rem;
background-position: left 1.25rem center;
padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8);
}
ul.chart-list li ul a:hover,
ul.chart-list li ul a:focus-visible {
background-color: var(--c-green);
color: var(--c-white-soft);
/* background-image: url('../img/icons/arrow-right.svg') */
}
ul.chart-list li ul a.added {
background: var(--c-green);
color: var(--c-white-soft);
}
/* The chevron is the saved-chart bar's arrow turned to point down (Zlatan,
2026-09-30: "unify right and down arrow") — same thin shape, same size,
same place, and the same side padding, so the label centres the same way
in both. Was the heavier icon-down-white(-75).svg — and since the same day
every down arrow on the site is this one (Zlatan: "replace them all with
thin"): the catalogue sort, .button--down, the phone summary fold and the
chapter menu toggle. */
.charts-label span {
padding: var(--space-4) 3.5rem;
display: block;
background: var(--c-orange);
color: var(--c-white-soft);
/* The dropdown's title is a label, like "Use this birth chart": small,
so the names in the list are what stands out (Zlatan, 2026-10-01:
"smaller"). Was --fs-lg, bold. */
font-size: var(--fs-sm);
background-image: url('../img/icons/chevron-down-white.svg');
background-repeat: no-repeat;
background-size: 1.1rem;
background-position: right 1.5rem center;
cursor: pointer;
}
.charts-label span:focus-visible {
outline: 2px solid var(--c-green);
outline-offset: -2px;
}
/* While the list is open the label steps back, so the eye goes to the charts
(Zlatan, 2026-10-01). The same three conditions that open the list — hover,
.open from a click or tap, and keyboard focus — so the two never disagree.
On the span only: the list is inside the same
and must stay solid. */
.charts-label > span {
transition: opacity var(--transition);
color: var(--c-text);
}
ul.chart-list li.charts-label:hover > span,
ul.chart-list li.charts-label.open > span,
ul.chart-list li.charts-label:focus-within > span {
opacity: .5;
}
/* ---- _saved_charts — the reader's own birth charts, 0 / 1 / many ----
Agreed 2026-09-30 (Zlatan): every chart form knows how many charts the
reader already has. data-charts-state="zero|one|many" sits on , like
data-owner-state, so it reaches the order panel outside ; Rails
sets it from the real count (signed out = zero). Every version's copy is in
the markup; a part may belong to two states (data-charts-part="one many").
Order forms: zero = the form, with a sign-in line; one = "Use this birth
chart" (no dropdown with a single entry — it reads as broken); many = the
_chart_picker dropdown. Free-chart forms: only a quiet shortcut above the
form, because someone there came to make a new chart (the reason recorded
on free-chart.html, 2026-09-26). */
[data-charts-state="zero"] [data-charts-part]:not([data-charts-part~="zero"]),
[data-charts-state="one"] [data-charts-part]:not([data-charts-part~="one"]),
[data-charts-state="many"] [data-charts-part]:not([data-charts-part~="many"]) {
display: none;
}
/* The one saved chart, in the dropdown's slot and colours: an orange bar,
the white arrow where the dropdown has its chevron. */
.saved-chart {
display: block;
max-width: var(--max-form-width);
margin: 0 auto;
padding: var(--space-4) 3.5rem;
background-color: var(--c-orange);
background-image: url('../img/icons/arrow-right.svg');
background-repeat: no-repeat;
background-size: .6rem;
background-position: right 1.5rem center;
color: var(--c-white-soft);
text-align: center;
text-decoration: none;
transition: background-color var(--transition), border-color var(--transition);
}
.saved-chart:hover,
.saved-chart:focus-visible {
background-color: var(--c-green);
color: var(--c-white-soft);
}
.saved-chart__label {
display: block;
font-size: var(--fs-sm);
color: var(--c-text);
/* font-weight: var(--fw-bold) */
text-transform: uppercase;
}
/* The chart's name and birth date: data, not copy. Its own element, so the
sentence around it stays a text row (house style, 2026-09-21). */
.saved-chart__name {
display: block;
font-size: var(--fs-base);
}
/* On a free-chart form it is a shortcut, not the main action: outlined, so it
does not compete with the form below it. UNUSED since 2026-09-30 — the one
saved chart became a real button (.button.outline.blue, Zlatan: "make link a
button"); kept, as rules are, for the block demo history. */
.saved-chart--quiet {
background-color: transparent;
background-image: url('../img/icons/arrow-right-blue.svg');
border: 1px solid var(--c-border);
color: var(--c-text);
}
.saved-chart--quiet:hover,
.saved-chart--quiet:focus-visible {
background-color: transparent;
border-color: var(--c-orange);
color: var(--c-text);
}
/* The free-chart form's dropdown, "Open one of your birth charts" (Zlatan,
2026-09-30: "dropdown list as it is on order, but keep current design").
The order panel's _chart_picker — same list, same keyboard — with the
trigger in the quiet outlined look of .saved-chart--quiet and a blue
chevron. The list itself stays the order panel's. */
ul.chart-list--quiet {
background: transparent;
}
.chart-list--quiet .charts-label span {
background-color: transparent;
background-image: url('../img/icons/chevron-down-blue.svg');
border: 1px solid var(--c-border);
color: var(--c-text);
}
.chart-list--quiet .charts-label span:hover,
.chart-list--quiet .charts-label span[aria-expanded="true"] {
border-color: var(--c-orange);
}
ul.chart-list--quiet li.charts-label:hover {
box-shadow: none;
}
/* The chart's name and date as the second line inside a button. */
.button .saved-chart__name {
margin-top: .1rem;
text-transform: none;
}
/* Between a saved chart and the form: "or calculate a new one". */
.charts-or {
display: flex;
align-items: center;
gap: var(--space-3);
max-width: var(--max-form-width);
margin: var(--space-4) auto;
font-size: var(--fs-sm);
color: var(--c-text-soft);
text-transform: uppercase;
letter-spacing: 1px;
}
.charts-or::before,
.charts-or::after {
content: '';
flex: 1;
border-top: 1px solid var(--c-border);
}
/* _coupon_box */
.coupon-card {
/* margin: 0 auto */
/* padding: var(--space-16) var(--space-6) */
/* background-color: var(--c-blue-950) */
/* border-radius: 1rem */
/* background-color: var(--overlay-scrim) */
/* text-align: center */
/* color: var(--c-white-soft) */
/* max-width: var(--max-form-width) */
/* border-top: 7px solid var(--c-blue-700) */
}
/* ORANGE, AND THAT MAKES IT A DARK-GROUND CLASS. It exists for the coupon
card, which sits on the starfield — --c-orange on --c-blue-900 is a
comfortable read.
On cream it measures 1.56:1, which is not a heading, it is a watermark.
Caught 2026-09-08 by a contrast audit after the colour pass: home.html had
borrowed this class for a 28px heading on the light covers section. Use
.section-subheading below on anything light. */
.small-subheading {
font-size: var(--fs-2xl);
color: var(--c-orange);
letter-spacing: 1px;
}
/* The same heading with no colour of its own, so it inherits whatever ground
it lands on. Added 2026-09-08. Two classes rather than one class plus an
override, because the house rule is that a heading class states its look
outright — a heading whose colour depends on where you put it is exactly
the trap that made a tag change repaint six headings on the product page. */
.section-subheading {
font-size: var(--fs-2xl);
letter-spacing: 1px;
}
/* ==========================================================================
Cards — _book_card, _book_carousel, _testimonial_card, _star_rating
========================================================================== */
a.product-card {
width: 100%;
min-width: 100%;
/* border-radius: .25rem */
/* border: 1px solid var(--c-black-25) */
color: var(--c-blue-950);
background: var(--c-cream);
display: block;
position: relative;
transition: var(--transition);
}
@media (min-width: 540px) {
a.product-card {
width: 49%;
min-width: 49%;
}
}
@media (min-width: 900px) {
a.product-card {
width: 32%;
min-width: 32%;
}
}
a.product-card:hover {
/* border-color: var(--c-green) */
background-color: var(--c-green);
/* color: #000; */
box-shadow: var(--shadow-soft);
}
a.product-card:hover .card-content,
a.product-card:hover .card-plus {
opacity: 1;
/* background-color: var(--c-cream-soft); */
}
/* a.product-card:hover .card-content h3 {
font-weight: 400;
} */
.card-image {
overflow: hidden;
/* border-top-left-radius: .25rem */
/* border-top-right-radius: .25rem */
}
.card-image img {
/* border-top-left-radius: .25rem */
/* border-top-right-radius: .25rem */
transition: var(--transition);
}
a.product-card:hover .card-image img {
transform: scale3d(1.05, 1.05, 1.05);
}
/* Photo rotator that slides (data-photo-slide, 2026-10-01). The next photo
waits off to the right and moves in while the current one moves out to
the left. The first selector group zeroes the img's own hover transition
so only the slide is animated. Reduced motion never starts a rotator, so
it needs no override, but the transition is dropped for it anyway. */
.card-image--slide {
position: relative;
}
.card-image--slide img {
display: block;
width: 100%;
height: auto;
transition: transform .8s ease;
}
.card-image--slide .card-slide {
position: absolute;
inset: 0;
height: 100%;
object-fit: cover;
transform: translateX(100%);
}
.card-image--slide .card-slide.is-entering {
transform: translateX(0);
}
.card-image--slide img.is-leaving {
transform: translateX(-100%);
}
@media (prefers-reduced-motion: reduce) {
.card-image--slide img {
transition: none;
}
}
/* UNUSED since 2026-09-18 — Zlatan removed "View more" from every card: it
covered the book in the middle of the photo, and the card already says it
is a link. Kept, per the house style, in case it comes back.
"View more" in the centre of a cover card, on hover. Zlatan, 2026-09-16.
A span styled as a button, not a