/* One stylesheet, no imports, no fonts to fetch. The palette is the client's, so the shop and the app look like the same thing without shipping the app's typeface to a browser. TWO GROUNDS, THREE SETTINGS. Night is the brand's ground and the default. Light is **cream, never white**: `--paper` is the kit's own light tone, and pure white would look like a different product. The three settings are Auto, Light and Dark - Auto means "ask the operating system", which is the default and keeps no record of anything; choosing Light or Dark sets `data-theme` on and is remembered on the device (that choice, and nothing else, is stored). The rule the rest of this file follows: nothing is a box. No hard borders; a surface is a soft tint, and where something needs an edge it is a hairline at low opacity. The only saturated things are the one primary button, the step that is current, and the QR - which has to be light to be scannable. Farsi is written right to left, so positions and paddings use logical properties (`inline-start`, `margin-inline`) throughout: the same rules then mirror themselves, and nothing needs a second stylesheet. */ :root{ /* Only the colours that do not change between grounds. Everything else is set below, per theme. */ --crust:#ea8032; --crumb:#f4a15a; --crust-pressed:#d8731e; --route:#3e6ae1; --live:#27c46a; --fault:#e2503a; --paper:#eae5da; --ink:#161310; /* The wash colour of a ground: blue on night, the character's own orange on cream. */ --accent:62,106,225; } /* ---- dark: the brand's ground, and the default ---- */ :root, :root[data-theme="dark"]{ --bg:#070b14; --fg:#f3f0e8; --dim:#9c978f; --hair:rgba(243,240,232,.07); --tint:rgba(243,240,232,.035); --surface:rgba(243,240,232,.04); --accent:62,106,225; --field-a:rgba(18,24,42,.95); --field-b:rgba(var(--accent),.42); --chosen:rgba(var(--accent),.20); --chip:rgba(243,240,232,.05); --chip-on:rgba(var(--accent),.18); --raise:rgba(243,240,232,.10); --warn-fg:#f6cfc7; --warn-bg:rgba(226,80,58,.14); } /* ---- light: cream, not white ---- */ :root[data-theme="light"], :root.theme-light{ --bg:#eae5da; --fg:#161310; --dim:#6d675d; --hair:rgba(22,19,16,.10); --tint:rgba(22,19,16,.035); --surface:rgba(255,255,255,.45); --accent:234,128,50; --field-a:rgba(255,255,255,.55); --field-b:rgba(var(--accent),.16); --chosen:rgba(var(--accent),.12); --chip:rgba(22,19,16,.05); --chip-on:rgba(var(--accent),.14); --raise:rgba(255,255,255,.80); --warn-fg:#7a2a17; --warn-bg:rgba(226,80,58,.12); } /* Auto: no `data-theme` at all means "whatever the system says". */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg:#eae5da; --fg:#161310; --dim:#6d675d; --hair:rgba(22,19,16,.10); --tint:rgba(22,19,16,.035); --surface:rgba(255,255,255,.45); --accent:234,128,50; --field-a:rgba(255,255,255,.55); --field-b:rgba(var(--accent),.16); --chosen:rgba(var(--accent),.12); --chip:rgba(22,19,16,.05); --chip-on:rgba(var(--accent),.14); --raise:rgba(255,255,255,.80); --warn-fg:#7a2a17; --warn-bg:rgba(226,80,58,.12); } } *{box-sizing:border-box} html,body{margin:0;padding:0} /* The Persian face, served from this origin - the page still fetches no font from anywhere else. Ziba is one weight and has no Latin glyphs at all, so: the declaration covers 400 to 700 (nothing is synthesised when the page bolds something), and the **`unicode-range` is what keeps an English visitor from paying for it** - a browser fetches a face only when it has to draw one of the characters in the range, and an English page draws none. Latin text inside the Farsi page (the wordmark, `EN`, an address, a code) falls through to the next family by itself. The file is a *prepared* copy - `deploy/prepare-font.py` takes the hinting out of the brand original, because grid-fitting it at this page's fractional sizes renders uneven, muddy strokes (measured side by side in Chromium and Firefox). Its own family name is "B Ziba"; `Ziba` here is this stylesheet's name for it, and its licence text is not in the repository - see the note in the README. */ @font-face{ font-family:Ziba; src:url("fonts/Ziba.ttf?v=8504bc2a9b") format("truetype"); font-weight:400 700;font-style:normal;font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF; } body{ background-color:var(--bg); color:var(--fg); min-height:100vh; font:16px/1.6 -apple-system,"Segoe UI",system-ui,Roboto,sans-serif; background-image: radial-gradient(1200px 560px at 50% -8%, var(--field-a) 0%, transparent 72%), radial-gradient(1500px 860px at 50% 104%, var(--field-b) 0%, transparent 74%); background-repeat:no-repeat; background-size:100% 84%, 100% 100%; background-position:top center, bottom center; } /* Persian needs a little more air and its own face; the Latin wordmark keeps the Latin one, because it is a wordmark and not a translated string. */ html[dir="rtl"] body{font-family:Ziba,"Segoe UI",Tahoma,system-ui,sans-serif; line-height:1.85; font-size:16.5px} .mark{font-family:-apple-system,"Segoe UI",system-ui,Roboto,sans-serif} .wrap{max-width:1000px;margin:0 auto;padding:44px 22px 72px} header.top{display:flex;align-items:center;justify-content:space-between;gap:14px; padding-bottom:18px;position:relative} /* The bar's own hairline: the mark and the settings belong to one row, and a row that ends in nothing is how a header looks unfinished. */ header.top::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0; height:1px;background:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent)} .mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit; letter-spacing:.42em;font-weight:300;font-size:15px;text-transform:uppercase} html[dir="rtl"] .mark{letter-spacing:.1em} .mark img{width:20px;height:20px;display:block} .quiet{color:var(--dim);font-size:12px;letter-spacing:.16em;text-transform:uppercase} html[dir="rtl"] .quiet{letter-spacing:0} /* The settings, as one calm cluster: a capsule of icons for the theme, a hairline, a capsule of letters for the language. Icons rather than the words Auto/Light/Dark, because three words repeat what the shapes already say, and a header is the last place to spend a sentence. */ .tools{display:flex;align-items:center;gap:10px} .divider{width:1px;height:18px;background:var(--hair)} .seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px; background:var(--chip)} .seg button{ height:28px;min-width:30px;padding:0 8px;border:0;border-radius:999px;cursor:pointer; background:transparent;color:var(--dim);font:inherit;font-size:11px;letter-spacing:.06em; text-transform:none;font-weight:500;display:inline-grid;place-items:center; transition:background .18s,color .18s,box-shadow .18s} .seg button:hover{color:var(--fg);background:transparent} .seg button[aria-pressed="true"]{background:var(--raise);color:var(--fg); box-shadow:inset 0 0 0 1px var(--hair)} .seg button:active{transform:none;background:var(--raise)} .seg button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none; stroke-linecap:round;stroke-linejoin:round;display:block} .seg button svg .solid{fill:currentColor;stroke:none} html[dir="rtl"] .seg button{font-size:11.5px} /* The length chips: the same capsule, with words, because one month and six months are not a shape. */ .seg.chips{margin-bottom:22px} .seg.chips button{height:30px;padding:0 14px;font-size:12px;letter-spacing:.02em} html[dir="rtl"] .seg.chips button{font-size:12.5px} .hero{margin:52px 0 0;text-align:center} /* The character, at the size a sticker wants to be: small enough to be a wink. */ .mascot{display:block;margin:0 auto 22px;width:104px;height:auto;image-rendering:auto} .hero h1{font-weight:200;font-size:40px;line-height:1.25;margin:0 auto 14px;max-width:24ch; letter-spacing:-.01em} html[dir="rtl"] .hero h1{letter-spacing:0;font-weight:300} .lede{color:var(--dim);max-width:52ch;margin:0 auto;font-weight:300} /* Plans: a tint and a top hairline instead of a frame. The chosen one is lifted by a soft outer glow and a faint blue wash, not by a bright outline. */ .plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:52px 0 0} .plan{position:relative;border-radius:20px;padding:26px 24px 24px;cursor:pointer;text-align:start; background:linear-gradient(180deg,var(--tint),transparent 70%); transition:background .25s,box-shadow .25s} .plan::before{content:"";position:absolute;inset-inline-start:24px;inset-inline-end:24px;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--hair) 20%,var(--hair) 80%,transparent)} .plan:hover{background:linear-gradient(180deg,var(--chosen),var(--tint) 70%,transparent)} .plan.chosen{ background: radial-gradient(420px 240px at 50% -20%, var(--chosen), transparent 70%), linear-gradient(180deg,var(--tint),transparent 75%); box-shadow:0 40px 110px -70px rgba(var(--accent),.85); } .plan.chosen::before{background:linear-gradient(90deg,transparent,rgba(var(--accent),.60),transparent)} .plan .regions{color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase} html[dir="rtl"] .plan .regions{letter-spacing:0} .plan h2{font-weight:400;font-size:21px;margin:8px 0 0} .plan p{color:var(--dim);font-weight:300;font-size:14.5px;margin:12px 0 18px;min-height:44px} .plan .price{font-size:32px;font-weight:200} .plan .price small{font-size:13px;color:var(--dim);font-weight:300} /* The order bar: four steps, the current one filled. Nothing here is a promise about machinery - it is what the buyer does, in order, with one line of explanation under it. */ .order{margin-top:52px;padding-top:38px;position:relative} .order::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent)} .steps{display:flex;list-style:none;margin:0;padding:0;gap:8px;justify-content:space-between} .steps li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:9px; text-align:center} /* The connector, drawn from each step to the next: symmetric, so it works in both directions. */ .steps li:not(:last-child) .dot::after{ content:"";position:absolute;top:50%;height:1px;background:var(--hair); inset-inline-start:calc(50% + 17px);inset-inline-end:calc(-50% + 17px);transform:translateY(-50%)} .steps li.done .dot::after{background:rgba(var(--accent),.45)} .dot{position:relative;width:34px;height:34px;border-radius:999px;display:grid;place-items:center; background:var(--chip);color:var(--dim);font-size:13px;font-weight:500; transition:background .25s,color .25s,box-shadow .25s} .steps li.on .dot{background:var(--crust);color:var(--ink);box-shadow:0 18px 40px -22px rgba(234,128,50,.9)} .steps li.done .dot{background:var(--chip-on);color:var(--fg)} .steps .title{font-size:13px;font-weight:400;color:var(--dim)} .steps li.on .title{color:var(--fg)} .hint{margin:20px auto 0;text-align:center;color:var(--dim);font-size:14px;font-weight:300;max-width:56ch} /* Choose, pay, done: no panel, no chrome. */ .checkout{margin-top:38px;padding-top:34px;position:relative;text-align:center} .checkout::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent)} .line{color:var(--dim);font-size:14px;margin-bottom:20px} .line b{color:var(--fg);font-weight:400} .buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} button{font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase; padding:13px 21px;border-radius:11px;border:0;background:var(--crust);color:var(--ink); cursor:pointer;font-weight:500;transition:background .18s,filter .18s} html[dir="rtl"] button{letter-spacing:0;font-size:13px} /* The kit's own two states for the one button: crumb on hover, crust-pressed on press, ink label in every one of them. */ button:hover{background:var(--crumb)} button.ghost{background:var(--chip);color:var(--fg);font-weight:400} button.ghost:hover{background:var(--chip-on)} button:active{background:var(--crust-pressed);transform:translateY(1px)} button[disabled]{opacity:.7;cursor:default} .codes{margin:14px auto 0;color:var(--dim);font-size:13px;font-weight:300;max-width:52ch} .codes[hidden]{display:none} .status{margin-top:16px;color:var(--dim);font-size:13px;min-height:18px} .status.ok{color:var(--live)} /* The fallback: the address and its QR, side by side, only ever unhidden when it is the answer. */ .manual{margin:26px auto 0;max-width:720px;display:grid;grid-template-columns:1fr 186px;gap:26px; text-align:start;align-items:start} html[dir="rtl"] .manual{grid-template-columns:186px 1fr} .manual[hidden]{display:none} .rail{font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase; background:var(--chip);color:var(--dim);border:0;border-radius:999px; padding:9px 15px;cursor:pointer;transition:background .2s,color .2s} html[dir="rtl"] .rail{letter-spacing:0;font-size:13px} .rail.on{color:var(--fg);background:var(--chip-on)} .rails{display:flex;gap:8px;margin-bottom:18px} .field-label{color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase; margin-bottom:10px} html[dir="rtl"] .field-label{letter-spacing:0;font-size:12.5px} .addr{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;color:var(--fg); border-radius:12px;padding:14px 15px;background:var(--surface);word-break:break-all;direction:ltr; text-align:start} .warn{margin-top:14px;padding:11px 13px;border-radius:11px;font-size:13px; color:var(--warn-fg);background:var(--warn-bg)} .note{color:var(--dim);font-size:13px;font-weight:300;margin:18px 0 0;max-width:52ch} /* The one thing on the page that has to be light: a QR needs a quiet zone, and dark-on-dark does not scan. Paper is the kit's light, so the one light surface is still the client's. */ .qrbox{display:flex;flex-direction:column;align-items:center} .qr{width:186px;height:186px;border-radius:14px;padding:11px;background:var(--paper); box-shadow:0 30px 90px -60px rgba(var(--accent),.9)} .qr[hidden]{display:none} .qr svg{width:100%;height:100%;display:block} /* Installing: the same hairline as the rest, because a panel would make it look like a warning. It is not one - it is what the phone will show, and saying it here is the difference between a buyer who knows what to tap and one who thinks they have been handed something bad. */ .install{margin-top:52px;padding-top:34px;position:relative;max-width:64ch} .install::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent)} .install h3{margin:0 0 14px;font-size:12px;letter-spacing:.2em;color:var(--dim); text-transform:uppercase;font-weight:400} html[dir="rtl"] .install h3{letter-spacing:0;font-size:13px} .install p{color:var(--dim);font-size:13.5px;font-weight:300;margin:0 0 10px} .install b{color:var(--fg);font-weight:400} footer{margin-top:72px;padding-top:22px;color:var(--dim);font-size:12px;position:relative; display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} footer::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent)} @media (max-width:720px){ .hero h1{font-size:30px} .plans{grid-template-columns:1fr} .plan p{min-height:0} /* The steps stay in a row - they are a sequence, and stacking them would read as a list of options - but the words shrink and the connector gets shorter. */ .steps{gap:4px} .steps .title{font-size:11.5px} .dot{width:30px;height:30px;font-size:12px} .steps li:not(:last-child) .dot::after{inset-inline-start:calc(50% + 15px);inset-inline-end:calc(-50% + 15px)} .manual,html[dir="rtl"] .manual{grid-template-columns:1fr} .qrbox{align-items:flex-start} footer{flex-direction:column;gap:8px} }