/* ============================================================ GOLDBANK — Design System Palette: Vault Black / Ivory / Molten Gold Type: Marcellus (display) · Jost (body) · tabular nums (data) RTL-ready via CSS logical properties (dir="rtl" on ) ============================================================ */ :root{ --vault:#0D0B08; /* deep warm black */ --vault-2:#171310; /* raised surface */ --vault-3:#211c16; /* card surface */ --ivory:#F7F3EA; /* light section bg */ --ivory-2:#EFE8D8; --gold:#C9A24B; /* molten gold accent */ --gold-hi:#F5D678; /* highlight */ --gold-lo:#8a6a25; /* shadow gold */ --bronze:#7A5C1E; --ink:#1c180f; /* text on ivory */ --paper-line:rgba(201,162,75,.25); --up:#3FA576; /* price up */ --down:#C4554D; /* price down */ --radius:14px; --hex:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); --shadow:0 20px 50px rgba(0,0,0,.35); --font-display:'Marcellus', 'Noto Naskh Arabic', serif; --font-body:'Jost', 'Noto Naskh Arabic', sans-serif; } /* language-specific font stacks */ html[lang="ar"]{ --font-display:'Noto Naskh Arabic','Marcellus',serif; --font-body:'Noto Naskh Arabic','Jost',sans-serif; } html[lang="ur"]{ --font-display:'Noto Nastaliq Urdu',serif; --font-body:'Noto Nastaliq Urdu',serif; } html[lang="hi"]{ --font-display:'Noto Sans Devanagari','Marcellus',serif; --font-body:'Noto Sans Devanagari','Jost',sans-serif; } html[lang="ur"] body{ line-height:2.2; } html[lang="ar"] body{ line-height:1.9; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; } } body{ font-family:var(--font-body); background:var(--vault); color:var(--ivory); line-height:1.65; font-size:17px; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:var(--gold); text-decoration:none; } a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.18; letter-spacing:.02em; } .gold-text{ background:linear-gradient(100deg,var(--gold-lo) 0%,var(--gold-hi) 45%,#fff8e1 50%,var(--gold-hi) 55%,var(--gold-lo) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .eyebrow{ font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-block-end:1rem; display:block; font-weight:500; } .num{ font-variant-numeric:tabular-nums; letter-spacing:.02em; } .wrap{ width:min(1180px, 92%); margin-inline:auto; } section{ padding-block:5.5rem; } .section-title{ font-size:clamp(1.9rem,4vw,2.9rem); margin-block-end:.75rem; } .section-sub{ color:rgba(247,243,234,.72); max-width:640px; margin-block-end:3rem; } .light .section-sub{ color:rgba(28,24,15,.72); } /* ---------- Rate band (signature) ---------- */ .rate-band{ background:linear-gradient(90deg,#141007,#1d1608 40%,#141007); border-block:1px solid var(--paper-line); font-size:.85rem; overflow:hidden; white-space:nowrap; padding-block:.5rem; } .rate-band .inner{ display:flex; gap:2.5rem; align-items:center; width:max-content; animation:tick 40s linear infinite; } @keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } html[dir="rtl"] .rate-band .inner{ animation-name:tick-rtl; } @keyframes tick-rtl{ from{ transform:translateX(0);} to{ transform:translateX(50%);} } .rate-band span{ color:rgba(247,243,234,.85); } .rate-band b{ color:var(--gold-hi); font-weight:500; } .rate-band .up{ color:var(--up);} .rate-band .down{ color:var(--down);} .rate-band .live-dot{ display:inline-block; inline-size:8px; block-size:8px; border-radius:50%; background:var(--up); margin-inline-end:.4rem; animation:pulse 1.6s infinite; } @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} } /* ---------- Header ---------- */ header.site{ position:sticky; top:0; z-index:60; background:rgba(13,11,8,.9); backdrop-filter:blur(12px); border-block-end:1px solid var(--paper-line); } .nav{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; gap:1rem; } .brand{ display:flex; align-items:center; gap:.7rem; color:var(--ivory); } .brand .mono{ inline-size:42px; block-size:46px; clip-path:var(--hex); background:linear-gradient(135deg,var(--gold-lo),var(--gold-hi)); display:grid; place-items:center; font-family:var(--font-display); color:var(--vault); font-size:1.1rem; letter-spacing:.05em; } .brand .word{ font-family:'Marcellus',serif; font-size:1.3rem; letter-spacing:.14em; } .brand .word small{ display:block; font-family:var(--font-body); font-size:.58rem; letter-spacing:.34em; color:var(--gold); } nav.menu{ display:flex; gap:1.6rem; align-items:center; font-size:.92rem; } nav.menu a{ color:rgba(247,243,234,.85); letter-spacing:.06em; } nav.menu a:hover,nav.menu a[aria-current="page"]{ color:var(--gold-hi); } .lang-pick{ display:flex; gap:.5rem; font-size:.8rem; } .lang-pick a{ padding:.2rem .5rem; border:1px solid var(--paper-line); border-radius:8px; color:rgba(247,243,234,.8); } .lang-pick a.on{ background:var(--gold); color:var(--vault); border-color:var(--gold); } .burger{ display:none; background:none; border:1px solid var(--paper-line); border-radius:10px; color:var(--gold); font-size:1.3rem; padding:.3rem .7rem; } /* ---------- Buttons ---------- */ .btn{ display:inline-block; padding:.85rem 2rem; border-radius:999px; font-family:var(--font-body); font-size:.95rem; letter-spacing:.08em; cursor:pointer; border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease; } .btn:hover{ transform:translateY(-2px); } .btn-gold{ background:linear-gradient(135deg,var(--gold-lo),var(--gold) 40%,var(--gold-hi)); color:var(--vault); font-weight:600; box-shadow:0 8px 28px rgba(201,162,75,.35); } .btn-ghost{ border-color:var(--gold); color:var(--gold-hi); background:transparent; } .btn-dark{ background:var(--vault); color:var(--gold-hi); border-color:var(--vault); } /* ---------- Hero ---------- */ .hero{ position:relative; overflow:hidden; padding-block:6.5rem 5rem; background: radial-gradient(1200px 500px at 80% -10%, rgba(201,162,75,.18), transparent 60%), radial-gradient(800px 400px at 10% 110%, rgba(122,92,30,.15), transparent 60%), var(--vault); } .hero .grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:3.5rem; align-items:center; } .hero h1{ font-size:clamp(2.4rem,5.2vw,4rem); margin-block:1rem 1.4rem; } .hero p.lede{ color:rgba(247,243,234,.8); font-size:1.12rem; max-width:32rem; margin-block-end:2.2rem; } .hero .ctas{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; } .hero-hex{ position:relative; aspect-ratio:.9; max-inline-size:420px; margin-inline:auto; clip-path:var(--hex); background:linear-gradient(150deg,#2a2110,#0D0B08 60%); border:1px solid var(--paper-line); display:grid; place-items:center; } .hero-hex::before{ content:""; position:absolute; inset:10px; clip-path:var(--hex); border:1px solid rgba(245,214,120,.35); } .rate-card{ text-align:center; padding:2rem; } .rate-card .lbl{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); } .rate-card .big{ font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.1rem); margin-block:.4rem; } .rate-card .unit{ font-size:.85rem; color:rgba(247,243,234,.65); } .rate-card .chg{ margin-block-start:.6rem; font-size:.9rem; } .chg.up{ color:var(--up);} .chg.down{ color:var(--down);} /* ---------- Trust bar ---------- */ .trust{ background:var(--vault-2); border-block:1px solid var(--paper-line); padding-block:2rem; } .trust .row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.2rem; text-align:center; } .trust .cell{ font-size:.82rem; letter-spacing:.05em; color:rgba(247,243,234,.85); } .trust .cell b{ display:block; color:var(--gold-hi); font-family:var(--font-display); font-size:1.05rem; letter-spacing:.06em; margin-block-end:.2rem; font-weight:400; } /* ---------- Cards / grids ---------- */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; } .card{ background:var(--vault-3); border:1px solid var(--paper-line); border-radius:var(--radius); padding:1.8rem; transition:border-color .2s ease, transform .2s ease; } .card:hover{ border-color:var(--gold); transform:translateY(-3px); } .card h3{ color:var(--gold-hi); font-size:1.15rem; margin-block:.8rem .5rem; } .card p{ color:rgba(247,243,234,.72); font-size:.94rem; } .card .ic{ inline-size:46px; block-size:50px; clip-path:var(--hex); background:linear-gradient(135deg,rgba(201,162,75,.25),rgba(245,214,120,.12)); border:1px solid var(--paper-line); display:grid; place-items:center; font-size:1.25rem; } /* ---------- Light sections ---------- */ .light{ background:var(--ivory); color:var(--ink); } .light h2,.light h3{ color:var(--ink); } .light .card{ background:#fff; border-color:rgba(122,92,30,.2); } .light .card p{ color:rgba(28,24,15,.7); } .light .card h3{ color:var(--bronze); } /* ---------- Products ---------- */ .prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.6rem; } .prod{ background:var(--vault-3); border:1px solid var(--paper-line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; } .light .prod{ background:#fff; border-color:rgba(122,92,30,.22); } .prod .ph{ aspect-ratio:1.1; display:grid; place-items:center; background:radial-gradient(circle at 50% 35%, #2e2410, #14100a 75%); } .light .prod .ph{ background:radial-gradient(circle at 50% 35%, #f3e7c9, #e6d6ac 75%); } .prod .ph .bar{ inline-size:58%; aspect-ratio:.62; clip-path:var(--hex); background:linear-gradient(155deg,#f8e6a8 0%,var(--gold) 35%,#8a6a25 70%,#d9b45e 100%); display:grid; place-items:center; color:#3d2c07; text-align:center; font-family:'Marcellus',serif; box-shadow:inset 0 0 30px rgba(255,255,255,.25); } .prod .ph .bar small{ display:block; font-size:.58rem; letter-spacing:.2em; font-family:var(--font-body); } .prod .ph .bar .w{ font-size:1.15rem; } .prod .body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.4rem; flex:1; } .prod .name{ font-family:var(--font-display); font-size:1.06rem; color:var(--gold-hi); } .light .prod .name{ color:var(--bronze); } .prod .meta{ font-size:.78rem; letter-spacing:.08em; color:rgba(247,243,234,.55); text-transform:uppercase; } .light .prod .meta{ color:rgba(28,24,15,.55); } .prod .price{ font-size:1.25rem; margin-block-start:.3rem; } .prod .price small{ font-size:.72rem; color:rgba(247,243,234,.55); display:block; letter-spacing:.05em; } .light .prod .price small{ color:rgba(28,24,15,.55); } .prod .live-tag{ font-size:.68rem; color:var(--up); letter-spacing:.12em; text-transform:uppercase; } .prod .fixed-tag{ font-size:.68rem; color:var(--gold); letter-spacing:.12em; text-transform:uppercase; } .prod .btn{ margin-block-start:auto; text-align:center; padding:.65rem 1rem; font-size:.85rem; } /* store filters */ .filters{ display:flex; gap:.7rem; flex-wrap:wrap; margin-block-end:2.4rem; } .filters button{ background:transparent; border:1px solid var(--paper-line); color:rgba(247,243,234,.8); padding:.5rem 1.3rem; border-radius:999px; cursor:pointer; font-family:var(--font-body); font-size:.88rem; letter-spacing:.06em; } .filters button.on{ background:var(--gold); color:var(--vault); border-color:var(--gold); font-weight:600; } /* ---------- Cart drawer ---------- */ .cart-fab{ position:fixed; inset-block-end:1.4rem; inset-inline-end:1.4rem; z-index:70; background:linear-gradient(135deg,var(--gold-lo),var(--gold-hi)); color:var(--vault); border:none; border-radius:999px; padding:.9rem 1.4rem; font-weight:700; font-size:1rem; box-shadow:var(--shadow); cursor:pointer; } .drawer{ position:fixed; inset-block:0; inset-inline-end:0; inline-size:min(430px,100%); background:var(--vault-2); border-inline-start:1px solid var(--paper-line); z-index:80; transform:translateX(105%); transition:transform .3s ease; display:flex; flex-direction:column; } html[dir="rtl"] .drawer{ transform:translateX(-105%); } .drawer.open{ transform:translateX(0) !important; } .drawer header{ display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.4rem; border-block-end:1px solid var(--paper-line); position:static; background:none; } .drawer h3{ color:var(--gold-hi); } .drawer .items{ flex:1; overflow:auto; padding:1rem 1.4rem; } .ci{ display:flex; gap:.9rem; align-items:center; padding-block:.8rem; border-block-end:1px dashed var(--paper-line); font-size:.92rem; } .ci .t{ flex:1; } .ci .qty{ display:flex; gap:.45rem; align-items:center; } .ci .qty button{ inline-size:26px; block-size:26px; border-radius:8px; border:1px solid var(--paper-line); background:none; color:var(--gold-hi); cursor:pointer; } .drawer .foot{ padding:1.2rem 1.4rem; border-block-start:1px solid var(--paper-line); } .drawer .tot{ display:flex; justify-content:space-between; font-size:1.15rem; margin-block-end:1rem; } .x{ background:none; border:none; color:var(--gold); font-size:1.5rem; cursor:pointer; } /* checkout */ .co-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:2.5rem; } fieldset{ border:1px solid var(--paper-line); border-radius:var(--radius); padding:1.4rem; margin-block-end:1.4rem; } legend{ padding-inline:.6rem; color:var(--gold); letter-spacing:.15em; font-size:.8rem; text-transform:uppercase; } label{ display:block; font-size:.84rem; letter-spacing:.05em; margin-block:.9rem .3rem; color:#0f0c05; } input,select,textarea{ inline-size:100%; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--paper-line); background:var(--vault); color:var(--ivory); font-family:var(--font-body); font-size:.95rem; } .pay-opt{ display:flex; gap:.8rem; align-items:center; border:1px solid var(--paper-line); padding:.9rem 1rem; border-radius:12px; margin-block-end:.7rem; cursor:pointer; } .pay-opt input{ inline-size:auto; } .pay-opt.on{ border-color:var(--gold); background:rgba(201,162,75,.08); } /* ---------- Reviews ---------- */ .reviews .rail{ display:grid; grid-auto-flow:column; grid-auto-columns:min(340px,85%); gap:1.4rem; overflow-x:auto; padding-block-end:1rem; scroll-snap-type:x mandatory; } .rev{ scroll-snap-align:start; background:#fff; border:1px solid rgba(122,92,30,.2); border-radius:var(--radius); padding:1.6rem; color:var(--ink); } .rev .stars{ color:var(--gold); letter-spacing:.2em; margin-block-end:.6rem; } .rev .who{ display:flex; justify-content:space-between; margin-block-start:1rem; font-size:.82rem; color:rgba(28,24,15,.6); } /* ---------- Guides ---------- */ .steps{ counter-reset:step; display:grid; gap:1.2rem; } .step{ display:grid; grid-template-columns:64px 1fr; gap:1.3rem; align-items:start; background:var(--vault-3); border:1px solid var(--paper-line); border-radius:var(--radius); padding:1.5rem; } .step::before{ counter-increment:step; content:counter(step); inline-size:52px; block-size:58px; clip-path:var(--hex); background:linear-gradient(135deg,var(--gold-lo),var(--gold-hi)); color:var(--vault); display:grid; place-items:center; font-family:var(--font-display); font-size:1.4rem; } .step h4{ color:var(--gold-hi); margin-block-end:.35rem; font-size:1.08rem; } .step p{ color:rgba(247,243,234,.75); font-size:.94rem; } /* ---------- Contact ---------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; } .map-frame{ border:1px solid var(--paper-line); border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; } .map-frame iframe{ inline-size:100%; block-size:100%; border:0; } .wa{ display:inline-flex; gap:.6rem; align-items:center; background:#1FAF5E; color:#fff; padding:.8rem 1.6rem; border-radius:999px; font-weight:600; } /* ---------- Footer ---------- */ footer.site{ background:#080604; border-block-start:1px solid var(--paper-line); padding-block:3.5rem 2rem; font-size:.9rem; } footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; margin-block-end:2.5rem; } footer h4{ color:var(--gold); font-size:.8rem; letter-spacing:.25em; text-transform:uppercase; margin-block-end:1rem; font-family:var(--font-body); font-weight:500; } footer a{ display:block; color:rgba(247,243,234,.72); margin-block-end:.55rem; } footer a:hover{ color:var(--gold-hi); } footer .fine{ color:rgba(247,243,234,.45); font-size:.78rem; border-block-start:1px solid rgba(201,162,75,.15); padding-block-start:1.4rem; } /* ---------- Legal pages ---------- */ .legal{ max-width:820px; } .legal h2{ font-size:1.5rem; margin-block:2.4rem .8rem; color:var(--gold-hi); } .legal p,.legal li{ color:#000000; font-size:.97rem; margin-block-end:.8rem; } .legal ul{ padding-inline-start:1.4rem; } /* ---------- Toast ---------- */ .toast{ position:fixed; inset-block-end:5.5rem; inset-inline-end:1.4rem; z-index:90; background:var(--gold); color:var(--vault); padding:.8rem 1.4rem; border-radius:12px; font-weight:600; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:.25s ease; pointer-events:none; } .toast.show{ opacity:1; transform:translateY(0); } /* ---------- Responsive ---------- */ @media (max-width:960px){ .hero .grid,.co-grid,.contact-grid{ grid-template-columns:1fr; } footer .cols{ grid-template-columns:1fr 1fr; } nav.menu{ position:fixed; inset-block-start:0; inset-inline-end:0; block-size:100dvh; inline-size:min(300px,80%); background:var(--vault-2); flex-direction:column; align-items:flex-start; padding:5rem 2rem; transform:translateX(105%); transition:.3s ease; z-index:75; border-inline-start:1px solid var(--paper-line); } html[dir="rtl"] nav.menu{ transform:translateX(-105%); } nav.menu.open{ transform:translateX(0) !important; } .burger{ display:block; z-index:76; } } @media (max-width:560px){ section{ padding-block:3.5rem; } .step{ grid-template-columns:48px 1fr; } footer .cols{ grid-template-columns:1fr; } } /* ---- hero slider ---- */ .hslider{position:relative} .hslide{display:none} .hslide.on{display:block;animation:hfade .7s ease} @keyframes hfade{from{opacity:0}to{opacity:1}} .hdots{display:flex;gap:.6rem;margin-block-start:2rem} .hdots button{inline-size:34px;block-size:5px;border-radius:99px;border:0;cursor:pointer;background:rgba(201,162,75,.3);padding:0} .hdots button.on{background:linear-gradient(90deg,#8a6a25,#F5D678)} .phones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:2.5rem; } .phone{ inline-size:270px; margin-inline:auto; aspect-ratio:9/19.2; border-radius:38px; border:6px solid #2a241c; background:var(--vault); overflow:hidden; position:relative; box-shadow:var(--shadow); display:flex; flex-direction:column; font-size:12px; } .phone .notch{ position:absolute; inset-block-start:8px; inset-inline-start:50%; transform:translateX(-50%); inline-size:84px; block-size:16px; border-radius:99px; background:#000; z-index:5; } .scr{ flex:1; padding:2.4rem .95rem 1rem; overflow:hidden; display:flex; flex-direction:column; gap:.6rem; } .scr h5{ font-family:'Marcellus'; font-size:1rem; color:var(--gold-hi); letter-spacing:.05em; } .chip{ background:var(--vault-3); border:1px solid var(--paper-line); border-radius:14px; padding:.7rem .8rem; } .chip .k{ font-size:.6rem; letter-spacing:.2em; color:var(--gold); text-transform:uppercase; } .chip .v{ font-family:'Marcellus'; font-size:1.05rem; color:var(--ivory); } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; } .pill{ text-align:center; padding:.55rem; border-radius:99px; font-size:.68rem; letter-spacing:.06em; } .pill.buy{ background:linear-gradient(135deg,var(--gold-lo),var(--gold-hi)); color:var(--vault); font-weight:700; } .pill.sell{ border:1px solid var(--gold); color:var(--gold-hi); } .tabbar{ margin-block-start:auto; display:flex; justify-content:space-around; border-block-start:1px solid var(--paper-line); padding-block:.6rem .9rem; font-size:.58rem; color:rgba(247,243,234,.6); text-align:center; } .tabbar b{ color:var(--gold-hi); display:block; font-size:.95rem; } .mini-hex{ inline-size:56px; block-size:62px; clip-path:var(--hex); margin-inline:auto; background:linear-gradient(135deg,var(--gold-lo),var(--gold-hi)); display:grid; place-items:center; color:var(--vault); font-family:'Marcellus'; font-size:1.2rem; } .kbd{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; } .kbd span{ border:1px solid var(--paper-line); border-radius:10px; text-align:center; padding:.45rem; color:var(--ivory); } .cap{ text-align:center; margin-block-start:1rem; font-size:.85rem; color:rgba(247,243,234,.7); } .spec td{ padding:.5rem .8rem; border-block-end:1px solid var(--paper-line); font-size:.9rem; color:rgba(247,243,234,.8); } .spec td:first-child{ color:var(--gold); white-space:nowrap; }