:root{ --bg:#F4F4F2; --surface:#FFFFFF; --surface-2:#EAE9E5; --text:#1C1C1E; --text-muted:#6B6B68; --border:#E3E2DD; --chrome:#18181A; --chrome-2:#232326; --on-chrome:#F4F1E8; --on-chrome-muted:#8C8A7C; --gold:#B8912F; --gold-strong:#8F701F; --gold-tint:#FAF3E2; --gold-on-dark:#D8B15C; /* gold for text/lines on the always-dark chrome */ --gold-border:#E6D8AE; /* soft gold hairline for inputs/cards */ --gold-grad:linear-gradient(135deg,#EBCB7E 0%,#C9A24A 55%,#AD8524 100%); --success:#2E6B54; --waste:#B23A24; --waste-tint:#F8E6E0; --diagram-sheet:#EAE9E5; --diagram-used:#E8DFC4; --diagram-waste:#F3DCD3; --diagram-grid:#B8912F; --diagram-border:#1C1C1E; box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#121214; --surface:#1B1B1E; --surface-2:#232327; --text:#F1F0EA; --text-muted:#9C9B95; --border:#2E2E32; --gold:#D8B15C; --gold-strong:#E8C87A; --gold-tint:#2A2417; --gold-border:#4A4126; --success:#4FA483; --waste:#DD735A; --waste-tint:#2C1D18; --diagram-sheet:#232327; --diagram-used:#3A331E; --diagram-waste:#3A2620; --diagram-grid:#D8B15C; --diagram-border:#F1F0EA; } } :root[data-theme="dark"]{ --bg:#121214; --surface:#1B1B1E; --surface-2:#232327; --text:#F1F0EA; --text-muted:#9C9B95; --border:#2E2E32; --gold:#D8B15C; --gold-strong:#E8C87A; --gold-tint:#2A2417; --gold-border:#4A4126; --success:#4FA483; --waste:#DD735A; --waste-tint:#2C1D18; --diagram-sheet:#232327; --diagram-used:#3A331E; --diagram-waste:#3A2620; --diagram-grid:#D8B15C; --diagram-border:#F1F0EA; } *,*::before,*::after{ box-sizing:inherit; } html{ scroll-padding-top:env(safe-area-inset-top,0px); } html,body{ margin:0; min-height:100%; } /* Text font follows the interface language (set on by i18n.js). */ :root{ --font-text:'Noto Nastaliq Urdu','Segoe UI',Tahoma,sans-serif; } html[lang="en"]{ --font-text:'Space Grotesk','Segoe UI',system-ui,-apple-system,Arial,sans-serif; } body{ background:var(--bg); color:var(--text); font-family:var(--font-text); font-size:16px; line-height:2; -webkit-text-size-adjust:100%; } /* Nastaliq needs tall line boxes; Latin text doesn't. */ html[lang="en"] body{ line-height:1.55; } html[lang="en"] .panel-help, html[lang="en"] .empty-state, html[lang="en"] .note, html[lang="en"] .status-card p, html[lang="en"] .auth-error, html[lang="en"] .auth-info, html[lang="en"] .results-note, html[lang="en"] .price-hint{ line-height:1.6; } html[lang="en"] .app-header h1{ font-size:1.3rem; line-height:1.4; } html[lang="en"] .stat-label, html[lang="en"] .best-tag{ line-height:1.5; } .num{ font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif; unicode-bidi:isolate; } input{ font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif; } button{ font-family:inherit; } button:focus-visible, input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; } [hidden]{ display:none !important; } /* ---------- config warning ---------- */ .config-warning{ display:none; position:fixed; top:0; left:0; right:0; z-index:50; background:var(--waste); color:#fff; padding:10px 16px; text-align:center; font-size:.85rem; line-height:1.6; } html[data-config-missing="true"] .config-warning{ display:block; } /* ---------- shared corner marks ---------- */ .corner-mark{ position:fixed; width:16px; height:16px; pointer-events:none; z-index:20; opacity:.75; } .corner-mark.tl{ top:calc(8px + env(safe-area-inset-top,0px)); left:8px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); } .corner-mark.tr{ top:calc(8px + env(safe-area-inset-top,0px)); right:8px; border-top:2px solid var(--gold); border-right:2px solid var(--gold); } @media (min-width:880px){ .corner-mark{ display:none; } } /* ---------- status / auth screens ---------- */ /* Login / status screens are always dark + gold (like the app chrome and the logo), whatever the OS theme is: the palette is re-declared for this subtree only. */ .status-screen{ --bg:#121214; --surface:#101013; --surface-2:#232327; --text:#F1F0EA; --text-muted:#A5A399; --border:#2E2E32; --gold:#D8B15C; --gold-strong:#E8C87A; --gold-tint:#2A2417; --gold-border:#5A4B24; --waste:#DD735A; --waste-tint:#2C1D18; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; color:var(--text); background:radial-gradient(ellipse at 50% 0%, #2A2417 0%, rgba(42,36,23,0) 55%), var(--bg); } .status-card, .auth-card{ width:100%; max-width:380px; text-align:center; border-radius:16px; padding:32px 26px; background:linear-gradient(180deg,#202023 0%,#18181A 100%); border:1.5px solid rgba(216,177,92,.45); box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.55), 0 0 40px rgba(216,177,92,.08); } .status-icon-svg{ width:40px; height:40px; color:var(--gold-strong); margin-bottom:6px; } .status-card h2{ font-size:1.15rem; margin:4px 0 10px; color:var(--gold-strong); } .status-card p{ font-size:.9rem; color:var(--text-muted); line-height:1.9; margin:0 0 20px; } .status-card p.auth-error{ color:var(--waste); margin:0 0 16px; } .status-spinner{ width:34px; height:34px; margin:0 auto; border-radius:50%; border:3px solid var(--border); border-top-color:var(--gold); animation:spin .8s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ .status-spinner{ animation-duration:2.4s; } } .auth-logo{ display:block; width:96px; height:96px; margin:0 auto 14px; border-radius:22px; background:var(--chrome); border:1.5px solid rgba(216,177,92,.55); box-shadow:0 6px 22px rgba(0,0,0,.5), 0 0 26px rgba(216,177,92,.22); } .auth-app-title{ font-size:1.1rem; color:var(--gold-strong); font-weight:700; margin:0 0 6px; } .auth-title{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:1.05rem; font-weight:600; color:var(--text); margin:0 0 22px; } .auth-title::before, .auth-title::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(216,177,92,.6),transparent); } .auth-form{ text-align:start; } .auth-error{ background:var(--waste-tint); color:var(--waste); font-size:.85rem; border-radius:8px; padding:10px 12px; margin:0 0 14px; line-height:1.7; } .auth-info{ background:var(--gold-tint); color:var(--text); font-size:.85rem; border-radius:8px; padding:10px 12px; margin:0 0 14px; line-height:1.7; } .password-wrap{ position:relative; } /* toggle sits at the trailing edge of the (LTR) input: right in English, left in Urdu */ .password-wrap .field-name-input{ padding-right:48px; padding-left:12px; } html[lang="ur"] .password-wrap .field-name-input{ padding-left:48px; padding-right:12px; } .pw-toggle{ position:absolute; right:5px; top:50%; transform:translateY(-50%); width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:none; border-radius:8px; background:none; color:var(--text-muted); cursor:pointer; } .pw-toggle svg{ width:20px; height:20px; } .pw-toggle .eye-off{ display:none; } .pw-toggle[aria-pressed="true"] .eye-open{ display:none; } .pw-toggle[aria-pressed="true"] .eye-off{ display:block; } html[lang="ur"] .pw-toggle{ right:auto; left:5px; } /* language switch: small gold pill, top corner of the login/status cards and the app header */ .lang-btn{ position:absolute; top:14px; right:14px; height:32px; padding:0 14px; border-radius:999px; border:1.5px solid var(--gold-on-dark); background:transparent; color:var(--gold-on-dark); font-size:.82rem; font-weight:600; line-height:1; cursor:pointer; } .lang-btn[lang="ur"]{ font-family:'Noto Nastaliq Urdu',sans-serif; padding-top:4px; } .lang-btn[lang="en"]{ font-family:'Space Grotesk','Segoe UI',Arial,sans-serif; } .status-card, .auth-card{ position:relative; } .auth-link-btn{ display:block; background:none; border:none; padding:0; margin:-6px 0 14px; color:var(--gold-strong); font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; } .auth-mode-toggle{ background:none; border:none; color:var(--gold-strong); font-family:inherit; font-size:.9rem; font-weight:600; margin-top:16px; cursor:pointer; } .logout-btn{ position:absolute; top:16px; left:16px; width:36px; height:36px; border-radius:50%; border:none; background:var(--chrome-2); color:var(--on-chrome-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; } .logout-btn svg{ width:18px; height:18px; } .app-header{ position:relative; } /* ---------- layout shell ---------- */ .app-shell{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; max-width:560px; margin:0 auto; background:var(--bg); position:relative; } .app-frame{ display:contents; } .app-header{ background:var(--chrome); color:var(--on-chrome); padding:18px 64px 16px; text-align:center; border-bottom:2px solid var(--gold-on-dark); box-shadow:0 6px 18px rgba(184,145,47,.14); } .app-header h1{ margin:0; font-size:1.5rem; font-weight:700; line-height:1.6; color:var(--gold-on-dark); } .app-main{ flex:1; padding:18px 16px calc(96px + env(safe-area-inset-bottom,0px)); min-width:0; } .tab-panel{ display:none; animation:fadeIn .25s ease; } .tab-panel.active{ display:block; } @keyframes fadeIn{ from{opacity:0} to{opacity:1} } @media (prefers-reduced-motion:reduce){ .tab-panel{ animation:none; } } .panel-title{ font-size:1.25rem; font-weight:700; margin:0 0 4px; color:var(--gold-strong); } .panel-title::after{ content:''; display:block; width:56px; height:3px; margin-top:6px; border-radius:2px; background:var(--gold-grad); } .subheading{ font-size:1.05rem; font-weight:700; margin:24px 0 10px; color:var(--gold-strong); } .panel-help{ font-size:.875rem; color:var(--text-muted); margin:10px 0 18px; line-height:1.85; } .field-group{ margin-bottom:16px; } .field-label{ display:block; font-size:.9rem; font-weight:600; color:var(--gold-strong); margin-bottom:6px; } .dim-row{ display:flex; align-items:center; gap:10px; } .dim-input{ flex:1; min-width:0; height:52px; border-radius:10px; border:1.5px solid var(--gold-border); background:var(--surface); color:var(--text); font-size:1.15rem; text-align:center; padding:0 8px; } .dim-input.full{ width:100%; } .dim-input:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); } .dim-input.invalid{ border-color:var(--waste); animation:shake .35s ease; } @keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(4px)} 75%{transform:translateX(-4px)} } .dim-x{ font-family:'Space Grotesk'; font-size:1.1rem; color:var(--text-muted); flex:0 0 auto; } .dim-unit{ flex:0 0 auto; font-size:.85rem; color:var(--text-muted); } .two-col{ display:flex; gap:12px; } .two-col > div{ flex:1; min-width:0; } .field-name-input{ width:100%; height:46px; border-radius:10px; border:1.5px solid var(--gold-border); background:var(--surface); color:var(--text); font-family:var(--font-text); font-size:1rem; padding:0 12px; margin-top:10px; } .field-name-input:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); } /* email/password inputs are dir="ltr"; in Urdu (RTL page) their text hugs the right edge */ #authEmail, #authPassword{ margin-top:0; text-align:left; } html[lang="ur"] #authEmail, html[lang="ur"] #authPassword{ text-align:right; } .segmented{ display:flex; background:var(--surface-2); border:1.5px solid var(--gold-border); border-radius:10px; padding:4px; gap:4px; margin-bottom:18px; } .segmented-btn{ flex:1; height:44px; border:none; border-radius:7px; background:transparent; color:var(--text-muted); font-family:var(--font-text); font-size:.95rem; font-weight:600; cursor:pointer; } .segmented-btn.active{ background:var(--gold-grad); color:#18181A; box-shadow:0 1px 4px rgba(120,90,20,.35); } .btn{ display:flex; align-items:center; justify-content:center; gap:6px; height:48px; padding:0 20px; border-radius:10px; border:none; font-size:1rem; font-weight:700; cursor:pointer; width:100%; background:var(--gold-grad); color:#18181A; box-shadow:0 2px 8px rgba(120,90,20,.3); } .btn:active{ transform:scale(.98); } .btn:disabled{ opacity:.6; cursor:default; } .btn-ghost{ background:transparent; color:var(--gold-strong); border:1.5px solid var(--gold); box-shadow:none; width:auto; padding:0 22px; height:44px; margin:0 auto; } .empty-state{ text-align:center; padding:34px 16px; color:var(--text-muted); font-size:.95rem; line-height:1.9; } .empty-state .btn{ margin-top:14px; } .results-note{ font-size:.85rem; color:var(--text-muted); margin:0 0 12px; } .result-card{ background:var(--surface); border:1.5px solid var(--gold-border); border-radius:12px; padding:14px; margin-bottom:12px; } .result-card.is-best{ border-color:var(--gold); border-inline-start-width:4px; background:var(--gold-tint); box-shadow:0 2px 12px rgba(184,145,47,.18); } .best-tag{ display:inline-block; font-size:.76rem; font-weight:700; line-height:1.9; padding:0 12px; border-radius:999px; margin-bottom:8px; background:var(--gold-grad); color:#18181A; } .result-sheet{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:1.05rem; font-weight:600; margin-bottom:10px; } .size-label{ font-size:.8rem; color:var(--text-muted); font-weight:400; } .result-stats{ display:flex; gap:26px; margin-bottom:10px; } .stat-block{ display:flex; flex-direction:column; } .stat-value{ font-size:1.9rem; font-weight:700; color:var(--text); line-height:1.2; } .stat-label{ font-size:.78rem; color:var(--text-muted); margin-top:2px; } .waste-stat .stat-value{ color:var(--waste); } .waste-stat.zero .stat-value{ color:var(--success); } .result-body{ display:flex; align-items:center; gap:12px; } .diagram{ width:68px; height:52px; flex:0 0 auto; } .diagram-sheet{ fill:var(--diagram-sheet); } .diagram-used{ fill:var(--diagram-used); } .diagram-waste{ fill:var(--diagram-waste); } .diagram-grid{ stroke:var(--diagram-grid); stroke-width:.6; opacity:.6; } .diagram-border{ fill:none; stroke:var(--diagram-border); stroke-width:1.2; opacity:.85; } .result-notes{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .note{ font-size:.85rem; line-height:1.8; } .note-exact{ color:var(--success); font-weight:600; } .note-waste{ color:var(--text); } .note-rotated{ color:var(--text-muted); } .note-grid{ color:var(--text-muted); } .note-zero{ color:var(--waste); } .size-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); border:1px solid var(--gold-border); border-inline-start:3px solid var(--gold); border-radius:10px; padding:12px 14px; margin-bottom:8px; } .size-row-text{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:1.05rem; font-weight:600; } /* ---------- settings tab ---------- */ .settings-card{ background:var(--surface); border:1.5px solid var(--gold-border); border-radius:12px; padding:16px; margin-bottom:14px; } .settings-card .segmented{ margin-bottom:0; } .settings-heading{ font-size:1.05rem; font-weight:700; color:var(--gold-strong); margin:0 0 10px; } .settings-value{ font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif; font-size:1rem; padding:10px 12px; border-radius:10px; background:var(--surface-2); color:var(--text); word-break:break-all; text-align:start; } .settings-gap{ margin-top:14px; } .settings-note{ font-size:.85rem; color:var(--text-muted); margin:0 0 12px; line-height:1.85; } .settings-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; } .settings-actions .btn-ghost{ margin:0; } .settings-msg{ font-size:.85rem; color:var(--success); margin:10px 0 0; line-height:1.7; } .settings-actions .settings-msg{ margin:0; } .settings-msg.is-error{ color:var(--waste); } .settings-logout{ margin-top:6px; } html[lang="en"] .settings-note, html[lang="en"] .settings-msg{ line-height:1.6; } /* material tag on each fixed size: paper = outline, card = tinted, both = solid gold */ .mat-badge{ font-family:var(--font-text); font-size:.72rem; font-weight:700; line-height:1.8; padding:0 10px; border-radius:999px; border:1.5px solid var(--gold-border); background:transparent; color:var(--text-muted); cursor:pointer; } .mat-badge.mat-card{ background:var(--gold-tint); border-color:var(--gold); color:var(--gold-strong); } .mat-badge.mat-both{ background:var(--gold-grad); border-color:transparent; color:#18181A; } .icon-btn{ width:36px; height:36px; border-radius:50%; border:none; background:var(--surface-2); color:var(--text-muted); font-size:1rem; cursor:pointer; flex:0 0 auto; } .icon-btn.danger:active{ background:var(--waste-tint); color:var(--waste); } .section-divider{ height:1px; background:var(--border); margin:22px 0 4px; border:none; } .price-card{ display:flex; flex-direction:column; gap:14px; } .price-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .price-label{ font-size:.95rem; color:var(--text-muted); } .price-value{ font-size:1.35rem; font-weight:700; color:var(--text); } .price-value .unit{ font-size:.8rem; font-weight:400; color:var(--text-muted); } .price-money{ color:var(--gold-strong); } .price-total{ padding-top:12px; border-top:1px dashed var(--border); } .price-total .price-value{ font-size:1.6rem; } .price-hint{ font-size:.85rem; color:var(--text-muted); } .app-nav{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:560px; display:flex; flex-direction:row; background:var(--chrome); padding-bottom:env(safe-area-inset-bottom,0px); z-index:10; box-shadow:0 -1px 0 rgba(216,177,92,.45), 0 -6px 18px rgba(0,0,0,.18); } .nav-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 8px; background:none; border:none; border-top:2px solid transparent; color:var(--on-chrome-muted); cursor:pointer; } .nav-btn svg{ width:21px; height:21px; } .nav-btn span{ font-size:.74rem; } .nav-btn.active{ color:var(--gold-on-dark); border-top-color:var(--gold-on-dark); } .undo-toast{ position:fixed; bottom:calc(96px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%) translateY(20px); background:var(--chrome); color:var(--on-chrome); padding:12px 18px; border-radius:10px; display:flex; align-items:center; gap:18px; font-size:.9rem; z-index:30; opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; box-shadow:0 4px 16px rgba(0,0,0,.28); max-width:90vw; } .undo-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; } .undo-toast button{ background:none; border:none; color:var(--gold-on-dark); font-weight:700; font-size:.9rem; cursor:pointer; padding:0; } @media (prefers-reduced-motion:reduce){ .undo-toast{ transition:none; } } @media (min-width:880px){ .app-shell{ flex-direction:row; max-width:1140px; align-items:flex-start; } .app-frame{ display:flex; flex-direction:column; flex:0 0 250px; position:sticky; top:0; height:100dvh; background:var(--chrome); border-inline-end:1px solid rgba(216,177,92,.4); } /* static, so the logout/language buttons below anchor to the sidebar (.app-frame), not the header */ .app-header{ position:static; text-align:start; padding:32px 28px 20px; box-shadow:none; border-bottom:1px solid rgba(216,177,92,.4); } .app-header h1{ font-size:1.35rem; } html[lang="en"] .app-header h1{ font-size:1.3rem; } .logout-btn{ top:auto; bottom:20px; left:28px; position:absolute; z-index:2; } .app-header .lang-btn{ top:auto; bottom:22px; right:28px; z-index:2; } /* not the login/status cards' switch */ .app-main{ flex:1; padding:40px 44px calc(40px + env(safe-area-inset-bottom,0px)); max-width:820px; } /* undo the mobile bottom-bar positioning (left/bottom/transform) — otherwise translateX(-50%) still shifts the static nav half a sidebar to the side */ /* z-index:auto — a flex item keeps the mobile z-index:10 even when static, which would paint the nav over the logout/language buttons anchored at the bottom of the sidebar */ .app-nav{ position:static; left:auto; bottom:auto; transform:none; z-index:auto; width:auto; max-width:none; flex-direction:column; padding-bottom:0; box-shadow:none; flex:1; padding-top:8px; } .nav-btn{ flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:14px; padding:14px 24px; border-top:none; border-inline-end:3px solid transparent; } .nav-btn.active{ border-inline-end-color:var(--gold-on-dark); background:var(--chrome-2); } .nav-btn svg{ width:20px; height:20px; } .nav-btn span{ font-size:.95rem; } .result-card{ max-width:480px; } #calcResults{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } #calcResults .result-card{ max-width:none; margin-bottom:0; } #calcResults .result-card:first-child{ grid-column:1 / -1; } #sizesList{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } #sizesList .size-row{ margin-bottom:0; } .undo-toast{ bottom:24px; } } /* Phone keyboard open (class set by keyboard.js while a field has focus): the bottom nav would sit on top of the field being typed in, so hide it, and leave scroll room below the content so even the last field can be lifted above the keyboard. */ @media (max-width:879px){ html.kb-open .app-nav{ display:none; } html.kb-open .app-main{ padding-bottom:60vh; } html.kb-open .undo-toast{ bottom:16px; } } @media (hover:hover){ .btn:hover{ filter:brightness(1.08); } .btn-ghost:hover{ background:var(--surface-2); } .icon-btn:hover{ background:var(--waste-tint); color:var(--waste); } .size-row:hover{ border-color:var(--text-muted); } .segmented-btn:hover:not(.active){ color:var(--text); } .nav-btn:hover{ color:var(--on-chrome); } .logout-btn:hover{ color:var(--on-chrome); } .pw-toggle:hover, .auth-link-btn:hover{ color:var(--text); } }