/* ============================================================ Dollarisho Virtual Card — shared design tokens & helpers Load ONCE per page, before the section partials. Requires (via in ): daisyUI 5 + Vazirmatn font. ============================================================ */ /* --- Web fonts (YekanBakh / IRANSansX). Self-host for production. --- */ @font-face{font-family:'YekanBakh';src:url('https://db.onlinewebfonts.com/t/7296ae79f6faca68798b00fbbbee4c22.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'YekanBakh';src:url('https://db.onlinewebfonts.com/t/3231c6a7b3ba5a66dd21bfc6b461165e.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'YekanBakh';src:url('https://db.onlinewebfonts.com/t/e1d06869ee86ac98052a5a1788122235.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap} @font-face{font-family:'IRANSansX';src:url('https://db.onlinewebfonts.com/t/3410011f7a65e03accc7d82c83cc8972.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'IRANSansX';src:url('https://db.onlinewebfonts.com/t/30d96e26d791255c14298567c0abc459.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'IRANSansX';src:url('https://db.onlinewebfonts.com/t/43a7729d6d302133fd095014f2d0932d.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'IRANSansX';src:url('https://db.onlinewebfonts.com/t/bd9be3d2d751fed3d18a597cf3caad41.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} /* --- Design tokens ---------------------------------------- */ :root{ --brand:#19144B; --brand-deep:#0F0B36; --brand-soft:#EBE9F5; --navy:#19144B; --navy-2:#241C63; --ink:#171233; --mut:#6A6588; --line:#E4E1EF; --gold:#F91E5A; --grain: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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); --card-grad:linear-gradient(140deg,#241C63,#19144B 55%,#0F0B36); /* daisyUI 5 theme (Dollarisho) */ --color-base-100:oklch(100% 0 0);--color-base-200:oklch(96.5% 0.006 285);--color-base-300:oklch(92% 0.01 285);--color-base-content:oklch(22% 0.05 285); --color-primary:#19144B;--color-primary-content:#F2F8FE;--color-secondary:#19144B;--color-secondary-content:#E9F1F8; --color-accent:#F91E5A;--color-accent-content:#FFFFFF;--color-neutral:#19144B;--color-neutral-content:#E9F1F8; --color-info:#1C7ED6;--color-info-content:#EAF4FD;--color-success:#19144B;--color-success-content:#F2F8FE; --color-warning:#F91E5A;--color-warning-content:#FFFFFF;--color-error:#D64545;--color-error-content:#FDF0F0; --radius-box:1.25rem;--radius-field:0.75rem;--radius-selector:0.5rem;--border:1px;--depth:1;--noise:0; } /* --- Base ------------------------------------------------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:#F5F4FA;font-family:IRANSansX,Vazirmatn,system-ui,sans-serif;color:var(--ink);min-height:100vh} a:not(.btn){color:var(--brand-deep);text-decoration:none} a:not(.btn):hover{color:var(--gold)} /* --- Keyframes -------------------------------------------- */ @keyframes dsUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}} @keyframes dsFloat{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}} @keyframes dsFloatB{0%,100%{transform:translateY(7px)}50%{transform:translateY(-7px)}} @keyframes dsPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}} @keyframes dsHolo{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}} @keyframes dsSheen{0%{transform:translateX(-120%) rotate(8deg)}60%,100%{transform:translateX(320%) rotate(8deg)}} /* --- Card flip (see assets/js/card-interaction.js) -------- */ .ds-flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.4,0,.2,1);transform:rotateY(0deg)} .ds-card.is-flipped .ds-flipper{transform:rotateY(180deg)} .ds-face-front{opacity:1;transition:opacity .4s ease .18s} .ds-face-back{opacity:0;transition:opacity .4s ease .18s} .ds-card.is-flipped .ds-face-front{opacity:0} .ds-card.is-flipped .ds-face-back{opacity:1} /* --- Navbar responsive (see assets/js/nav.js) ------------- */ .ds-nav-menu{flex:1;justify-content:center;align-items:center;gap:2px;flex-wrap:wrap;display:flex} .ds-nav-back{font-size:12.5px;font-weight:700;color:var(--navy);display:inline} .ds-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid #E7E4F1;background:#fff;color:var(--navy);cursor:pointer;flex:none;transition:background .2s} .ds-burger.is-open{background:var(--brand-soft)} .ds-mobile-menu{flex-basis:100%;overflow:hidden;max-height:0;opacity:0;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s} .ds-mobile-menu.open{max-height:80vh;opacity:1;overflow-y:auto} @media(max-width:920px){ .ds-nav-menu{display:none} .ds-nav-back{display:none} .ds-burger{display:inline-flex} }