/* ============================================================ * chrome.css — the site HEADER, TRANSIT STRIP, DRAWER and FOOTER * (CD 23 Sep 2026: D1 desktop · T1 tablet · 1a mobile · 1b drawer). * * Rendered by includes/class-chrome.php as [capriastro_header] / [capriastro_footer]; * the two Elementor theme-builder templates carry nothing but those shortcodes, so the * chrome is plugin code and versions with the plugin. Token-only, like every stylesheet. * * Header: 96 tall at 1440 (80 at 820), cream, wordmark left · nav centre (500 · 16 · .16em, * gap 34; the current item carries the 1.5px violet marker, siblings a transparent 1.5px * so the row never shifts) · the violet pill + the cart (only when it holds a print) right. * Under it the transit strip: a 44px row between two hairlines, 500 · 11.5 · .16em, the * secondary halves in the muted grey, the ✦ separators in violet. From the tablet down the * nav gives way to "Menu" + the burger; on a phone the masthead is 18 / 26 / 14 with the * 98.6 × 13.4 wordmark and the 10px strip. The drawer (1b) is CREAM: 22px rows with a * grey arrow on hairlines, the Play row an accordion, two full-width pills at the foot. * Footer: the ink gradient; 56 / 80 / 32 on desktop with the 1.6fr + 4 grid (T1: the brand * on its own rule above 4 columns; 1a: 30 / 26 / 20, 2 × 2), 32px link rows, the © row. * * SPECIFICITY — scoped `.cap-shell …` like components.css: Elementor's global kit styles * bare `a` and `button` at 0,1,1, so unscoped chrome selectors lost. * ============================================================ */ /* ─── header ──────────────────────────────────────────────── */ .cap-shell .cap-header-wrap { --cap-header-bg: var(--cap-color-bg); background: var(--cap-header-bg); } /* --cap-header-bg: the one value the cart badge's ring reads, so it matches the header on every page (owner 2026-09-26) */ .cap-shell .cap-header { max-width: var(--cap-page-max); margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--cap-space-lg); height: var(--cap-header-h); padding-left: var(--cap-page-x); padding-right: var(--cap-page-x); } .cap-shell .cap-header__logo { display: flex; align-items: center; flex: none; } .cap-shell .cap-header__logo img { display: block; width: var(--cap-logo-w); height: auto; } .cap-shell .cap-header__nav { display: flex; align-items: baseline; gap: var(--cap-nav-gap); } .cap-shell .cap-header__link { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-nav); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; line-height: var(--cap-leading-tight); color: var(--cap-color-muted); border-bottom: var(--cap-border-selected) solid transparent; padding-bottom: var(--cap-space-gap-2); transition: color var(--cap-ease), border-color var(--cap-ease); } @media (hover: hover) { .cap-shell .cap-header__link:hover { color: var(--cap-color-text); } } .cap-shell .cap-header__link.is-current { color: var(--cap-color-text); border-bottom-color: var(--cap-color-primary); } .cap-shell .cap-header__caret { padding-left: var(--cap-space-gap-3); font-size: var(--cap-type-badge); letter-spacing: 0; } /* the Play dropdown (D1): white, at least 420 wide (the columns size to their longest item — nothing runs to the edge), 24 pad, the panel's left edge 24 outside the label so the first column's icon sits under it, two columns on a rule; heads 600 · 11 · .16em violet with the icon, items 500 · 14 · .08em */ .cap-shell .cap-header__item--menu { position: relative; display: flex; } /* a flex box, so "Play" sits on the other five words' line at 1024–1279, where the row is centred (a block's taller line box set it 2.2 px low — owner 2026-10-02, B5) */ .cap-shell .cap-menu { position: absolute; top: 100%; left: calc(-1 * var(--cap-gutter)); z-index: 9000; display: none; grid-template-columns: auto auto; gap: 0 var(--cap-gutter); width: max-content; min-width: 420px; margin-top: var(--cap-space-sm); padding: var(--cap-gutter); background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); box-shadow: var(--cap-shadow-lift-deep); } .cap-shell .cap-header__item--menu:focus-within .cap-menu, .cap-shell .cap-header__item--menu.is-open .cap-menu { display: grid; } @media (hover: hover) { .cap-shell .cap-header__item--menu:hover .cap-menu { display: grid; } } .cap-shell .cap-header__item--menu.is-dismissed .cap-menu { display: none; } /* Escape closes it while the pointer or the focus is still there (cap-header script) */ .cap-shell .cap-header__item--menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--cap-space-sm); } /* keeps hover alive across the gap to the panel */ .cap-shell .cap-menu__col { display: flex; flex-direction: column; gap: var(--cap-space-gap-6); } .cap-shell .cap-menu__col + .cap-menu__col { border-left: var(--cap-border-hairline) solid var(--cap-color-line-strong); padding-left: var(--cap-gutter); } .cap-shell .cap-menu__head { display: flex; align-items: center; gap: var(--cap-space-sm); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-data); letter-spacing: var(--cap-track-card-title); line-height: var(--cap-leading-tight); text-transform: uppercase; color: var(--cap-color-text); } /* ink, as the drawer (ruling C, owner 28 Sep); the icon follows (currentColor); the items' size + tracking, 600 (owner 2026-10-07) */ .cap-shell .cap-menu__head svg { display: block; width: auto; height: calc(10px * 346.37 / 220.49); margin-inline: calc(10px * (1 - 259.32 / 220.49) / 2); fill: currentColor; } /* the owner's pair in one frame (icon-*.svg, 2026-10-08): sized by height, the card as before, the stone as drawn beside it */ /* THE PLAY HEADINGS ARE LINKS AND LOOK IT (owner 2026-10-07): "Tarot" / "Runes" at the menu items' size and tracking, ink, one weight bolder (600), the icon kept, our arrow after the word; hover (mouse) and press (any pointer): ink → violet, the icon with it. The same in the phone / tablet drawer (below, at the drawer links' size). */ .cap-shell :is(.cap-menu__head-arrow, .cap-drawer__subhead-arrow) { font-weight: 500; letter-spacing: 0; } .cap-shell :is(.cap-menu__head, .cap-drawer__subhead-l):active { color: var(--cap-color-primary); } @media (hover: hover) { .cap-shell :is(.cap-menu__head, .cap-drawer__subhead-l):hover { color: var(--cap-color-primary); } } /* on a touch screen this press is at once (press.css "AT ONCE" block, round 37) */ /* the headings link to the deck hubs (owner 2026-09-30); round 23 rule 4: they are ink and take no hover colour (they had turned violet while every other header item turns ink) */ .cap-shell .cap-menu__all { border-top: var(--cap-border-hairline) solid var(--cap-color-line-strong); padding-top: var(--cap-space-gap-6); } /* the library row, under a hairline (owner 2026-09-24) */ .cap-shell .cap-menu__link { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-data); letter-spacing: var(--cap-track-card-title); text-transform: uppercase; line-height: var(--cap-leading-tight); color: var(--cap-color-muted); white-space: nowrap; } .cap-shell .cap-menu__link.is-current { color: var(--cap-color-text); } @media (hover: hover) { .cap-shell .cap-menu__link:hover { color: var(--cap-color-text); } } /* the Play hub's "More ways to play" ([capriastro_play_more]) — the same six + two libraries as the menu */ .cap-shell .cap-play-more { max-width: var(--cap-page-max); margin: var(--cap-space-xl) auto 0; } .cap-shell .cap-play-more__head { margin-bottom: var(--cap-space-md); } .cap-shell .cap-play-more__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cap-space-lg); } .cap-shell .cap-play-more__label { color: var(--cap-color-text); padding-bottom: var(--cap-space-sm); border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); margin-bottom: var(--cap-space-sm); } .cap-shell .cap-play-more__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cap-space-sm); } .cap-shell .cap-play-more__link { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-small); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text-secondary); } @media (hover: hover) { .cap-shell .cap-play-more__link:hover { color: var(--cap-color-primary); } } .cap-shell .cap-play-more__link--library { color: var(--cap-color-primary); } @media (max-width: 699px) { .cap-shell .cap-play-more__cols { grid-template-columns: 1fr; } } .cap-shell .cap-header__right { display: flex; align-items: center; gap: var(--cap-space-cell-x); flex: none; } /* "Menu" + the burger (T1: 500 · 16 · .16em beside 1.5px bars 22 wide; 1a: the bars alone, 20 wide) */ .cap-shell .cap-header__burger { display: none; align-items: center; gap: var(--cap-space-chip-gap); background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-nav); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-text); } .cap-shell .cap-header__burger-bars { display: flex; flex-direction: column; gap: var(--cap-space-burger-gap); width: var(--cap-burger-w); } .cap-shell .cap-header__burger-bars span { display: block; height: var(--cap-border-selected); background: var(--cap-color-text); transition: transform var(--cap-ease), opacity var(--cap-ease); } /* the three bars are DRAWN by a mask (owner 2026-10-02, B2): a 1.5 px box always rounds to a whole 1 or 2 px, and the middle bar rounded the other way from the outer two (twice as thick at 2× and 3×, phone and tablet); a mask paints them at their real 1.5 weight, all three alike. The spans keep the box's size and the open-state X; they paint nothing themselves. */ .cap-shell .cap-header__burger-bars { height: var(--cap-burger-h); background: currentColor; -webkit-mask: url("../img/burger-tablet.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/burger-tablet.svg") 0 0 / 100% 100% no-repeat; } .cap-shell .cap-header__burger-bars span { visibility: hidden; } .cap-shell .cap-header[data-open="true"] .cap-header__burger-bars span:nth-child(1) { transform: translateY(calc(var(--cap-space-burger-gap) + var(--cap-border-selected))) rotate(45deg); } /* one bar pitch, so the X crosses on the middle bar at every width */ .cap-shell .cap-header[data-open="true"] .cap-header__burger-bars span:nth-child(2) { opacity: 0; } .cap-shell .cap-header[data-open="true"] .cap-header__burger-bars span:nth-child(3) { transform: translateY(calc(-1 * (var(--cap-space-burger-gap) + var(--cap-border-selected)))) rotate(-45deg); } /* ─── the transit strip / breadcrumb row ──────────────────── */ .cap-shell .cap-transit { border-top: var(--cap-border-hairline) solid var(--cap-color-line); } /* EVERY page draws the rule under the header (the sheets, all widths, owner review 2026-09-24): with a transit line it is the strip's top border; on a page with neither a transit line nor a crumb the strip renders EMPTY and is that rule alone (0 tall) — it was hidden outright, which took the divider off the money page, the natal-chart landing, the poster hub, the article and Chronicles. */ /* the transit line is closed below; a breadcrumb row is NOT (owner 2026-09-09 — the sheets show no hairline under the crumbs). */ .cap-shell .cap-transit:has(.cap-transit__in) { border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); } .cap-shell .cap-crumbs { max-width: var(--cap-page-max); margin-left: auto; margin-right: auto; padding: var(--cap-space-md) var(--cap-page-x); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-meta); letter-spacing: var(--cap-track-meta); text-transform: uppercase; color: var(--cap-color-muted); } .cap-shell .cap-crumbs a { color: inherit; } @media (hover: hover) { .cap-shell .cap-crumbs a:hover { color: var(--cap-color-text); } } .cap-shell .cap-crumbs span { color: var(--cap-color-text); } .cap-shell .cap-crumbs__sep { color: var(--cap-color-muted); padding: 0 var(--cap-space-sm); } .cap-shell .cap-transit__in { max-width: var(--cap-page-max); margin-left: auto; margin-right: auto; height: var(--cap-transit-h); display: flex; align-items: center; justify-content: center; gap: var(--cap-gutter); white-space: nowrap; padding: 0 var(--cap-page-x); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-transit); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-text); } .cap-shell .cap-transit__in b { font-weight: 500; color: var(--cap-color-text); } .cap-shell .cap-transit__in .cap-transit__q { color: var(--cap-color-muted); } /* the quiet half of a segment: the day, "in Capricorn" */ .cap-shell .cap-transit__sep { color: var(--cap-color-primary); font-size: var(--cap-type-badge); letter-spacing: 0; } .cap-shell .cap-transit__in { overflow: hidden; } .cap-shell .cap-transit__seg.is-dropped, .cap-shell .cap-transit__sep.is-dropped { display: none; } /* THE BAR IS ONE LINE AT EVERY WIDTH (owner 2026-10-04, round 26): where it does not fit, the last transit drops with the ✦ before it, then the next (cap-sep.js); the date always stays */ /* ─── the drawer (1b): cream, full height ─────────────────── */ .cap-shell .cap-drawer { position: fixed; inset: 0; z-index: 9000; background: var(--cap-color-bg); color: var(--cap-color-text); display: flex; flex-direction: column; overflow-y: auto; } .cap-shell .cap-drawer__head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: var(--cap-space-header-pad); } /* never squeezed by a tall drawer */ .cap-shell .cap-drawer__head .cap-header__logo img { width: var(--cap-logo-w); } .cap-shell .cap-drawer__close { background: none; border: 0; padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-family: var(--cap-font-ui); font-size: var(--cap-type-data-lg); line-height: 1; color: var(--cap-color-text); cursor: pointer; } .cap-shell .cap-drawer__nav { display: flex; flex-direction: column; border-top: var(--cap-border-hairline) solid var(--cap-color-line); padding: var(--cap-space-sm) var(--cap-page-x) 0; } .cap-shell .cap-drawer__row { display: flex; align-items: baseline; justify-content: space-between; padding: var(--cap-space-head-y) 0; border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); } .cap-shell .cap-drawer__row a, .cap-shell .cap-drawer__row > span { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-drawer-row); letter-spacing: var(--cap-track-card-title); text-transform: uppercase; color: var(--cap-color-muted); line-height: var(--cap-leading-tight); } .cap-shell .cap-drawer__row a.is-current { color: var(--cap-color-text); } .cap-shell .cap-drawer__arrow, .cap-shell .cap-drawer__toggle { background: none; border: 0; padding: 0 0 0 var(--cap-space-sm); font-family: var(--cap-font-ui); font-size: var(--cap-type-data); line-height: 1; color: var(--cap-color-muted); cursor: pointer; } .cap-shell .cap-drawer__group { border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); padding: var(--cap-space-gap-6) 0 var(--cap-space-sm); } .cap-shell .cap-drawer__group .cap-drawer__row { border-bottom: 0; padding: 0; } .cap-shell .cap-drawer__group.is-open .cap-drawer__row a { color: var(--cap-color-text); } .cap-shell .cap-drawer__caret { display: inline-block; font-size: var(--cap-type-badge); transition: transform var(--cap-ease); } /* THE ARROW AND THE TRIANGLE ON THE ROW LABEL'S CAPITALS (owner 2026-10-04, round 27): the row shares one baseline (above), then each moves by the difference between the two capital centres — 0.35 em of its own size against 0.35 of the label's (the UI face's capitals are 0.70 em; the drawn symbols sit on their centre). One arrow at every width: 14, 500, caption grey (the tablet's was the 22 label's own size and colour). */ .cap-shell .cap-drawer__row > .cap-drawer__arrow { font-size: var(--cap-type-data); font-weight: 500; color: var(--cap-color-caption); line-height: 1; } .cap-shell .cap-drawer__arrow, .cap-shell .cap-drawer__caret { position: relative; top: calc(0.35em - 0.35 * var(--cap-type-drawer-row)); } .cap-shell .cap-drawer__group.is-open .cap-drawer__caret { transform: rotate(180deg); } /* open: the same triangle turned over (owner 2026-10-02, A2) */ .cap-shell .cap-drawer__sub { display: flex; flex-direction: column; margin-top: var(--cap-space-sm); } .cap-shell .cap-drawer__col { display: flex; flex-direction: column; padding-left: var(--cap-space-gap-7); border-left: var(--cap-border-hairline) solid var(--cap-color-line-strong); } .cap-shell .cap-drawer__subhead { display: flex; align-items: center; justify-content: space-between; gap: var(--cap-space-sm); } /* the heading links to the deck hub (owner 2026-09-30), so the row's vertical padding moves onto the link — the same tap height as the three draw links under it; the row sits exactly where it did */ .cap-shell .cap-drawer__subhead-l { padding: var(--cap-space-head-y) 0; display: flex; align-items: center; gap: var(--cap-space-sm); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-drawer-sub); letter-spacing: var(--cap-track-card-title); text-transform: uppercase; color: var(--cap-color-text); } /* the drawer links' size, 600, ink (owner 2026-10-07) */ .cap-shell .cap-drawer__subhead-l svg { display: block; width: auto; height: calc(10px * 346.37 / 220.49); margin-inline: calc(10px * (1 - 259.32 / 220.49) / 2); fill: currentColor; } /* the rune stone bigger in every menu (owner 2026-10-07): 12 %, then another 10 % (× 1.232 of the 10 px); it grows about its own centre — the extra width comes off the gap on each side — so the two headings' text still starts at the same place; the tarot icon is untouched */ .cap-shell .cap-drawer__sublink { font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-drawer-sub); letter-spacing: var(--cap-track-card-title); text-transform: uppercase; color: var(--cap-color-text-tertiary); padding: var(--cap-space-head-y) 0; } @media (hover: hover) { .cap-shell .cap-drawer__sublink:hover { color: var(--cap-color-text); } } .cap-shell .cap-drawer__all { border-top: var(--cap-border-hairline) solid var(--cap-color-line-strong); } /* the library row, under a hairline */ .cap-shell .cap-drawer__head-all { display: none; } /* THE WHOLE ROW IS THE LINK (owner 2026-10-05, round 29): in the phone and tablet menu a row answered only on its word. Each row's link now covers the row from its left edge to its arrow (arrow included) and its full height (an invisible layer over the row); the Play row's triangle keeps its own 44 × 44 area above it (it opens / closes Play), the TAROT / RUNES rows' "All 22 cards →" / "All 25 runes →" theirs. The Play row's layer also covers its group's top padding, so no band of that row is dead. */ @media (max-width: 1023px) { .cap-shell .cap-drawer__row, .cap-shell .cap-drawer__subhead { position: relative; } .cap-shell .cap-drawer__row > a::before, .cap-shell .cap-drawer__subhead-l::before { content: ""; position: absolute; inset: 0; } .cap-shell .cap-drawer__group > .cap-drawer__row > a::before { top: calc(-1 * var(--cap-space-gap-6)); } .cap-shell .cap-drawer__arrow { pointer-events: none; } .cap-shell .cap-drawer__toggle, .cap-shell .cap-drawer__head-all { position: relative; z-index: 1; } .cap-shell .cap-drawer__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--cap-tap-min)); height: max(100%, var(--cap-tap-min)); transform: translate(-50%, -50%); } .cap-shell .cap-drawer__col + .cap-drawer__col .cap-drawer__subhead-l::before { top: calc(-1 * var(--cap-space-sm)); } /* the RUNES row's top air */ } @media (max-width: 699px) { .cap-shell .cap-drawer__group > .cap-drawer__row > a::before { top: calc(-1 * var(--cap-mp-drawer-row-y)); } } /* THE PLAY COLUMNS, PHONE AND TABLET ALIKE (owner 2026-10-04, round 26: the tablet's tarot / rune links were fainter and smaller than the phone's next to the main items, its library links on their own row at the left) — the 1b values: the three links 500 on their face's own line box, the library link on the heading row at the right (11 · 500 · .1em, caption grey), the second column opening 8 lower */ @media (max-width: 1023px) { .cap-shell .cap-drawer__head-all { display: block; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-eyebrow-card); line-height: normal; letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-caption); white-space: nowrap; } .cap-shell .cap-drawer__all { display: none; } .cap-shell .cap-drawer__sublink { font-weight: 500; line-height: normal; } .cap-shell .cap-drawer__subhead { line-height: normal; } .cap-shell .cap-drawer__col + .cap-drawer__col .cap-drawer__subhead { padding-top: var(--cap-space-sm); } /* + the link's own head-y = the 19 over its heading */ } @media (min-width: 700px) and (max-width: 1023px) { .cap-shell .cap-drawer__sublink:not(.cap-drawer__all) { min-height: var(--cap-tap-min); box-sizing: border-box; display: flex; align-items: center; } /* the tablet keeps every link row at the 44 touch minimum (on its face's line box the row was 43) */ } /* 1b (28 Sep 2026, phone; the tablet drawer unchanged): rows 13 · 22 · 13, the arrows 14 in the caption grey, the caret ▴ 14; the Play columns: the library link on the heading row (11 · 500 · .1em, caption grey), the three links 500, the second column opening 8 lower (19 over its heading) */ @media (max-width: 699px) { .cap-shell .cap-drawer__row { padding: var(--cap-mp-drawer-row-y) 0; } .cap-shell .cap-drawer__caret { font-size: var(--cap-type-drawer-caret); font-weight: 500; line-height: 1; transform-origin: 50% 53.5%; } /* 20 → 30 → 22.5 (owner 2026-10-04, rounds 26 + 28); open = the same ▾ turned over (above) about its own centre: the drawn triangle (round 27, our symbol font) sits on the capital centre, 0.35 em over the baseline, which line-height 1 puts 53.5 % down the box at 22.5 (pixel-measured, closed and open) */ .cap-shell .cap-drawer__toggle { color: var(--cap-color-caption); } .cap-shell .cap-drawer__group { padding: var(--cap-mp-drawer-row-y) 0; } /* the Play row as tall as every other row, 13 / 13 (owner 2026-10-02, B3; was 12 / 8 = 47 against 53) */ /* 29 Sep sheet: every drawer line on its face's own line box (22 → 26, 14 → 17, 16 → 19, 11 → 13), as CD draws it */ .cap-shell .cap-drawer__row a, .cap-shell .cap-drawer__row > span, .cap-shell .cap-drawer__head-all { line-height: normal; } } .cap-shell .cap-drawer__foot { display: flex; flex-direction: column; gap: var(--cap-space-chip-gap); padding: var(--cap-space-primary-air) var(--cap-page-x); } /* 1024–1279 = the T sheets' 1024 header (owner 2026-10-01): the full menu, 80 tall, the tablet side margin; the items 500 · 15 · .16em, 20 apart, each a 44-tall tap row (the band in components.css — the words and their rule unmoved). Play opens on a tap on touch screens (cap-header script). Below 1024 the burger with "Menu". */ @media (min-width: 1024px) and (max-width: 1279px) { .cap-shell .cap-header { height: var(--cap-header-h-mid); padding-left: var(--cap-page-x-mid); padding-right: var(--cap-page-x-mid); } .cap-shell .cap-header__nav { gap: var(--cap-nav-gap-mid); align-items: center; } .cap-shell .cap-header__link { font-size: var(--cap-type-nav-mid); } } @media (max-width: 1023px) { .cap-shell .cap-header { height: var(--cap-header-h-mid); padding: var(--cap-space-header-pad-mid); } .cap-shell .cap-drawer__head { height: var(--cap-header-h-mid); padding: var(--cap-space-header-pad-mid); } /* the drawer's own head sits where the header's did (it was flush to the window edges at 700–1023) */ .cap-shell .cap-header__nav { display: none; } .cap-shell .cap-header__burger { display: flex; } .cap-shell .cap-header__right { gap: var(--cap-gutter); } .cap-shell .cap-transit { border-top-color: var(--cap-color-line-strong); } .cap-shell .cap-transit__in { padding: 0 var(--cap-page-x-mid); } /* one line always (round 26 — it wrapped to two from round 20): a transit that does not fit is dropped (above) */ .cap-shell .cap-crumbs { padding: var(--cap-space-md) var(--cap-page-x-mid); } } /* the tablet menu: the rows and the pills on the logo's and the ✕'s edges, the tablet inset 56 — as the phone keeps them all on one edge (owner 2026-10-02, B4; the rows sat at 80) */ @media (min-width: 700px) and (max-width: 1023px) { .cap-shell .cap-drawer__nav, .cap-shell .cap-drawer__foot { padding-left: var(--cap-page-x-mid); padding-right: var(--cap-page-x-mid); } } @media (max-width: 699px) { .cap-shell .cap-header { height: auto; padding: var(--cap-space-header-pad); gap: var(--cap-space-md); } .cap-shell .cap-drawer__head { height: auto; padding: var(--cap-space-header-pad); } /* the phone drawer head as before */ .cap-shell .cap-header__right { gap: var(--cap-space-gap-7); } .cap-shell .cap-header .cap-btn { border-width: 0; } /* the sheet's 32px button, so the header is 64 (owner 27 Sep; the 1px transparent border made 34 / 66) */ .cap-shell .cap-header__burger-label { display: none; } .cap-shell .cap-header__burger-bars { -webkit-mask-image: url("../img/burger-phone.svg"); mask-image: url("../img/burger-phone.svg"); } /* 20 × 18, the bars 8 apart (owner 2026-10-02, B2) */ .cap-shell .cap-crumbs { padding: var(--cap-space-md) var(--cap-page-x); } .cap-shell .cap-transit { border-top-color: var(--cap-color-line); } .cap-shell .cap-transit__in { height: auto; padding: var(--cap-space-head-y) var(--cap-page-x); gap: var(--cap-space-sm); align-items: baseline; letter-spacing: var(--cap-track-feature); line-height: normal; } /* the 19 phone sheets that draw it: 36 rule to rule (27 Sep) */ /* round 22 (owner): below 700 the bar is ALWAYS ONE LINE — the date and one note. The segments come date first, then the page's own note, then the sky (the retrograde, the moon), so the sky drops first; the ✦ after the kept note goes too */ .cap-shell .cap-transit__seg ~ .cap-transit__seg ~ .cap-transit__seg, .cap-shell .cap-transit__seg ~ .cap-transit__seg ~ .cap-transit__sep { display: none; } /* the sheets show no crumb row under the mobile masthead — the page carries its own crumb in the content, above the title (see poster-preview.css). */ } /* A 320 PHONE (owner 2026-10-05, round 31: an iPhone with Display Zoom "Larger Text" lays the site out 320 wide): below 360 the header row needed 317 of its 294 — the menu ran past the screen's edge and every page scrolled sideways 9 px. The two gaps and the button's sides tighten, and an empty cart (no item, nothing drawn) takes no gap; the insets and every size stay. */ @media (max-width: 359px) { .cap-shell .cap-header { gap: var(--cap-space-gap-5); } .cap-shell .cap-header__right { gap: var(--cap-space-gap-6); } /* 12: the menu's 44 tap band reaches 12 past its 20-wide bars — less and it meets the button's */ .cap-shell .cap-header__cart-wrap:empty { display: none; } .cap-shell .cap-header .cap-btn { padding-left: var(--cap-space-gap-6); padding-right: var(--cap-space-gap-6); } .cap-shell .cap-header, .cap-shell .cap-drawer__head { padding-left: var(--cap-page-x); padding-right: var(--cap-page-x); } /* the phone gutter below 360 (owner ruling 2026-10-05): the header and the open menu's head on 20, like the page */ /* WITH AN ITEM IN THE CART the row is 29 too wide even so: the button goes while the cart shows — logo · cart · menu; the free chart stays in the menu (owner ruling 2026-10-05). The page had grown to 335, and a phone then lays it out shrunk: taps land a row off (the journeys' Parral, Chile for Mexico) */ .cap-shell .cap-header:has(.cap-header__cart) .cap-btn { display: none; } .cap-shell .cap-header-wrap:has(.cap-header__cart) .cap-drawer__row--free { display: flex; } /* …and the menu opens on it (round 36, owner) */ } .cap-shell .cap-drawer__row--free { display: none; } /* only while the header's button is hidden (the rule above) */ /* …and WITH AN ITEM IN THE CART (the cart icon takes 24 more): at 360 the menu sat 7 past its inset (19 from the screen's edge, not 26). Up to 379 the two gaps tighten the same way while the cart shows; the button keeps its sides there. */ @media (max-width: 379px) { .cap-shell .cap-header:has(.cap-header__cart) { gap: var(--cap-space-gap-5); } .cap-shell .cap-header:has(.cap-header__cart) .cap-header__right { gap: var(--cap-space-gap-6); } } /* ─── footer ──────────────────────────────────────────────── */ /* A short page (the empty cart, a one-line notice): the footer sits at the foot of the WINDOW, never a cream strip below it (owner 2026-09-30). The body is a column at least the window's height (less WordPress's admin bar when logged in) and the footer takes the slack above it; a page taller than the window is unchanged. The page's own blocks keep full width. */ body:has(> .elementor-location-footer) { display: flex; flex-direction: column; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); } body:has(> .elementor-location-footer) > :is(header, main, footer, div.elementor, #content) { width: 100%; flex-shrink: 0; } body:has(> .elementor-location-footer) > .elementor-location-footer { margin-top: auto; } .cap-shell .cap-footer { background: var(--cap-color-footer-gradient); color: var(--cap-color-on-ink); } body.cap-ink-page .cap-shell .cap-footer { background: var(--cap-color-footer-ink-page); } /* the ink (tarot) pages: a deeper flat tone so the footer parts from the ink page above (owner 2026-10-02) */ @media (max-width: 1279px) { body.cap-ink-page .cap-shell .cap-footer__base span { color: var(--cap-color-footer-base-ink-page); } } /* the © / legal line, caption grey below 1280: lightened to 4.5:1 on the deeper ink (owner 2026-10-02, A8) */ .cap-shell .cap-footer__grid { max-width: var(--cap-page-max); margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--cap-space-panel-pad); padding: var(--cap-space-band-close) var(--cap-page-x) var(--cap-space-panel-pad); } .cap-shell .cap-footer__brand { display: flex; flex-direction: column; gap: var(--cap-space-footer-logo-gap); max-width: 34ch; } .cap-shell .cap-footer__brand img { display: block; width: var(--cap-logo-footer-w); height: auto; margin-right: auto; filter: invert(1) brightness(1.6); } .cap-shell .cap-footer__brand p { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-lede); line-height: var(--cap-leading-small); color: var(--cap-color-on-ink-muted); } /* the social row under the blurb (D1 · 1a, 29 Sep; TikTok only for now): a 38 ring, the 17 icon inside, hover to on-ink */ .cap-shell .cap-footer__social { display: flex; flex-wrap: wrap; gap: var(--cap-space-gap-4); } /* up to seven networks: a row that wraps rather than run past the column (owner 2026-10-05) */ .cap-shell .cap-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: var(--cap-space-social-ring); height: var(--cap-space-social-ring); box-sizing: border-box; border: var(--cap-border-hairline) solid var(--cap-color-social-ring); border-radius: var(--cap-radius-pill); color: var(--cap-color-on-ink-muted); text-decoration: none; } @media (hover: hover) { .cap-shell .cap-footer__social a:hover { border-color: var(--cap-color-on-ink); color: var(--cap-color-on-ink); } } .cap-shell .cap-footer__col { display: flex; flex-direction: column; gap: 0; } .cap-shell .cap-footer__h { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-footer-head); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-primary-soft); margin-bottom: var(--cap-space-gap-3); line-height: var(--cap-leading-tight); } .cap-shell .cap-footer__col a { display: flex; align-items: center; min-height: var(--cap-space-footer-row); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-footer-link); letter-spacing: var(--cap-track-meta); text-transform: uppercase; line-height: var(--cap-leading-ui); color: var(--cap-color-on-ink-muted); transition: color var(--cap-ease); } @media (hover: hover) { .cap-shell .cap-footer__col a:hover { color: var(--cap-color-on-ink); } } .cap-shell .cap-footer__base { max-width: var(--cap-page-max); display: flex; justify-content: space-between; gap: var(--cap-space-md); margin: 0 var(--cap-page-x); padding: var(--cap-space-lg) 0 var(--cap-space-lg); border-top: var(--cap-border-hairline) solid var(--cap-color-line-on-ink); } .cap-shell .cap-footer__base span { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-footer-base); letter-spacing: var(--cap-track-meta); text-transform: uppercase; color: var(--cap-color-on-ink-muted); } .cap-shell .cap-footer__star { color: var(--cap-color-primary-soft); padding: 0 var(--cap-space-xs); } /* the entertainment line breaks only AT its ✦, and the ✦ is then dropped like a "·" (cap-sep.js; owner 2026-10-07: at 10 px on a 320 phone "ADVICE" fell alone onto a third line) — each half keeps its words together */ .cap-shell .cap-footer__half { white-space: nowrap; } @media (max-width: 1279px) { /* T1: the brand on its own rule, then four columns (below 1280 — owner rule 2026-09-30) */ .cap-shell .cap-footer__grid { grid-template-columns: repeat(4, 1fr); padding: var(--cap-space-band-close) var(--cap-page-x-mid) var(--cap-space-panel-pad); } .cap-shell .cap-footer__brand { grid-column: 1 / -1; max-width: none; padding-bottom: var(--cap-space-footer-rule-gap); border-bottom: var(--cap-border-hairline) solid var(--cap-color-line-on-ink); } /* the hairline under the brand at EVERY width below 1280, 40 above it and 40 to the columns — the 820 look (owner 2026-10-01) */ .cap-shell .cap-footer__brand p { max-width: 34ch; } .cap-shell .cap-footer__base { margin: 0 var(--cap-page-x-mid); } .cap-shell .cap-footer__col a { min-height: var(--cap-tap-min); } /* T1 (30 Sep): every tablet footer link a 44-tall row, the full column wide */ } @media (min-width: 700px) and (max-width: 1279px) { /* T1 / T1-820 (1 Oct): the blurb 15 / 1.6 under the logo at 24, the social row 24 under it; the heads 6 over their lists */ .cap-shell .cap-footer__brand p { font-size: var(--cap-type-footer-blurb-mid); line-height: var(--cap-mp-leading-footer); max-width: var(--cap-footer-blurb-max); text-wrap: balance; } .cap-shell .cap-footer__h { margin-bottom: var(--cap-space-gap-3); } .cap-shell .cap-footer__base { padding: var(--cap-space-block-5) 0 var(--cap-space-lg); } .cap-shell .cap-footer__base span { color: var(--cap-color-caption); line-height: normal; } } @media (max-width: 699px) { /* 1a: 30 / 26 / 20, the brand, then 2 × 2 columns at gap 20 × 16, the © row stacked */ .cap-shell .cap-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--cap-space-cell-x) var(--cap-space-md); padding: var(--cap-space-footer-open) var(--cap-page-x) var(--cap-space-cell-x); } .cap-shell .cap-footer__brand p { font-size: var(--cap-type-subchapter); } .cap-shell .cap-footer__h { font-weight: 600; letter-spacing: var(--cap-track-meta); margin-bottom: var(--cap-space-xs); } .cap-shell .cap-footer__col a { letter-spacing: var(--cap-track-feature); min-height: var(--cap-space-footer-row); } /* 1a (1 Oct): rows 40 apart — the approved exception to the 44 rule (a 40 band, the full column wide, no overlap) */ .cap-shell .cap-footer__base { flex-direction: column; gap: var(--cap-space-gap-3); margin: 0 var(--cap-page-x); padding: var(--cap-space-md) 0 var(--cap-space-cell-x); } .cap-shell .cap-footer__base span { letter-spacing: var(--cap-track-eyebrow); } /* 1a (28 Sep, the footer's phone exemplar): the lede runs the full column at 13 / 1.6; 24 from it to the columns; the base in the caption grey. (The link lists stay the site's own — Shipping + Disclaimer, no Disclosure, by ruling.) */ .cap-shell .cap-footer__brand { margin-bottom: calc(var(--cap-space-footer-rule-gap) - var(--cap-space-block-4)); } /* the rule (owner 2026-10-01, as at 820): 40 above it, and the grid's 20 + 20 = 40 below it to the columns */ .cap-shell .cap-footer__brand p { max-width: none; line-height: var(--cap-mp-leading-footer); } .cap-shell .cap-footer__base span { color: var(--cap-color-caption); line-height: var(--cap-leading-tight); } .cap-shell .cap-footer__grid { row-gap: var(--cap-space-block-4); padding-bottom: var(--cap-space-lg); } /* the columns → the base rule 24 */ } /* `hidden` wins over a scoped display (see components.css). */ .cap-shell .cap-drawer[hidden] { display: none; } /* Header cart (owner 2026-09-22) — rendered only when the cart is not empty, so there is no empty state to style. The wrapper is always present for Woo's cart fragments; it collapses to nothing when it holds no link. 44 × 44 target, the violet count badge with a 2px cream ring (D1 / 1a). */ .cap-header__cart-wrap { display: inline-flex; align-items: center; } .cap-header__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 calc(-1 * var(--cap-space-chip-gap)); color: var(--cap-color-text); text-decoration: none; transition: color var(--cap-ease-fast); } @media (hover: hover) { .cap-header__cart:hover { color: var(--cap-color-primary); } } .cap-header__cart-icon { display: inline-flex; } .cap-header__cart-count { position: absolute; top: var(--cap-space-gap-3); right: var(--cap-space-gap-2); display: inline-flex; align-items: center; justify-content: center; min-width: var(--cap-cart-badge); height: var(--cap-cart-badge); padding: 0 var(--cap-space-gap-2); border-radius: var(--cap-radius-pill); background: var(--cap-color-primary); color: var(--cap-color-surface); box-shadow: 0 0 0 2px var(--cap-header-bg, var(--cap-color-bg)); font-family: var(--cap-font-ui); font-size: var(--cap-type-cart-badge); font-weight: 600; line-height: 1; } /* ─── THE INK HEADER — the tarot draw pages (D12-1 · D13 · 1g-1 · 1h; owner 2026-09-24) ─────────────────────────────────────────────── The same header on the ink ground: the wordmark inverted, the nav in on-ink-muted with the current item on-ink over its violet rule, the burger and the cart on-ink, the violet pill unchanged; the transit strip's rules white at 9 %, its text on-ink, the quiet halves on-ink-muted. The drawer and the Play panel are panels and stay cream (1b). */ .cap-shell .cap-header-wrap--ink { --cap-header-bg: var(--cap-color-text); background: var(--cap-header-bg); color: var(--cap-color-on-ink); } .cap-shell .cap-header-wrap--ink .cap-header .cap-header__logo img { filter: invert(1) brightness(1.6); } /* the sheets' own treatment of the one wordmark file */ .cap-shell .cap-header-wrap--ink .cap-header__link { color: var(--cap-color-on-ink-muted); } .cap-shell .cap-header-wrap--ink .cap-header__link.is-current { color: var(--cap-color-on-ink); } @media (hover: hover) { .cap-shell .cap-header-wrap--ink .cap-header__link:hover { color: var(--cap-color-on-ink); } } /* the violet pill's hover on the ink header: the design system's on-dark hover (.cap-btn--primary.cap-btn--on-ink, cream with ink text), not the violet button's ink, which vanished into the ink band. Mouse screens from 700 only; phones untouched (owner 2026-10-20; build-press.py keeps it out of the touch press, NO_PRESS). */ @media (hover: hover) and (min-width: 700px) { .cap-shell .cap-header-wrap--ink .cap-btn--primary:hover { background: var(--cap-color-bg); border-color: var(--cap-color-bg); color: var(--cap-color-text); } } .cap-shell .cap-header-wrap--ink .cap-header__burger { color: var(--cap-color-on-ink); } .cap-shell .cap-header-wrap--ink .cap-header__burger-bars span { background: var(--cap-color-on-ink); } .cap-shell .cap-header-wrap--ink .cap-header__cart { color: var(--cap-color-on-ink); } .cap-shell .cap-header-wrap--ink .cap-transit, .cap-shell .cap-header-wrap--ink .cap-transit:has(.cap-transit__in) { border-color: var(--cap-color-line-on-ink); } .cap-shell .cap-header-wrap--ink .cap-transit__in b, .cap-shell .cap-header-wrap--ink .cap-transit__in { color: var(--cap-color-on-ink); } .cap-shell .cap-header-wrap--ink .cap-transit__in .cap-transit__q { color: var(--cap-color-on-ink-muted); } @media (max-width: 699px) { .cap-shell .cap-header-wrap:not(.cap-header-wrap--ink) .cap-transit__in .cap-transit__q { color: var(--cap-color-caption); } } /* cream phone sheets (owner 2026-09-28): the quiet words in the caption grey; the ink header and desktop unchanged */ .cap-shell .cap-header-wrap--ink .cap-crumbs, .cap-shell .cap-header-wrap--ink .cap-crumbs__sep { color: var(--cap-color-on-ink-muted); } .cap-shell .cap-header-wrap--ink .cap-crumbs span { color: var(--cap-color-on-ink); } @media (hover: hover) { .cap-shell .cap-header-wrap--ink .cap-crumbs a:hover { color: var(--cap-color-on-ink); } } /* the checkout's header (D7): the logo and "Secure checkout", nothing else */ .cap-shell .cap-header-wrap--checkout { border-bottom: var(--cap-border-hairline) solid var(--cap-color-line-strong); } .cap-shell .cap-header__secure { margin-left: auto; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-muted); line-height: var(--cap-leading-ui); } @media (max-width: 359px) { .cap-shell .cap-header__secure-lead { display: none; } } @media (max-width: 699px) { .cap-shell .cap-header__secure { font-size: var(--cap-type-meta); letter-spacing: var(--cap-track-feature); color: var(--cap-color-caption); line-height: normal; } } /* 3c / 1n / 3d (28 Sep): 10 / .12em in the caption grey */ /* a 320 phone: only "Step 2 of 2" (owner 2026-09-26) */ /* one trail at every width (owner 2026-09-25): below 1024 the poster page stacks and carries its crumb in the content (poster-preview.css), so the header row gives way — never both; the rule under the header stays */ @media (max-width: 1279px) { .cap-shell .cap-transit:has(.cap-crumbs) .cap-crumbs { display: none; } } /* no breadcrumbs below 1280 (tablet sheets, owner 2026-10-01) — the trail stays in the page's schema for Google */ /* the back link that takes the crumb row's place on tablet (T9: "← All posters"); the phone keeps its in-page crumb */ .cap-shell .cap-back-row { display: none; } @media (min-width: 700px) and (max-width: 1279px) { .cap-shell .cap-back-row { display: flex; padding: var(--cap-space-field-x) var(--cap-page-x-mid); } .cap-shell .cap-back { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-eyebrow); line-height: normal; letter-spacing: var(--cap-track-meta); text-transform: uppercase; white-space: nowrap; color: var(--cap-color-text); text-decoration: none; transition: color var(--cap-ease); } @media (hover: hover) { .cap-shell .cap-back:hover { color: var(--cap-color-text); } } /* round 23 rule 2: grey → ink (CD rail pager), never violet */ } /* the menu triangle (owner 2026-10-02): none on desktop or tablet — the header's "Play ▾" and the tablet drawer's toggle carry no caret; the phone drawer keeps it, larger (above). The Play menu still opens on a tap / hover as before. */ .cap-shell .cap-header__caret { display: none; } @media (min-width: 700px) { .cap-shell .cap-drawer__caret { display: none; } /* with no triangle there is nothing to tap open, so the tablet drawer shows the Play links already open */ .cap-shell .cap-drawer__group .cap-drawer__toggle { display: none; } .cap-shell .cap-drawer__group .cap-drawer__sub[hidden] { display: flex; } .cap-shell .cap-drawer__group .cap-drawer__row a { color: var(--cap-color-text); } } /* The open menu panel holds the focus after a tap or a click (tabindex -1) — it is a focus holder, never drawn with a ring; the ✕ and every control inside keep the keyboard ring (owner 2026-10-02). */ .cap-shell .cap-drawer:focus, .cap-shell .cap-drawer:focus-visible { outline: none; }