/* ===================================================================== Dunia Anura — the twelve account pages. "Editorial Tenang." NO METAPHOR. The sketchbook belongs to species-detail and product-detail, where the content really is field notes. Here a person arrives to DO something, so every element is a part of a web page doing its own job: breadcrumb, index, h1, two paragraphs, two pill buttons, a live catalogue row, hairlines. Three tests this file has to keep passing: 1 NAMING — the whole design can be described without one noun that is not a UI part: .acc-h .acc-lede .acc-sub .acc-fields .acc-acts .acc-refs/.acc-ref .acc-cart .acc-foot. ("acc" is short for account, not for a thing.) 2 PAINT — nothing is drawn. No @font-face, no background-image, no gradient, no clip-path, no filter, no box-shadow on content, no dashed or dotted or 1.5px edge. Every rule in the area is 1px var(--color-divider), as border-top or as .acc-rule's background — one value, no exceptions. No pseudo-element draws anything: the two that exist are ::-webkit-scrollbar{display:none} and the chevron's rotation. The only images are real 44px catalogue photographs, which are information. 3 GROUND — the old body[data-area="akun"] paper retint is GONE. These pages sit on the site's own --color-bg, the same ground as products.html, so there is no second world to enter. COLOUR — every value is a DS token or a color-mix of one. Text never uses --color-neutral-600 (3.81:1 on #f7f9f4, fails AA); secondary text is --color-neutral-700 (5.87:1). 500/400/300 are used only for non-text marks. The single accent is the accent ramp: 700 for the active bar and the live numbers, 100 for the active wash and the "saved" pill, 800 for text on that wash. [hidden] — this project has shipped the same bug three times (site.css:1151 .si-slot, akun.css .dash-grid, and the memory note "hidden kalah oleh display inline"). LAW: every class in this file that sets `display` writes its [hidden]{display:none} twin on the very next line, whether or not anything toggles it today. This file loads AFTER css/site.css (build.py head_extra), so it wins at equal specificity and needs no !important. If you reach for one, an inline style was left in site-src/pages/*.html — remove that instead. ===================================================================== */ /* ── the frame ───────────────────────────────────────────────────────── 1240 / 5vw is the house measure (products.html header, .sp-grid, .sp-toolbar, .sp-more). 132px clears the fixed nav pill (top:14px, bottom ~82px). The bottom padding is deliberately large: the forest footer below is a ~700px illustrated slab, and the column has to visibly END before it starts. */ .dash { max-width: 1240px; margin: 0 auto; padding: 132px 5vw clamp(124px, 15vh, 176px); } /* 1040 is the composition: 216 rail + 64 gap + 760 column */ .dash > * { max-width: 1040px; margin-inline: auto; } /* the account area needs its own copy: site.css:594 scopes .sr-only to body[data-page="species"] */ .acc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* twelve index links precede the h1 in DOM order on every page, so there is one way past them */ .acc-skip { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .acc-skip:focus { position: static; width: auto; height: auto; clip-path: none; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 16px; padding: 0 18px; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-800); font: 600 14px/1 var(--font-body); text-decoration: none; } .dash-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-read); color: var(--color-neutral-700); margin: 0 auto 30px; } .dash-crumb a { color: var(--color-accent-700); text-decoration: none; } .dash-crumb a:hover { text-decoration: underline; } .dash-crumb b { color: var(--color-text); font-weight: 600; } .dash-grid { display: grid; grid-template-columns: 216px minmax(0, 1fr); column-gap: clamp(40px, 5vw, 64px); align-items: start; } .dash-grid[hidden] { display: none; } /* ── the gate ────────────────────────────────────────────────────────── A SIGNPOST, not access control — da-auth.js says so at length, and nothing private is ever rendered on any of the twelve. It ships hidden and the signed-in grid ships visible, because the signed-in case is the common one and it must be painted in the first frame. */ .dash-gate { padding: 8px 0 40px; } .dash-gate[hidden] { display: none; } .dash-gate p { margin: 0 0 26px; max-width: 50ch; font-size: 16px; line-height: 1.6; color: var(--color-neutral-700); } /* Was an h1. It is a signpost, not the page's subject, so it is a

that borrows the heading face — the specificity (0,2,0) beats .dash-gate p above, and font-family/weight/colour restate what ds/styles.css gives an h1. */ .dash-gate .dash-gate-h { margin: 0 0 14px; max-width: 24ch; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; color: var(--color-text); } .dash-gate .btn { min-height: 44px; padding-inline: 24px; font-size: 15px; } /* ── the index ───────────────────────────────────────────────────────── Twelve names, grouped, with the open one carrying a 2px accent bar — the only saturated colour above the fold, and the whole wayfinding system. It is baked into the markup by build.py, so it is there in the first painted frame; dashboard.js only reconciles it. max-height + overflow is copied from products.html:156's aside. Twelve rows plus four group labels plus the identity block is ~700px: without this, the last rows are unreachable on any viewport under ~830px — i.e. on a 1366x768 laptop. data-lenis-prevent (the house idiom, as on .sp-trail__stops and #smapHits) is what lets that overflow actually scroll while Lenis is running. */ .dash-rail { position: sticky; top: 100px; max-height: calc(100vh - 130px); overflow: auto; overscroll-behavior: contain; padding-right: 4px; background: none; border: 0; } .dash-rail__head { padding-bottom: 16px; margin-bottom: 10px; min-width: 0; border-bottom: 1px solid var(--color-divider); } .dash-rail__head[hidden] { display: none; } .dash-rail__head b { display: block; font: 600 15px/1.3 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-rail__head small { display: block; margin-top: 2px; font-size: var(--fs-read); color: var(--color-neutral-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-rail__nav { display: flex; flex-direction: column; } .dash-rail__nav[hidden] { display: none; } .dash-rail__nav a { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; border-left: 2px solid transparent; border-radius: 0; font: 500 14px/1.35 var(--font-body); color: var(--color-neutral-700); text-decoration: none; transition: color .16s ease, background-color .16s ease, border-color .16s ease; } .dash-rail__nav a .l { min-width: 0; } /* colour only, no transform: a 3px nudge on a 35px row makes a list of destinations read as decoration. The tint is .table tbody tr:hover's own value from ds/styles.css:233. */ .dash-rail__nav a:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 4%, transparent); border-left-color: var(--color-neutral-300); } .dash-rail__nav a.on { color: var(--color-text); font-weight: 700; background: var(--color-accent-100); border-left-color: var(--color-accent-700); } .dash-rail__group { display: block; padding: 13px 0 5px 16px; font: 700 var(--fs-read)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-700); } /* ten of the twelve pages can hold nothing. This marks the ones that genuinely do something today — the two forms, and the dashboard when the visitor's own basket has lines in it. A truthful state, not a fabricated count. */ .dash-rail__live { width: 5px; height: 5px; flex: none; margin-left: auto; border-radius: 50%; background: var(--color-accent-500); } .dash-rail__live[hidden] { display: none; } .dash-rail__key { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--color-divider); font: 600 var(--fs-read)/1.3 var(--font-body); color: var(--color-neutral-700); } .dash-rail__key[hidden] { display: none; } .dash-rail__key .dash-rail__live { margin-left: 0; } /* the mobile disclosure, styled only at <=940px */ .dash-rail__btn { display: none; } .dash-sheet__head, .dash-scrim { display: none; } /* the phone sheet's furniture; see the 940 block */ .dash-rail__btn[hidden] { display: none; } /* ── the column ──────────────────────────────────────────────────────── A flex column so the order of two blocks can change on a phone without a second copy of the markup. */ .dash-main { min-width: 0; max-width: 760px; display: flex; flex-direction: column; } .dash-main[hidden] { display: none; } .dash-main:focus { outline: none; } .acc-h { order: 1; margin: 0; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; } /* WHY it is empty, at standfirst scale, so "empty" is never a discovery */ .acc-lede { order: 2; margin: 14px 0 0; max-width: 52ch; font-size: clamp(16.5px, 1.5vw, 19.5px); line-height: 1.5; color: color-mix(in srgb, var(--color-text) 78%, transparent); text-wrap: pretty; } .acc-rule { order: 3; height: 1px; border: 0; margin: 28px 0 0; background: var(--color-divider); } /* WHAT would fill it, and WHICH facts — two plain sentences, never a column head, never a dashed box, never a zero. A hatched or ruled placeholder is what every site on earth shows while content is loading, and this must never be mistaken for a page that failed. */ .acc-sub { order: 4; margin: 24px 0 0; } .acc-fields { order: 5; margin: 10px 0 0; } .acc-sub, .acc-fields { max-width: 62ch; font-size: 15px; line-height: 1.62; color: var(--color-neutral-700); } /* WHERE TO GO NOW: exactly two, on all twelve. .btn computes to ~35px in the DS, below this site's own 44px floor (.sp-stop, .g-slot). */ .acc-acts { order: 6; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; } .acc-acts[hidden] { display: none; } .acc-acts .btn { min-height: 44px; padding-inline: 22px; text-decoration: none; } .acc-err { order: 4; margin: 16px 0 0; max-width: 62ch; padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-accent-100); color: var(--color-accent-800); font: 600 var(--fs-read)/1.4 var(--font-body); } .acc-err[hidden] { display: none; } .acc-empty { order: 5; } .acc-empty[hidden] { display: none; } .acc-orders { order: 7; margin-top: 28px; } .acc-orders[hidden] { display: none; } .acc-order { padding: 18px 0; border-top: 1px solid var(--color-divider); } .acc-order:first-child { border-top: 0; padding-top: 0; } .acc-order__top { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: baseline; } .acc-order__code { font: 700 15px/1.3 var(--font-body); } .acc-order__meta { font-size: var(--fs-read); color: var(--color-neutral-700); } .acc-order__st { font: 600 var(--fs-read)/1.3 var(--font-body); color: var(--color-accent-700); } .acc-order__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0 0; font-size: 14.5px; } .acc-order__item img, .acc-order__item .ph { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; } .acc-order__item .ph { display: flex; align-items: center; justify-content: center; background: var(--color-accent-100); font-family: var(--font-heading); } .acc-order__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-order__item small { display: block; color: var(--color-neutral-700); font-size: var(--fs-read); } .acc-order__item b { font-variant-numeric: tabular-nums; color: var(--color-neutral-700); } .acc-order__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .acc-order__acts .btn { min-height: 44px; padding-inline: 18px; cursor: pointer; text-decoration: none; } .acc-addr { padding: 16px 0; border-top: 1px solid var(--color-divider); } .acc-addr:first-child { border-top: 0; padding-top: 0; } .acc-addr b { display: block; font-size: 15px; } .acc-addr small { display: block; margin-top: 4px; font-size: var(--fs-read); color: var(--color-neutral-700); } .acc-addr .tag { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-800); font: 600 var(--fs-read)/1.4 var(--font-body); } #accAddrForm { order: 8; max-width: 520px; } .dash-field select.input, .dash-field textarea.input { width: 100%; min-height: 44px; box-sizing: border-box; } /* ── the visitor's own basket (dashboard only) ───────────────────────── localStorage.daCart is the only user-made state on this site and each line carries its own id, so this renders photographs and a true subtotal with no catalogue file loaded. Toggled with `hidden`, not :empty — a single indented newline is content to :empty, and that would leave a bordered ghost block. */ .acc-cart { order: 7; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--color-divider); } .acc-cart[hidden] { display: none; } .acc-cart__k { display: block; font: 700 var(--fs-read)/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-700); } .acc-cart ul { list-style: none; margin: 12px 0 0; padding: 0; } .acc-cart li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--color-divider); font-size: 14.5px; } .acc-cart li img { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; } .acc-cart li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-cart li b { font-weight: 600; font-size: 14px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums lining-nums; } .acc-cart__tot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid var(--color-divider); font-size: var(--fs-read); color: var(--color-neutral-700); } .acc-cart__tot b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; color: var(--color-accent-700); font-variant-numeric: tabular-nums lining-nums; } .acc-cart__hon { display: block; margin-top: 10px; font-size: var(--fs-read); color: var(--color-neutral-700); } .acc-cart .btn { margin-top: 14px; min-height: 44px; padding-inline: 22px; } /* ── one to three live catalogue rows ───────────────────────────────── Built at BUILD time from species-data.js (build.py plate()), so the stock line is exactly as fresh as every other count on the site and cannot rot into a lie. It is the page's proof that the shop behind it is not empty, it says in words that it belongs to the shop, and the ROW COUNT varies page to page — which is the only thing giving twelve otherwise identical pages a different silhouette. */ .acc-refs { order: 8; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--color-divider); } .acc-refs[hidden] { display: none; } .acc-refs__k { display: block; font: 700 var(--fs-read)/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-700); } .acc-ref { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 0; border-top: 1px solid var(--color-divider); color: inherit; text-decoration: none; } .acc-ref + .acc-ref { margin-top: 0; } .acc-ref img { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); object-fit: cover; } .acc-ref__t { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .acc-ref__n { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; transition: color .16s ease; } .acc-ref__m { display: block; width: 100%; font-size: var(--fs-read); color: var(--color-neutral-700); } .acc-ref__s { margin-left: auto; flex: none; white-space: nowrap; font: 600 var(--fs-read)/1.3 var(--font-body); color: var(--color-accent-700); font-variant-numeric: tabular-nums lining-nums; } .acc-ref__go { display: inline-block; transition: transform .16s ease; } .acc-ref:hover .acc-ref__n { color: var(--color-accent-700); } .acc-ref:hover .acc-ref__go { transform: translateX(3px); } .acc-foot { order: 9; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--color-divider); font-size: var(--fs-read); line-height: 1.5; color: var(--color-neutral-700); } /* every session is a demo session while da-auth.js CLIENT_ID is empty. It belongs here, with the other honest line about this preview, and not above the page title where the index used to carry it. */ .acc-foot__demo { display: block; } .acc-foot__demo[hidden] { display: none; } /* ── the two settings forms ─────────────────────────────────────────── The DS control, unchanged: pill, --color-surface fill, --color-divider border, accent caret and focus border, all inherited. The