/* 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 faces, served from this origin - the page still fetches no font from anywhere else. **A `unicode-range` is what keeps an English visitor from paying for them:** a browser fetches a face only when it has to draw one of the characters in the range, and an English page draws none. So the English shop stays exactly as light as it was, and the Farsi shop gets the real face. `swap` shows the text immediately in the system face and settles into IRANSans when it arrives. The licence for these two files is not in the repository (the `OFL.txt` beside them in the brand folder is Outfit's, not theirs) - see the note in the README before the repo is ever shared. */ @font-face{ font-family:IRANSans; src:url("fonts/irsans.ttf?v=7b443cab58") format("truetype"); font-weight:400;font-style:normal;font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF; } @font-face{ font-family:IRANSans; src:url("fonts/irsansb.ttf?v=2420b4a505") format("truetype"); font-weight: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:IRANSans,"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} }