/* ═══════════════════════════════════════════════════════════════════════ ALOE YAMI — one stylesheet for the whole site. THE IDEA This is not a skincare brand's website. It is a supplier's trade catalogue: a printed price list from a real business with real stock in Centurion. So the material language is ink, paper and brass. Green is the ink. Cream is the paper. Gold is used the way a printer uses a second colour — for rules, small caps and one number per page, never for whole surfaces. That restraint is what keeps gold from looking cheap. THE READER Mostly cheap Android phones, expensive data, read outdoors in the sun. So: a 17px floor, 48px tap targets, real contrast, and every decorative thing either costs nothing or is loaded only once the connection has said it can afford it. ═══════════════════════════════════════════════════════════════════════ */ :root{ color-scheme:light; /* ── ink ─────────────────────────────────────────────────────────── */ --ink:#101C16; --ink-2:#42544A; --ink-3:#6C7C72; /* ── the greens. green-dk is the ground everything dark sits on. ─── */ --green:#123524; --green-dk:#081810; --green-md:#1C4A31; --green-lt:#3E8259; --leaf:#6FAE82; /* ── brass. the second colour on the press. ──────────────────────── */ --brass:#8E6E24; --brass-lt:#D9B65A; --brass-pale:#F1E3BC; /* ── paper ───────────────────────────────────────────────────────── */ --cream:#FAF6EC; --paper:#FFFDF7; --sand:#EBDFC3; /* ── states ──────────────────────────────────────────────────────── */ --good:#146B42; --good-bg:#E4F0E8; --warn:#8A6408; --warn-bg:#FBF0D6; --bad:#A93726; --bad-bg:#FAE9E5; /* ── rules. hairlines do most of the layout work on this site. ───── */ --line:rgba(16,28,22,.14); --line-2:rgba(16,28,22,.08); --line-dk:rgba(250,246,236,.16); --line-brass:rgba(217,182,90,.34); --ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --ff-d:"Fraunces",Georgia,"Times New Roman",serif; --r:14px; --r-sm:10px; --r-lg:22px; --tap:48px; --hdr:76px; --gutter:clamp(1.15rem,4.5vw,3.5rem); --maxw:1240px; --ease:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.16,1,.3,1); --sh-sm:0 1px 2px rgba(16,28,22,.05),0 4px 12px rgba(16,28,22,.05); --sh-md:0 2px 6px rgba(16,28,22,.06),0 14px 32px rgba(16,28,22,.09); --sh-lg:0 28px 64px rgba(8,24,16,.2); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--cream);color:var(--ink); font-family:var(--ff);font-size:1.0625rem;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } body.is-locked{overflow:hidden} /* barely-there paper grain so the flats do not read as flat */ body::before{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img{max-width:100%;height:auto;display:block} button,input,textarea,select{font:inherit;color:inherit} a{color:inherit} table{border-collapse:collapse;width:100%} [hidden]{display:none!important} :focus-visible{outline:3px solid var(--brass-lt);outline-offset:3px;border-radius:6px} ::selection{background:var(--green);color:var(--cream)} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .tnum{font-variant-numeric:tabular-nums lining-nums} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:var(--cream);padding:.85rem 1.25rem;border-radius:0 0 8px 0;font-weight:600} .skip:focus{left:0} /* ═══════════════════════════════════════════════════════════════════════ TYPE Fraunces carries the brand. The SOFT and WONK axes are the reason it is here and not Playfair: they round the terminals and kick the italic sideways, which is what keeps a serif from reading as corporate. ═══════════════════════════════════════════════════════════════════════ */ .d{ font-family:var(--ff-d);font-weight:600;line-height:1.04; letter-spacing:-.022em;text-wrap:balance; font-variation-settings:"SOFT" 22,"WONK" 1,"opsz" 120; } .d em{font-style:italic;font-weight:500;margin-right:.06em;font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 120} h1,h2,h3,h4{margin:0} .h1{font-size:clamp(2.5rem,1.4rem + 4.4vw,4.6rem)} .h2{font-size:clamp(1.95rem,1.3rem + 2.6vw,3.1rem)} .h3{font-size:clamp(1.2rem,1.06rem + .6vw,1.5rem);line-height:1.2;font-variation-settings:"SOFT" 22,"WONK" 0,"opsz" 40} .h4{font-size:1.0625rem;line-height:1.3} /* money and counts. big Fraunces numerals, always tabular. */ .fig{ font-family:var(--ff-d);font-weight:600;line-height:.95;letter-spacing:-.03em; font-variant-numeric:tabular-nums lining-nums; font-variation-settings:"SOFT" 10,"WONK" 0,"opsz" 144; } .eyebrow{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brass)} .lede{font-size:clamp(1.09rem,1.02rem + .38vw,1.3rem);line-height:1.55;color:var(--ink-2);max-width:54ch;text-wrap:pretty} .muted{color:var(--ink-2)} .small{font-size:.9375rem} .xs{font-size:.84rem;line-height:1.5} p{text-wrap:pretty} /* ═══════════════════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════════════════ */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .wrap--narrow{max-width:840px} .wrap--wide{max-width:1440px} .section{padding-block:clamp(3.5rem,7.5vw,6.5rem);position:relative;z-index:2} .section--tight{padding-block:clamp(2.5rem,5vw,4rem)} section[id],div[id]{scroll-margin-top:calc(var(--hdr) + 16px)} .center{text-align:center;margin-inline:auto} /* ── the section header ─────────────────────────────────────────────── Numbered, with a brass rule running from the label out to the far edge. One component, used on every section, and it is the single detail that stops the page reading as a stack of unrelated boxes. */ .sec-head{margin-bottom:clamp(1.9rem,3.6vw,3rem);max-width:100%} .sec-head__tag{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem} .sec-head__tag .eyebrow{white-space:nowrap} .sec-head__tag .n{ font-family:var(--ff-d);font-size:.82rem;font-weight:700;color:var(--brass-lt); font-variant-numeric:tabular-nums;letter-spacing:.06em;flex:none; } .sec-head__tag::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-brass),transparent)} .sec-head h2{max-width:19ch} .sec-head .lede{margin:1.1rem 0 0} .sec-head--wide h2{max-width:26ch} /* on dark grounds */ .on-dark{color:var(--cream)} .on-dark .eyebrow{color:var(--brass-lt)} .on-dark .lede{color:rgba(250,246,236,.76)} .on-dark .muted{color:rgba(250,246,236,.66)} /* ── the brass rule, as a standalone ─────────────────────────────────── */ .rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,var(--line-brass),rgba(217,182,90,.05))} /* ═══════════════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; min-height:var(--tap);padding:.85rem 1.7rem;border-radius:999px; border:2px solid var(--green);background:var(--green);color:var(--cream); font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none; cursor:pointer;white-space:nowrap;box-shadow:var(--sh-sm); transition:background .2s var(--ease),border-color .2s,color .2s,transform .2s var(--ease),box-shadow .2s; } .btn:hover{background:var(--green-dk);border-color:var(--green-dk);transform:translateY(-2px);box-shadow:var(--sh-md)} .btn:active{transform:translateY(0)} .btn--ghost{background:transparent;color:var(--green);border-color:var(--line);box-shadow:none} .btn--ghost:hover{background:rgba(18,53,36,.06);border-color:var(--green);color:var(--green);box-shadow:none} .btn--gold{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--green-dk)} .btn--gold:hover{background:#E9C86E;border-color:#E9C86E;color:var(--green-dk)} .btn--cream{background:var(--cream);border-color:var(--cream);color:var(--green-dk)} .btn--cream:hover{background:#fff;border-color:#fff;color:var(--green-dk)} .btn--wa{background:#1FA855;border-color:#1FA855;color:#fff} .btn--wa:hover{background:#178443;border-color:#178443} .btn--danger{background:var(--bad);border-color:var(--bad)} .btn--danger:hover{background:#8A2C1D;border-color:#8A2C1D} .btn--lg{font-size:1.09rem;padding:1.05rem 2.1rem} .btn--sm{min-height:40px;padding:.5rem 1.1rem;font-size:.9375rem;border-width:1.5px} .btn--wide{width:100%} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} .btn svg{width:19px;height:19px;flex:none;fill:currentColor} /* on a dark ground the ghost has to be the light one */ .on-dark .btn--ghost{color:var(--cream);border-color:rgba(250,246,236,.3)} .on-dark .btn--ghost:hover{background:rgba(250,246,236,.1);border-color:rgba(250,246,236,.6);color:var(--cream)} .link{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:rgba(142,110,36,.5)} .link:hover{text-decoration-color:var(--brass-lt)} /* an action that is deliberately quieter than a button */ .tlink{ display:inline-flex;align-items:center;gap:.55rem;min-height:44px; font-weight:600;font-size:.95rem;text-decoration:none;color:var(--green); } .tlink::after{content:"";width:1.1rem;height:1.5px;background:currentColor;transition:width .3s var(--ease)} .tlink:hover::after{width:2rem} .on-dark .tlink{color:var(--brass-lt)} /* ═══════════════════════════════════════════════════════════════════════ SURFACES ═══════════════════════════════════════════════════════════════════════ */ .card{ background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r); padding:clamp(1.2rem,2.2vw,1.85rem);box-shadow:var(--sh-sm);min-width:0; position:relative;overflow:hidden; } /* a brass hairline that draws across the top on hover */ .card--live::before{ content:"";position:absolute;left:0;top:0;height:2px;width:100%; background:linear-gradient(90deg,var(--brass-lt),rgba(217,182,90,0)); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease); } .card--live:hover::before{transform:scaleX(1)} .grid{display:grid;gap:clamp(1rem,2vw,1.5rem)} .g-2{grid-template-columns:repeat(2,minmax(0,1fr))} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} .g-4{grid-template-columns:repeat(4,minmax(0,1fr))} .pill{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem;border-radius:999px;font-size:.8125rem;font-weight:700;background:var(--brass-pale);color:#6A5111} .pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .pill--good{background:var(--good-bg);color:var(--good)} .pill--warn{background:var(--warn-bg);color:var(--warn)} .pill--bad{background:var(--bad-bg);color:var(--bad)} .pill--quiet{background:#EDEADF;color:var(--ink-2)} /* the savanna artwork, masked so it takes brand colour */ .savanna{ width:100%;aspect-ratio:736/180;pointer-events:none; background:linear-gradient(180deg,#B9A375 0%,#9C8757 42%,#6E7A57 100%); -webkit-mask:url("../img/savanna.webp") no-repeat bottom center/100% 100%; mask:url("../img/savanna.webp") no-repeat bottom center/100% 100%; opacity:.46; } .savanna--light{background:var(--cream);opacity:.07} .savanna--green{background:var(--green-lt);opacity:.14} .savanna--brass{background:var(--brass-lt);opacity:.12} /* ═══════════════════════════════════════════════════════════════════════ PHOTOGRAPHY .plate is the frame around a product photo: rounded, bordered, the brand mark ghosted faintly into it. It used to render a sand-toned stand-in — a mood shot of stone or dry grass — until the client's own jar photography arrived; that placeholder state is gone now, along with the two stills it drew from. ═══════════════════════════════════════════════════════════════════════ */ .plate{ position:relative;overflow:hidden;border-radius:var(--r);isolation:isolate; background:radial-gradient(130% 110% at 18% 0%, #F7F0DE 0%, #EBDDBF 55%, #DECCA4 100%); border:1px solid var(--line-2); } .plate::after{content:"";position:absolute;inset:0;background:url("../img/logo-mark.png") no-repeat center/34% auto;opacity:.085} .plate__cap{ position:absolute;left:0;right:0;bottom:0;z-index:3;padding:2.2rem 1.1rem .9rem; font-size:.76rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase; color:rgba(255,253,247,.92); background:linear-gradient(180deg,transparent,rgba(8,24,16,.6)); } .plate__img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover} .plate--4x5{aspect-ratio:4/5} .plate--1x1{aspect-ratio:1/1} .plate--3x2{aspect-ratio:3/2} .plate--3x4{aspect-ratio:3/4} /* ═══════════════════════════════════════════════════════════════════════ VIDEO SCENES A .vscene is a band with moving footage behind it. The poster image is always in the markup, so the band is correct on the very first paint and stays correct if media.js decides the connection cannot afford the video. Never the other way round. ═══════════════════════════════════════════════════════════════════════ */ .vscene{position:relative;isolation:isolate;overflow:clip;background:var(--green-dk)} .vscene__media{position:absolute;inset:0;z-index:0} .vscene__media img,.vscene__media video{width:100%;height:100%;object-fit:cover;display:block} .vscene__media video{position:absolute;inset:0;opacity:0;transition:opacity 1s ease} .vscene__media video.is-on{opacity:1} /* a very slow drift, so a short loop never feels like a short loop */ .vscene__media img,.vscene__media video{animation:drift 34s var(--ease) infinite alternate} @keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.12) translate3d(-1.2%,-1%,0)}} .vscene__scrim{position:absolute;inset:0;z-index:1;pointer-events:none} .vscene__in{position:relative;z-index:2} /* the live dot, used on the hero status line */ @keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}} /* ═══════════════════════════════════════════════════════════════════════ HEADER One rule: the header is always dark green with cream on it. On the home page it starts transparent over the hero footage and settles into the green as you scroll. There is no third state, which is why the logo and the nav never have to change colour mid-scroll. ═══════════════════════════════════════════════════════════════════════ */ .hdr{position:fixed;top:0;left:0;right:0;z-index:60;--h:76px;color:var(--cream)} .hdr.is-stuck{--h:62px} .hdr::before{ content:"";position:absolute;inset:0;z-index:0;background:rgba(8,24,16,.93); -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--line-brass); opacity:1;transition:opacity .35s var(--ease); } /* over footage: no plate, just a soft top-down wash for legibility */ .hdr--over::before{opacity:0} .hdr--over::after{ content:"";position:absolute;left:0;right:0;top:0;height:230%;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(8,24,16,.6),rgba(8,24,16,0)); transition:opacity .35s var(--ease); } .hdr--over.is-stuck::before{opacity:1} .hdr--over.is-stuck::after{opacity:0} .hdr__in{position:relative;z-index:1;display:flex;align-items:center;gap:1rem;height:var(--h);transition:height .35s var(--ease)} .brand{display:block;flex:none;line-height:0;text-decoration:none} .brand img{height:calc(var(--h) * .5);width:auto;transition:height .35s var(--ease)} .nav{display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem);margin-left:auto} .nav a{ text-decoration:none;font-size:.97rem;font-weight:500;color:rgba(250,246,236,.82); position:relative;padding-block:.45rem;transition:color .25s var(--ease); } .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--brass-lt);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .nav a:hover{color:var(--cream)} .nav a:hover::after,.nav a.is-here::after{transform:scaleX(1)} .nav a.is-here{color:var(--cream)} .hdr__act{display:flex;align-items:center;gap:.6rem;margin-left:clamp(.75rem,2vw,1.6rem)} .hdr__cta{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--green-dk)} .hdr__cta:hover{background:#E9C86E;border-color:#E9C86E;color:var(--green-dk)} .burger{display:none;width:46px;height:46px;flex:none;border-radius:50%;cursor:pointer;border:1.5px solid rgba(250,246,236,.32);background:transparent;position:relative} .burger i{position:absolute;left:12.5px;width:18px;height:1.5px;background:var(--cream);border-radius:2px;transition:transform .35s var(--ease),opacity .2s} .burger i:nth-child(1){top:16px} .burger i:nth-child(2){top:22px} .burger i:nth-child(3){top:28px} .burger.is-open i:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger.is-open i:nth-child(2){opacity:0} .burger.is-open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .mobnav{ position:fixed;inset:0;z-index:55;background:var(--green-dk);color:var(--cream); padding:calc(var(--hdr) + 1.25rem) var(--gutter) 2rem; display:flex;flex-direction:column;justify-content:center; opacity:0;pointer-events:none;transition:opacity .3s var(--ease); } .mobnav::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.09; background:linear-gradient(180deg,var(--brass-lt),transparent 45%); } .mobnav.is-open{opacity:1;pointer-events:auto} .mobnav a,.mobnav__foot{position:relative;z-index:1} .mobnav a{ font-family:var(--ff-d);font-size:clamp(1.75rem,7.5vw,2.4rem);font-weight:600; font-variation-settings:"SOFT" 22,"WONK" 1,"opsz" 90; text-decoration:none;padding-block:.62rem;border-bottom:1px solid var(--line-dk); display:flex;align-items:baseline;justify-content:space-between;gap:1rem; opacity:0;transform:translateY(14px); } .mobnav.is-open a{opacity:1;transform:none;transition:opacity .45s var(--ease) calc(55ms * var(--i,0)),transform .55s var(--ease) calc(55ms * var(--i,0))} .mobnav a::after{content:attr(data-n);font-family:var(--ff);font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--brass-lt);opacity:.75} .mobnav__foot{margin-top:2rem;display:grid;gap:.45rem;color:rgba(250,246,236,.6);font-size:.95rem} .mobnav__foot a{font-family:var(--ff);font-size:1.0625rem;border:0;padding:0;color:var(--cream);opacity:1;transform:none;display:inline-block} .mobnav__foot a::after{content:none} /* ═══════════════════════════════════════════════════════════════════════ PAGE HEAD (inner pages) — the masthead. Every page that is not the home page used to open the same way: an eyebrow, a heading, a paragraph, a rule, all on flat cream. Correct, and completely silent. The home page opens on moving footage, so the moment a reader left it the site stopped speaking. This is the reply, and it is built out of paper rather than pictures, because these pages are read on prepaid data and a second video is not a thing to spend it on. It is set the way a trade catalogue opens a section: a running head the catalogue's name, and which sheet this is a foliation numeral set enormous, ghosted, bled off the right the title on the left, wide measure a key of hard facts on the right, hairline-ruled, tabular The facts column is the part that does the real work. Every inner page has four or five things a reader wants before any prose — the size, the price, the hours, the number of questions — and putting them in the head means the page has answered something before it has asked for any attention. ═══════════════════════════════════════════════════════════════════════ */ .pagehead{ position:relative;isolation:isolate;overflow:hidden; padding-top:calc(var(--hdr) + clamp(1.1rem,2.6vw,1.9rem)); padding-bottom:clamp(1.9rem,3.6vw,2.9rem); background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 78%); border-bottom:1px solid var(--line-brass); } /* the wash: warmth pooled in the top-right corner, under the numeral, so the band reads as a sheet with light on it rather than as a flat panel with a rule under it */ .pagehead::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(120% 90% at 88% -10%,rgba(217,182,90,.17),rgba(217,182,90,0) 62%); } /* ── the running head ──────────────────────────────────────────────── */ .pagehead__run{ display:flex;align-items:center;gap:1rem; padding-bottom:.85rem;margin-bottom:clamp(1.6rem,3.2vw,2.4rem); border-bottom:1px solid var(--line-2); font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:var(--ink-3); } .pagehead__run b{font-weight:700;color:var(--ink-2)} .pagehead__run i{flex:1;height:1px;background:var(--line-2);font-style:normal} .pagehead__run span{color:var(--brass);font-variant-numeric:tabular-nums;white-space:nowrap} /* ── the foliation numeral ───────────────────────────────────────────── The sheet number again, this time at 22rem, ghosted to a whisper and allowed to run off the right edge. It is the one purely typographic ornament on the site and it is the reason the band has a top-right corner worth looking at. Hidden below 900px, where there is no room for it to be an ornament rather than an obstruction. */ .pagehead__fol{ position:absolute;z-index:-1;top:calc(var(--hdr) - 1.2rem);right:-.16em; margin:0;font-family:var(--ff-d);font-weight:600;line-height:.78; font-size:clamp(9rem,21vw,17rem);letter-spacing:-.05em; font-variant-numeric:tabular-nums lining-nums; font-variation-settings:"SOFT" 10,"WONK" 0,"opsz" 144; color:var(--brass);opacity:.075;pointer-events:none;user-select:none; } /* ── the two columns ───────────────────────────────────────────────── */ .pagehead__grid{ display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:clamp(1.75rem,4vw,4.5rem);align-items:start; } .pagehead .eyebrow{margin-bottom:.9rem} .pagehead h1{margin-bottom:1.15rem;max-width:15ch} .pagehead .lede{max-width:52ch} .pagehead__rule{margin-top:clamp(1.75rem,3.5vw,2.75rem)} /* ── the key of hard facts ───────────────────────────────────────────── Hairline-ruled, label left, value right, tabular. The same object as the .specs list on the balm page, promoted into the head, because a fact a reader wanted anyway is worth more at the top of a page than a second sentence of prose is. */ .pagehead__facts{ margin:0;display:grid;border-top:1px solid var(--line-brass); /* it hangs off the top of the measure, level with the eyebrow */ margin-top:.35rem; } .pagehead__facts > div{ display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem; padding:.78rem 0;border-bottom:1px solid var(--line-2); } .pagehead__facts dt{ margin:0;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-3);white-space:nowrap; } .pagehead__facts dd{ margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums lining-nums; max-width:22ch;line-height:1.4; } /* one fact per page is allowed to be the figure. Fraunces, brass, big. */ .pagehead__facts .is-fig{ font-family:var(--ff-d);font-size:1.5rem;font-weight:600;line-height:1;color:var(--brass); font-variation-settings:"SOFT" 10,"WONK" 0,"opsz" 120; } /* the key sets itself, a row at a time, just behind the heading's wipe. A CSS animation and not a .rv class, for the same reason the heading is: this is the top of the page and it must not wait on an observer, on a frame callback, or on a module finishing. With no script at all it still runs; with reduced motion the global rule collapses it. */ .pagehead__facts > div{ animation:factin .6s var(--ease-out) both; animation-delay:calc(.34s + 65ms * var(--i,0)); } .pagehead__facts > div:nth-child(1){--i:0} .pagehead__facts > div:nth-child(2){--i:1} .pagehead__facts > div:nth-child(3){--i:2} .pagehead__facts > div:nth-child(4){--i:3} .pagehead__facts > div:nth-child(5){--i:4} @keyframes factin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} @media (max-width:900px){ .pagehead__grid{grid-template-columns:1fr;gap:clamp(1.5rem,4vw,2.25rem)} .pagehead__fol{display:none} .pagehead h1,.pagehead .lede{max-width:none} .pagehead__facts{margin-top:0} } @media (max-width:560px){ .pagehead__run{font-size:.66rem;letter-spacing:.12em} /* the running head's middle rule is the first thing to go: at this width the two labels want the whole line to themselves */ .pagehead__run i{display:none} .pagehead__run{justify-content:space-between} } /* ═══════════════════════════════════════════════════════════════════════ THE LEDGER — a run of hard facts divided by hairlines. Used across the foot of the hero, and again as a standalone strip. ═══════════════════════════════════════════════════════════════════════ */ .ledger{display:grid;grid-template-columns:repeat(4,1fr)} .ledger>div{padding:1.15rem clamp(.7rem,1.8vw,1.6rem);position:relative;min-width:0} .ledger>div+div::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:1px;background:var(--line-brass)} .ledger b{ display:block;font-family:var(--ff-d);font-weight:600;color:var(--brass-lt); font-size:clamp(1.2rem,.95rem + .85vw,1.6rem);line-height:1.05;margin-bottom:.3rem; font-variant-numeric:tabular-nums;font-variation-settings:"SOFT" 10,"WONK" 0,"opsz" 100; } .ledger span{display:block;font-size:.85rem;line-height:1.4;color:rgba(250,246,236,.7)} .ledger--ink b{color:var(--green)} .ledger--ink span{color:var(--ink-2)} .ledger--ink>div+div::before{background:var(--line)} /* the trust strip: the same idea on a solid green ground */ .trust{background:var(--green);color:var(--cream);position:relative;z-index:3} .trust__in{display:grid;grid-template-columns:repeat(4,1fr);padding-block:1.6rem;gap:1px} .trust__in>div{padding-inline:clamp(.6rem,1.6vw,1.5rem);position:relative} .trust__in>div+div::before{content:"";position:absolute;left:0;top:.15rem;bottom:.15rem;width:1px;background:var(--line-brass)} .trust b{display:block;font-family:var(--ff-d);font-size:1.35rem;font-weight:600;margin-bottom:.15rem;color:var(--brass-lt)} .trust span{font-size:.9375rem;color:rgba(250,246,236,.74);line-height:1.45;display:block} /* ═══════════════════════════════════════════════════════════════════════ PAYMENT BADGES ═══════════════════════════════════════════════════════════════════════ */ .pays{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .pays__lab{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-right:.35rem} .pay{ height:32px;width:50px;flex:none;border-radius:5px;background:#fff; border:1px solid var(--line);display:grid;place-items:center;padding:5px; box-shadow:0 1px 2px rgba(16,28,22,.06); } .pay svg{width:100%;height:100%} /* PayFast's mark is a wordmark, not a square icon, so it gets a wider badge rather than being squeezed into the same box as the card marks */ .pay--wide{width:70px} .pays--dark .pay{background:rgba(250,246,236,.96);border-color:transparent} .pays--dark .pays__lab{color:rgba(250,246,236,.55)} /* ═══════════════════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════════════════ */ .field{display:grid;gap:.4rem;margin-bottom:1.15rem} .field > label{font-size:.9375rem;font-weight:600} .field .hint{font-size:.875rem;color:var(--ink-3);line-height:1.45} .field input,.field textarea,.field select{ width:100%;min-height:var(--tap);background:var(--paper); border:1.5px solid var(--line);border-radius:var(--r-sm); padding:.78rem .95rem;font-size:1.0625rem; transition:border-color .18s,background .18s,box-shadow .18s; } .field textarea{min-height:120px;resize:vertical;font-family:var(--ff);line-height:1.55} .field select{ appearance:none;cursor:pointer;padding-right:2.6rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2342544A' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:13px; } .field input:focus,.field textarea:focus,.field select:focus{ outline:0;border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(18,53,36,.08); } .field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.7} .field.err input,.field.err textarea,.field.err select{border-color:var(--bad);background:var(--bad-bg)} .field .msg{display:none;font-size:.875rem;font-weight:600;color:var(--bad)} .field.err .msg{display:block} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem} .notice{border-radius:var(--r-sm);padding:.95rem 1.15rem;font-size:.9375rem;line-height:1.55;display:flex;gap:.7rem;align-items:flex-start} .notice svg{width:19px;height:19px;flex:none;margin-top:.2rem;fill:none;stroke:currentColor;stroke-width:2} .notice--info{background:var(--brass-pale);color:#6A5111} .notice--good{background:var(--good-bg);color:var(--good)} .notice--bad{background:var(--bad-bg);color:var(--bad)} /* ═══════════════════════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════════════════════ */ .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .tbl{font-size:.9375rem;min-width:600px} .tbl th{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);padding:.75rem .7rem;border-bottom:1px solid var(--line);white-space:nowrap} .tbl td{padding:.85rem .7rem;border-bottom:1px solid var(--line-2);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl tbody tr:hover{background:rgba(235,223,195,.3)} .tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .tbl .who b{display:block;font-weight:600} .tbl .who span{font-size:.875rem;color:var(--ink-3)} /* ═══════════════════════════════════════════════════════════════════════ TICK LIST ═══════════════════════════════════════════════════════════════════════ */ .ticks{margin:1.5rem 0 1.9rem;padding:0;list-style:none;display:grid;gap:.85rem} .ticks li{position:relative;padding-left:2.1rem;color:var(--ink-2)} .ticks li::before{ content:"";position:absolute;left:0;top:.4em;width:19px;height:19px;border-radius:50%; background:var(--good-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146B42' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat; } .on-dark .ticks li{color:rgba(250,246,236,.78)} .on-dark .ticks li::before{ background-color:rgba(217,182,90,.16); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B65A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════════════════════════════════ FAQ ═══════════════════════════════════════════════════════════════════════ */ .faq{display:grid;max-width:840px} .faq__item{border-bottom:1px solid var(--line)} .faq__item:first-child{border-top:1px solid var(--line)} .faq__item summary{ display:flex;align-items:center;justify-content:space-between;gap:1.25rem; padding:1.2rem 0;cursor:pointer;list-style:none;min-height:var(--tap); font-family:var(--ff-d);font-size:clamp(1.08rem,1rem + .4vw,1.32rem);font-weight:600;line-height:1.35; font-variation-settings:"SOFT" 22,"WONK" 0,"opsz" 40; transition:color .2s; } .faq__item summary::-webkit-details-marker{display:none} /* the main ink green, on hover and while the answer is open — a beat of colour against a page that otherwise runs cream and paper the whole way down, and a plain confirmation of which question you're on */ .faq__item summary:hover{color:var(--green)} .faq__item[open] summary{color:var(--green)} .faq__item summary i{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);position:relative;transition:background .25s,border-color .25s,transform .4s var(--ease)} .faq__item summary i::before,.faq__item summary i::after{content:"";position:absolute;left:50%;top:50%;background:var(--green);transition:transform .3s var(--ease)} .faq__item summary i::before{width:11px;height:1.5px;transform:translate(-50%,-50%)} .faq__item summary i::after{width:1.5px;height:11px;transform:translate(-50%,-50%)} .faq__item[open] summary i{background:var(--green);border-color:var(--green);transform:rotate(180deg)} .faq__item[open] summary i::before,.faq__item[open] summary i::after{background:var(--cream)} .faq__item[open] summary i::after{transform:translate(-50%,-50%) scaleY(0)} .faq__a p{margin:0 0 1.3rem;max-width:64ch;color:var(--ink-2);line-height:1.65} /* ═══════════════════════════════════════════════════════════════════════ DOCUMENT PAGES — privacy, terms, returns, disclaimer, army terms. The policy sheets. Same masthead as every other inner page, then a plain reading column set to a book measure, with a contents list pinned out to the left the way the help groups pin their headings. Legal copy on prepaid data wants to be text and nothing else: no cards, no panels, hairlines between clauses and one brass numeral per heading, exactly the rhythm the section heads use elsewhere. ═══════════════════════════════════════════════════════════════════════ */ .doc{ display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); gap:clamp(1.5rem,5vw,4.5rem);align-items:start; padding-block:clamp(2rem,4vw,3.25rem) clamp(3rem,6vw,5rem); } /* ── the contents list ─────────────────────────────────────────────── */ .doc__toc{position:sticky;top:calc(var(--hdr) + 1.75rem);align-self:start} .doc__toc > p{ margin:0 0 .9rem;font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3); } .doc__toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:grid} .doc__toc li{counter-increment:toc} .doc__toc a{ display:grid;grid-template-columns:1.8rem 1fr;gap:.55rem;align-items:baseline; padding:.6rem 0;border-top:1px solid var(--line-2); font-size:.9rem;line-height:1.4;color:var(--ink-2);text-decoration:none; transition:color .18s; } .doc__toc li:first-child a{border-top:0} .doc__toc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--ff-d);font-size:.76rem;font-weight:700;color:var(--brass-lt); font-variant-numeric:tabular-nums; } .doc__toc a:hover{color:var(--green)} .doc__toc a.is-here{color:var(--green);font-weight:600} /* ── the reading column ────────────────────────────────────────────── */ .doc__body{max-width:70ch;min-width:0} .doc__body > section{ padding-top:clamp(1.75rem,3.5vw,2.6rem);margin-top:clamp(1.75rem,3.5vw,2.6rem); border-top:1px solid var(--line); } .doc__body > section:first-of-type{border-top:0;margin-top:0;padding-top:0} .doc__body h2{ font-family:var(--ff-d);font-weight:600;line-height:1.15;letter-spacing:-.01em; font-size:clamp(1.35rem,1.1rem + .85vw,1.8rem); font-variation-settings:"SOFT" 22,"WONK" 1,"opsz" 50; margin:0 0 1rem;display:flex;gap:.85rem;align-items:baseline; } .doc__body h2 .doc__n{ flex:none;font-size:.8rem;font-weight:700;color:var(--brass-lt); font-variant-numeric:tabular-nums;letter-spacing:.04em; } .doc__body h3{font-size:1.0625rem;line-height:1.3;font-weight:700;margin:1.9rem 0 .55rem;color:var(--ink)} .doc__body p{margin:0 0 1rem;color:var(--ink-2);line-height:1.7} .doc__body ul,.doc__body ol{margin:0 0 1.15rem;padding-left:1.4rem;color:var(--ink-2);line-height:1.7} .doc__body li{margin-bottom:.5rem} .doc__body li::marker{color:var(--brass)} .doc__body strong{color:var(--ink);font-weight:700} .doc__body a:not(.btn){ color:var(--green);font-weight:600;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:2px; text-decoration-color:rgba(142,110,36,.5); } .doc__body a:not(.btn):hover{text-decoration-color:var(--brass-lt)} .doc__body dl{margin:0 0 1.15rem;display:grid} .doc__body dt{font-weight:700;color:var(--ink);margin-top:1rem} .doc__body dd{margin:.2rem 0 0;color:var(--ink-2);line-height:1.7} .doc__body .notice{margin:1.35rem 0} /* the sibling-policy list every sheet ends on */ .doc__also{ margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line-brass); } .doc__also p{margin:0 0 .75rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .doc__also ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem} .doc__also li{margin:0} @media (max-width:900px){ .doc{grid-template-columns:1fr;gap:0} .doc__toc{ position:static;margin-bottom:2rem;padding-bottom:.5rem; border-bottom:1px solid var(--line); } .doc__body{max-width:none} } /* ═══════════════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════════════ */ .foot{background:var(--green-dk);color:rgba(250,246,236,.72);position:relative;overflow:hidden;border-top:1px solid var(--line-brass)} .foot__savanna{position:absolute;left:0;right:0;bottom:0;z-index:0;height:auto} .foot__in{position:relative;z-index:1;padding-block:clamp(2.75rem,5vw,4.25rem)} .foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.25rem;border-bottom:1px solid var(--line-dk)} .foot__brand img{width:min(220px,76%);margin-bottom:1.1rem} .foot__brand p{margin:0 0 1.35rem;max-width:34ch;font-size:.9375rem;line-height:1.6} .foot h4{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:1rem} .foot ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem} .foot a{text-decoration:none;font-size:.9375rem;transition:color .2s} .foot a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-brass)} .foot__bottom{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;padding-top:1.5rem;font-size:.82rem;color:rgba(250,246,236,.46)} /* ═══════════════════════════════════════════════════════════════════════ THE GATE — the door, for both portals. Signing in was the weakest screen on the site: a bare form floating on an empty cream page, on the portal; a 390px card centred on grey, on the dashboard. Both are the moment somebody arrives, and both said nothing at all about whose door it is. So the door gets two halves. The form keeps the paper, because a form is a thing you fill in and it belongs on a sheet. Beside it, a full dark panel with the horizon in it carries the name, one line of copy, and — this is the part that earns the space — the short list of what is actually behind the door. Nobody signs in for the pleasure of it. Telling them what they are about to get is the only honest thing to put in that half. On a phone the panel does not disappear: it moves below the form and shortens. The person came to sign in, so the form goes first; the panel is what they scroll into afterwards, and it is still there. ═══════════════════════════════════════════════════════════════════════ */ .gate{ --gate-top:0px; display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); min-height:100vh;min-height:100svh;align-items:stretch; } /* ── the paper half ────────────────────────────────────────────────── */ .gate__form{ display:flex;flex-direction:column;justify-content:center; padding:calc(var(--gate-top) + clamp(2.5rem,6vw,4.5rem)) var(--gutter) clamp(2.5rem,6vw,4.5rem); background:linear-gradient(180deg,var(--paper),var(--cream) 60%); } /* the measure. 460px is a shade wider than the 390px card it replaces — enough that a two-up tab pair does not crowd, not so wide that a single input looks like a search bar */ .gate__in{width:100%;max-width:460px;margin-inline:auto} .gate__mark{width:52px;margin:0 0 1.5rem} .gate__form h1{margin:1.1rem 0 .9rem;font-size:clamp(2.1rem,1.5rem + 2.4vw,3.1rem)} .gate__form .lede{font-size:1.0625rem} .gate__help{font-size:.9375rem;color:var(--ink-2);line-height:1.6} /* ── the dark half ─────────────────────────────────────────────────── */ .gate__aside{ position:relative;isolation:isolate;overflow:hidden; background:var(--green-dk);color:var(--cream); border-left:1px solid var(--line-brass); display:flex;flex-direction:column;justify-content:center; padding:calc(var(--gate-top) + clamp(2.75rem,6vw,4.5rem)) clamp(1.6rem,4vw,3.75rem) clamp(2.75rem,6vw,4.5rem); } /* light from the top-left, so the panel reads as lit rather than filled */ .gate__aside::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(95% 70% at 12% 0%,rgba(217,182,90,.2),rgba(217,182,90,0) 58%); } /* the content sits above the wash and the horizon */ .gate__aside > *{position:relative;z-index:1} /* the same horizon the footer carries, so the dark half of the door and the dark foot of every other page are recognisably the same place. Written after the rule above and scoped a step tighter, because that one matches this element too and would otherwise drop it back into the flow at the top of the panel. */ .gate__aside > .gate__horizon{position:absolute;left:0;right:0;bottom:0;z-index:0;height:auto} .gate__aside h2{margin:1.2rem 0 1.1rem;max-width:15ch} .gate__aside .lede{max-width:38ch} /* ── what is behind the door ─────────────────────────────────────────── Hairline-ruled, numbered in brass. The same object as the numbered steps on the thank-you slip, which is the other screen on this site whose whole job is to say what happens next. */ .gate__pts{ list-style:none;margin:clamp(1.75rem,3.5vw,2.6rem) 0 0;padding:0; counter-reset:g;border-top:1px solid var(--line-dk);max-width:42ch; } .gate__pts li{ counter-increment:g;position:relative;padding:.95rem 0 .95rem 2.6rem; border-bottom:1px solid var(--line-dk);font-size:.9375rem;line-height:1.5; color:rgba(250,246,236,.74); } .gate__pts li::before{ content:counter(g,decimal-leading-zero);position:absolute;left:0;top:1.15em; font-family:var(--ff-d);font-size:.76rem;font-weight:700;color:var(--brass-lt); font-variant-numeric:tabular-nums;letter-spacing:.06em; } .gate__pts b{display:block;color:var(--cream);font-weight:600;margin-bottom:.1rem} /* the list sets itself a line at a time as the door appears. The door is revealed by script — it has to wait to find out whether there is a session — so unlike the masthead there is no first-paint race here. */ .gate__pts li{animation:factin .55s var(--ease-out) both;animation-delay:calc(.2s + 80ms * var(--i,0))} .gate__pts li:nth-child(1){--i:0} .gate__pts li:nth-child(2){--i:1} .gate__pts li:nth-child(3){--i:2} .gate__pts li:nth-child(4){--i:3} .gate__foot{ margin:clamp(1.6rem,3vw,2.4rem) 0 0;font-size:.9375rem;line-height:1.6; color:rgba(250,246,236,.6); } .gate__foot a{color:var(--brass-lt);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-brass)} .gate__foot a:hover{text-decoration-color:var(--brass-lt)} @media (max-width:960px){ .gate{grid-template-columns:1fr;min-height:0} /* the form takes the screen it arrived for; the panel is what is under it. Both stay, and the horizon still closes the page. */ .gate__form{min-height:calc(100svh - var(--gate-top));padding-bottom:clamp(2.5rem,7vw,3.5rem)} .gate__aside{border-left:0;border-top:1px solid var(--line-brass);padding-top:clamp(2.5rem,7vw,3.5rem)} .gate__aside .lede,.gate__aside h2{max-width:none} } /* ═══════════════════════════════════════════════════════════════════════ THE CART A drawer off the right edge, because adding a pack should never cost you your place on the price list. It slides, it says what it did, and the way out is bigger than the way deeper in. The paper ground is deliberate: everything you can spend money on on this site is on paper, and everything that is the company talking is on green. ═══════════════════════════════════════════════════════════════════════ */ .cart-btn{ position:relative;display:inline-grid;place-items:center;flex:none; width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(250,246,236,.28); background:transparent;cursor:pointer;color:var(--cream); transition:border-color .2s,background .2s; } .cart-btn:hover{border-color:var(--brass-lt);background:rgba(217,182,90,.12)} .cart-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8} .cart-btn__n{ position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px; border-radius:999px;background:var(--brass-lt);color:var(--green-dk); font-size:.7rem;font-weight:700;line-height:20px;text-align:center; font-variant-numeric:tabular-nums; transform:scale(0);transition:transform .28s var(--ease); } .cart-btn__n.is-on{transform:scale(1)} .cart-btn__n.is-bump{animation:cartbump .45s var(--ease)} @keyframes cartbump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}} .cart-veil{ position:fixed;inset:0;z-index:90;background:rgba(6,20,13,.55); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); opacity:0;pointer-events:none;transition:opacity .3s var(--ease); } .cart-veil.is-on{opacity:1;pointer-events:auto} .cart{ position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(30rem,100%); display:flex;flex-direction:column;background:var(--cream); box-shadow:-24px 0 60px rgba(6,20,13,.3); transform:translateX(101%);transition:transform .38s var(--ease); padding-bottom:env(safe-area-inset-bottom); } .cart.is-on{transform:none} .cart__head{ display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:none; padding:1.25rem var(--gutter);border-bottom:1px solid var(--line); } .cart__head h2{font-family:var(--ff-d);font-size:1.4rem;font-weight:600;font-variation-settings:"SOFT" 22,"WONK" 1,"opsz" 50} .cart__shut{ width:42px;height:42px;flex:none;border-radius:50%;border:1.5px solid var(--line); background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink); transition:border-color .2s,background .2s,transform .2s var(--ease); } .cart__shut:hover{border-color:var(--green);background:rgba(18,53,36,.05);transform:rotate(90deg)} .cart__shut svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2} .cart__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 var(--gutter)} .cart__rows{list-style:none;margin:0;padding:0} .cart__row{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;padding:1.25rem 0;border-bottom:1px solid var(--line-2)} .cart__row:last-child{border-bottom:0} .cart__name{font-family:var(--ff-d);font-size:1.15rem;font-weight:600;font-variation-settings:"SOFT" 22,"WONK" 0,"opsz" 40} .cart__meta{margin:.2rem 0 0;font-size:.875rem;color:var(--ink-3);line-height:1.45} .cart__cost{font-family:var(--ff-d);font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .cart__ctl{grid-column:1/-1;display:flex;align-items:center;gap:1rem;margin-top:.5rem} /* the stepper. 44px targets, because this is used with a thumb. */ .qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--paper)} .qty button{ width:40px;height:40px;flex:none;border:0;background:transparent;cursor:pointer; font-size:1.2rem;line-height:1;color:var(--green);display:grid;place-items:center; transition:background .18s; } .qty button:hover{background:rgba(18,53,36,.07)} .qty button:disabled{opacity:.3;cursor:not-allowed} .qty output{min-width:2.2rem;text-align:center;font-weight:700;font-variant-numeric:tabular-nums} .cart__drop{ border:0;background:transparent;cursor:pointer;padding:.4rem 0;min-height:44px; font-size:.875rem;font-weight:600;color:var(--ink-3);text-decoration:underline; text-underline-offset:3px;text-decoration-color:var(--line);transition:color .2s; } .cart__drop:hover{color:var(--bad);text-decoration-color:currentColor} .cart__empty{padding:3.5rem 0;text-align:center} .cart__empty svg{width:46px;height:46px;margin:0 auto 1.1rem;fill:none;stroke:var(--line-brass);stroke-width:1.4;display:block} .cart__empty p{margin:0 0 1.6rem;color:var(--ink-2)} .cart__foot{flex:none;padding:1.25rem var(--gutter) 1.5rem;border-top:1px solid var(--line);background:var(--paper)} .cart__sum{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.5rem} .cart__sum dt{color:var(--ink-2);font-size:.9375rem} .cart__sum dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums} .cart__tot{padding-top:.75rem;margin-top:.5rem;border-top:1px dashed var(--line)} .cart__tot dt{font-weight:600;color:var(--ink);font-size:1.0625rem} .cart__tot dd{font-family:var(--ff-d);font-size:1.8rem;font-weight:600;line-height:1;font-variation-settings:"SOFT" 10,"WONK" 0,"opsz" 120} .cart__keep{ margin:.9rem 0 1.1rem;padding:.8rem .95rem;border-radius:var(--r-sm); background:var(--good-bg);color:var(--good);font-size:.875rem;line-height:1.5; } .cart__keep b{font-variant-numeric:tabular-nums} .cart__note{margin:.85rem 0 0;font-size:.8125rem;color:var(--ink-3);line-height:1.5;text-align:center} @media (max-width:560px){ .cart{width:100%} .cart__head,.cart__body,.cart__foot{--gutter:1.15rem} } @media (prefers-reduced-motion:reduce){ .cart,.cart-veil{transition:none} } /* ═══════════════════════════════════════════════════════════════════════ WHATSAPP BUTTON ═══════════════════════════════════════════════════════════════════════ */ .wa-fab{ position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);z-index:70; width:56px;height:56px;border-radius:50%;background:#1FA855;display:grid;place-items:center; text-decoration:none;box-shadow:0 6px 22px rgba(8,24,16,.32); transition:transform .25s var(--ease),background .2s; } .wa-fab:hover{transform:translateY(-3px) scale(1.05);background:#178443} .wa-fab svg{width:28px;height:28px;fill:#fff} /* ═══════════════════════════════════════════════════════════════════════ TOAST ═══════════════════════════════════════════════════════════════════════ */ .toast{ position:fixed;left:50%;bottom:1.5rem;z-index:110;transform:translate(-50%,180%); background:var(--green-dk);color:var(--cream);padding:.85rem 1.3rem;border-radius:999px; font-size:.9375rem;font-weight:500;box-shadow:var(--sh-lg);opacity:0;visibility:hidden; transition:transform .4s var(--ease),opacity .25s,visibility .25s; max-width:calc(100vw - 2rem);display:flex;align-items:center;gap:.55rem; border:1px solid var(--line-brass); } .toast.is-on{transform:translate(-50%,0);opacity:1;visibility:visible} .toast svg{width:17px;height:17px;flex:none;stroke:var(--brass-lt);fill:none;stroke-width:2.4} /* ═══════════════════════════════════════════════════════════════════════ REVEAL Blocks rise. Display headings are wiped upward from behind a mask, which reads as printing rather than as a fade. ═══════════════════════════════════════════════════════════════════════ */ .js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)} .js .rv.in{opacity:1;transform:none} /* THE PAGE HEADING Wiped upward from behind a mask, which reads as printing rather than as a fade. This one is a CSS animation and not a class the script toggles, because it is the first line of every page: it must not wait on an observer, on a frame callback, or on a module finishing. An animation plays the moment the element renders. With .js absent — no script at all — there is no animation and the heading is simply there. */ .js .wipe-in{animation:wipein .95s var(--ease-out) both} @keyframes wipein{ from{clip-path:inset(0 0 108% 0);transform:translateY(.14em)} to{clip-path:inset(-.3em -.25em -.18em -.25em);transform:none} } /* ═══════════════════════════════════════════════════════════════════════ THE TRACK — steps threaded on one brass rail. A rail instead of a row of boxes: it says "this is a sequence", which four equal cards never manage to say. Used on the home page for how the money works, and on the balm page for how to use it. ═══════════════════════════════════════════════════════════════════════ */ .track{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3vw,2.5rem);position:relative;grid-template-columns:repeat(var(--track-n,4),minmax(0,1fr))} .track::before{content:"";position:absolute;left:0;right:0;top:23px;height:1px;background:linear-gradient(90deg,var(--line-brass) 0 82%,transparent)} .track__step{display:grid;gap:.55rem;align-content:start;position:relative} .track__n{ width:46px;height:46px;border-radius:50%;display:grid;place-items:center; background:var(--cream);border:1px solid var(--line-brass);color:var(--green); font-family:var(--ff-d);font-size:1.15rem;font-weight:600; margin-bottom:.7rem;position:relative;z-index:1;box-shadow:0 0 0 6px var(--cream); font-variation-settings:"SOFT" 10,"WONK" 0,"opsz" 40; } /* on a paper-white section the knockout behind each number has to match */ .track--paper .track__n{background:var(--paper);box-shadow:0 0 0 6px var(--paper)} .track__step h3{margin:0} .track__step p{margin:0;color:var(--ink-2);font-size:.9375rem} @media (max-width:1000px){ .track{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem} .track::before{display:none} } @media (max-width:640px){ .track{grid-template-columns:1fr;gap:1.5rem} .track__step{grid-template-columns:46px 1fr;grid-template-areas:"n h" ". p";column-gap:1rem;row-gap:.35rem} .track__n{grid-area:n;margin-bottom:0;box-shadow:none} .track__step h3{grid-area:h;align-self:center} .track__step p{grid-area:p} } /* ═══════════════════════════════════════════════════════════════════════ THE RAIL — the same idea, turned on its side, for a long form. .track threads four steps on a horizontal brass rail and says "this is a sequence". A five-part order form is exactly as much a sequence, and it was being drawn as five slabs divided by full-width rules, which says "this is a list of unrelated demands". So the rail runs vertically down the left of the form, the numbered discs sit on it, and it stops at the last one — so the form has a visible bottom before you reach it, which is the single thing a long form on a phone never tells you. ═══════════════════════════════════════════════════════════════════════ */ .rail{position:relative} .rail::before{ content:"";position:absolute;left:17px;top:.9rem;bottom:0;width:1px; background:linear-gradient(180deg,var(--line-brass) 0 92%,transparent); } .rail > :last-child::after{ /* the stop: a hairline cap under the final step, so the rail ends on something rather than fading out mid-air */ content:"";position:absolute;left:8px;bottom:0;width:19px;height:1px;background:var(--line-brass); } .rail__step{position:relative;padding-left:clamp(2.9rem,4.5vw,3.6rem)} .rail__n{ position:absolute;left:0;top:.15rem;width:35px;height:35px;border-radius:50%; display:grid;place-items:center;background:var(--green);color:var(--cream); font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums; box-shadow:0 0 0 5px var(--cream); } /* a step whose fields are all filled goes brass, so glancing down the rail tells you how far in you are without reading a word of it */ .rail__step.is-done .rail__n{ background:var(--brass-lt);color:var(--green-dk); box-shadow:0 0 0 5px var(--cream),inset 0 0 0 1px rgba(18,53,36,.14); } @media (max-width:560px){ /* on a phone the rail costs measure the copy needs more than the ornament does: the numbers stay, the indent goes */ .rail::before,.rail > :last-child::after{display:none} .rail__step{padding-left:0} .rail__n{position:static;box-shadow:none;margin-bottom:.9rem} } /* ═══════════════════════════════════════════════════════════════════════ THE CLOSE — the dark band every page ends on. It used to carry the savanna horizon. So does the footer, which sits directly under it on the same green, so the page ended on the same silhouette twice within a screen of itself. The horizon now appears once, at the very bottom of the footer, and a brass hairline does the dividing here — the same hairline the section heads use. ═══════════════════════════════════════════════════════════════════════ */ .close{background:var(--green-dk);color:var(--cream);position:relative;overflow:hidden;text-align:center} .close .wrap{position:relative;z-index:1} .close h2{margin-bottom:1.1rem} .close .lede{margin-inline:auto} .close__btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin:2rem 0} @media (max-width:640px){ .close__btns{display:grid} } /* ═══════════════════════════════════════════════════════════════════════ CHARTS The brand's green and gold are ink colours. As chart fills they fail outright: #123524 sits at OKLCH lightness 0.30 with chroma 0.05, which reads as grey once it is a bar rather than a rule, and #D9B65A clears the paper by 1.9:1. So the marks get their own steps, snapped to the nearest passing value on the same hues and checked with the palette validator rather than by eye: --c-1 / --c-2 the two-slot categorical (cost vs keep). Lightness band, chroma floor, CVD separation, normal-vision floor and contrast: all pass on the paper surface. Worst adjacent pair ΔE 9.6 protan, 19.0 normal. --ord-1..3 pack size is an ordered scale — 10, 15, 20 jars — not three names, so it takes one hue in three monotone steps and the reader sees the order in the colour. Monotone L, ΔL ≥ .06, light end 2.12:1: all pass. Every chart is drawn on paper. Nothing plots on the green panels: the dark surface pushes both hues out of the legible band, and figures on a dark ground are the wrong place to ask somebody to compare lengths. ═══════════════════════════════════════════════════════════════════════ */ .ch{ --ch-surface:var(--paper); --ch-grid:rgba(16,28,22,.1); --ch-tick:#6C7C72; --c-1:#17824E; --c-2:#B58C22; --ord-1:#74C09B; --ord-2:#399567; --ord-3:#0C5F35; position:relative; } .ch__plot{position:relative} .ch__plot svg{display:block;width:100%;overflow:visible} .ch text.ch__tick{ font-family:var(--ff);font-size:11px;font-weight:500; font-variant-numeric:tabular-nums;letter-spacing:.01em; } .ch rect[tabindex]{cursor:default} .ch rect[tabindex]:focus-visible{outline:2px solid var(--brass-lt);outline-offset:0} /* the hover read-out. It supplements the axis and the table; it is never the only way to reach a value, because on a phone there is no hover. */ .ch__tip{ position:absolute;z-index:5;transform:translate(-50%,-115%);pointer-events:none; background:var(--green-dk);color:var(--cream);border:1px solid var(--line-brass); border-radius:var(--r-sm);padding:.5rem .7rem;font-size:.8125rem;line-height:1.45; white-space:nowrap;box-shadow:var(--sh-md); } .ch__tip b{display:block;font-weight:600;margin-bottom:.15rem} .ch__tip span{display:block;color:rgba(250,246,236,.82);font-variant-numeric:tabular-nums} .ch__tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:.4rem} .ch__key{ display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;list-style:none;margin:.9rem 0 0;padding:0; font-size:.8125rem;color:var(--ink-2); } .ch__key li{display:flex;align-items:center;gap:.45rem} .ch__key i{width:9px;height:9px;border-radius:2px;flex:none} /* every value the chart shows, as text. This is what makes the hover optional rather than load-bearing. */ .ch__table{margin-top:.9rem;border-top:1px solid var(--line-2);padding-top:.5rem} .ch__table summary{ cursor:pointer;list-style:none;font-size:.78rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3);padding:.45rem 0;min-height:36px; display:flex;align-items:center;gap:.5rem; } .ch__table summary::-webkit-details-marker{display:none} .ch__table summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)} .ch__table[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .ch__table summary:hover{color:var(--ink)} .ch__tbl{min-width:0;font-size:.86rem} .ch__tbl th{font-size:.68rem} .ch__tbl td{padding:.5rem .6rem} /* ── rank bars ───────────────────────────────────────────────────────── */ .ch__rank{list-style:none;margin:0;padding:0;display:grid;gap:.7rem} .ch__rank li{display:grid;grid-template-columns:minmax(74px,26%) 1fr auto;align-items:center;gap:.85rem} .ch__rank li:focus-visible{outline:2px solid var(--brass-lt);outline-offset:3px;border-radius:4px} .ch__rank-n{font-size:.86rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ch__rank-t{height:12px;background:rgba(16,28,22,.06);border-radius:3px;overflow:hidden} .ch__rank-t i{display:block;height:100%;border-radius:0 3px 3px 0} .ch__rank-v{font-size:.86rem;font-weight:600;min-width:3.5em;text-align:right} /* ── meter ───────────────────────────────────────────────────────────── */ .ch__meter{height:14px;border-radius:999px;background:var(--ord-1);opacity:1;overflow:hidden} .ch__meter i{display:block;height:100%;background:var(--ord-3);transition:width .5s var(--ease)} .ch__meter-key{ display:flex;justify-content:space-between;gap:1rem;align-items:baseline; margin:.7rem 0 0;font-size:.9375rem;color:var(--ink-2); } .ch__meter-key b{color:var(--ink);font-size:1.15rem;font-weight:700} .ch__note{margin:.6rem 0 0;font-size:.84rem;color:var(--ink-3);line-height:1.5} .ch__spark{display:block;overflow:visible} /* ── the frame a chart sits in ───────────────────────────────────────── */ .chart{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(1.1rem,2vw,1.5rem);box-shadow:var(--sh-sm);min-width:0} .chart__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem} .chart__t{font-size:1rem;font-weight:600;margin:0} .chart__sub{margin:.2rem 0 0;font-size:.84rem;color:var(--ink-3);line-height:1.45} .chart__fig{ font-family:var(--ff-d);font-size:1.5rem;font-weight:600;line-height:1; font-variation-settings:"SOFT" 10,"WONK" 0,"opsz" 110; } @media (prefers-reduced-motion:reduce){ .ch__meter i{transition:none} } /* ═══════════════════════════════════════════════════════════════════════ THE BACK-OFFICE SHELL A rail down the left, one room at a time on the right. First built for admin.html, where nine sections stacked on one page meant scrolling past the charts to reach the orders. It lives here rather than in that page's own