/* Tilki-T — luxury beauty gift cards. Shared design system. */ :root{ --bg-dark:#0a0a0c; --bg-card:#121217; --bg-card-hover:#181820; --bg-elev:#1b1b23; --gold:#d4af37; --gold-light:#f7e7a8; --gold-dark:#aa820a; --gold-gradient:linear-gradient(135deg,#bf953f 0%,#fcf6ba 25%,#b38728 50%,#fbf5b7 75%,#aa771c 100%); --gold-glow:0 0 20px rgba(212,175,55,.35); --text:#f3f3f5; --muted:#adadb9; --line:rgba(212,175,55,.28); --line-soft:rgba(255,255,255,.08); --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --f-head:'Cinzel','Playfair Display',Georgia,serif; --f-body:'Manrope','Inter',system-ui,-apple-system,sans-serif; --r:16px; } *{box-sizing:border-box;margin:0;padding:0} /* overflow-x:clip on too — body's overflow-x:hidden alone doesn't stop the viewport (the scroller) from scrolling sideways. clip doesn't create a scroll container, so the sticky header is unaffected. */ html{scroll-behavior:smooth;overflow-x:clip} body{ background:var(--bg-dark);color:var(--text);font-family:var(--f-body); line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased; background-image: radial-gradient(1200px 620px at 12% -4%,rgba(212,175,55,.09) 0%,transparent 55%), radial-gradient(1000px 720px at 92% 6%,rgba(212,175,55,.055) 0%,transparent 55%), radial-gradient(1100px 1100px at 50% 118%,rgba(212,175,55,.05) 0%,transparent 60%), radial-gradient(circle at 50% 38%,transparent 58%,rgba(0,0,0,.55) 100%); background-attachment:fixed; } /* fine film grain — keeps the black from reading flat/digital */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .container{max-width:1240px;margin:0 auto;padding:0 22px} .container-sm{max-width:760px;margin:0 auto;padding:0 22px} @supports(padding:max(0px)){ .container,.container-sm{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))} } h1,h2,h3{font-family:var(--f-head);letter-spacing:.5px;line-height:1.2} .gold{ background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--gold); } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--gold);color:#000} /* ---------- app-like touch feel ---------- Kills the mobile blue tap-flash and the 300ms click delay, and adds a tactile press-down on every interactive control, so the site reacts like a native shopping app on a phone. Press feedback is instant (no vestibular motion). */ a,button,.btn,.filt,.how-tab,.certwrap,.qty .qb,.faq-q,.lang button,.nav-links a,.nav-drawer a,.nav-close,.thumb,[role="button"]{ -webkit-tap-highlight-color:transparent;touch-action:manipulation; } .btn:active:not([disabled]){transform:scale(.97)} .filt:active,.how-tab:active,.lang button:active{transform:scale(.96)} .certwrap:active{transform:scale(.985)} .qty .qb:active:not([disabled]){transform:scale(.9)} .faq-q:active{opacity:.75} /* ---------- header ---------- */ header{ position:sticky;top:0;z-index:900;background:rgba(10,10,12,.92); backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:14px 0; } .nav{display:flex;align-items:center;justify-content:space-between;gap:16px} .logo{display:flex;align-items:center;gap:11px} .logo-mark{ width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none; background:#0a0a0c;border:1px solid rgba(212,175,55,.4); box-shadow:var(--gold-glow);display:block; animation:logoGlow 4.5s ease-in-out infinite; } .logo-mark img,.logo-mark picture{width:100%;height:100%;display:block} .logo-mark img{object-fit:cover;object-position:center 18%} @keyframes logoGlow{0%,100%{box-shadow:0 0 16px rgba(212,175,55,.3)}50%{box-shadow:0 0 26px rgba(212,175,55,.55)}} .logo-text{font-family:var(--f-head);font-size:24px;font-weight:900;letter-spacing:2px;line-height:1} .logo-sub{font-size:10px;color:var(--muted);letter-spacing:2.2px;text-transform:uppercase} .nav-links{display:flex;gap:26px;list-style:none;font-size:14px;font-weight:500} .nav-links a{color:var(--muted);transition:color .2s} .nav-links a:hover,.nav-links a.on{color:var(--gold-light)} .nav-lang{list-style:none} .nav-drawer{display:none;list-style:none} .nav-actions{display:flex;align-items:center;gap:10px} /* staff sign-in is an internal door, not a shopper CTA — keep it quiet */ .staff-link{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted); letter-spacing:.3px;white-space:nowrap;transition:color .2s} .staff-link i{font-size:14px;color:var(--gold);opacity:.7} .staff-link:hover{color:var(--gold-light)} .burger{display:none;background:none;border:1px solid var(--line);color:var(--gold); width:44px;height:44px;border-radius:10px;font-size:17px;cursor:pointer; align-items:center;justify-content:center;flex:none} /* Scrim/drawer live outside
so fixed positioning uses the viewport (header's backdrop-filter would otherwise trap them). */ .nav-scrim{ display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:940; } .nav-scrim.on{display:block} .btn:focus-visible,.burger:focus-visible,.lang button:focus-visible,a:focus-visible{ outline:2px solid var(--gold);outline-offset:3px} /* ---------- lang switch ---------- */ .lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden} .lang button{ background:none;border:0;color:var(--muted);font:600 12px/1 var(--f-body); padding:9px 11px;cursor:pointer;letter-spacing:.5px;transition:.2s; } .lang button.on{background:var(--gold-gradient);color:#000} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 26px;border-radius:999px;border:1px solid transparent; font:700 14px/1 var(--f-body);cursor:pointer;transition:.22s;white-space:nowrap; } .btn-gold{background:var(--gold-gradient);color:#0a0a0c;box-shadow:0 6px 22px rgba(212,175,55,.25); position:relative;overflow:hidden} .btn-gold>*{position:relative;z-index:1} .btn-gold::after{ content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:0;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);transition:left .6s cubic-bezier(.2,.7,.3,1); } .btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(212,175,55,.45)} .btn-gold:hover::after{left:150%} .btn-ghost{border-color:var(--line);color:var(--gold-light);background:transparent} .btn-ghost:hover{background:rgba(212,175,55,.1)} .btn-plain{border-color:var(--line-soft);color:var(--muted);background:transparent} .btn-plain:hover{color:var(--text);border-color:var(--line)} .btn-lg{padding:17px 38px;font-size:16px} .btn-sm{padding:9px 16px;font-size:12.5px} .btn-block{width:100%} .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important} /* ---------- cards / surfaces ---------- */ .card{background:linear-gradient(180deg,var(--bg-card),#0e0e13);border:1px solid var(--line-soft); border-radius:var(--r);padding:22px;box-shadow:0 1px 0 rgba(255,255,255,.02) inset} .card-gold{border-color:var(--line);box-shadow:0 0 0 1px rgba(212,175,55,.08),0 18px 44px rgba(0,0,0,.45)} .panel{background:linear-gradient(180deg,var(--bg-card),#0e0e13);border:1px solid var(--line-soft); border-radius:var(--r);overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.35)} .panel-head{padding:16px 20px;border-bottom:1px solid var(--line-soft);display:flex; align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .panel-head h3{font-size:16px;color:var(--gold-light)} .panel-body{padding:20px} /* ---------- section titles ---------- */ .sec{padding:64px 0;position:relative} /* a faint separator between stacked content sections, so the page has rhythm instead of reading as one continuous black surface while scrolling */ .container.sec+.container.sec::before,.container.sec+.container-sm.sec::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:110px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.32),transparent); } .sec-title{text-align:center;margin-bottom:38px} .sec-title h2{font-size:clamp(26px,4vw,38px);margin-bottom:10px} /* centered gold hairline flourish beneath every section heading */ .sec-title h2::after{ content:"";display:block;width:58px;height:2px;margin:15px auto 0;border-radius:2px; background:var(--gold-gradient);box-shadow:0 0 14px rgba(212,175,55,.5); } .sec-title p{color:var(--muted);max-width:620px;margin:16px auto 0;font-size:15px} .eyebrow{ display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:3px;text-transform:uppercase; color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:6px 15px;margin-bottom:16px; background:rgba(212,175,55,.06); } /* ---------- motion ---------- */ @keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes shimmer{to{background-position:200% center}} .rise{animation:riseIn .7s cubic-bezier(.2,.7,.3,1) both} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* ---------- forms ---------- */ label.fl{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px;letter-spacing:.3px} input,select,textarea{ width:100%;background:#0e0e13;border:1px solid var(--line-soft);border-radius:11px; padding:13px 15px;color:var(--text);font:400 14.5px/1.4 var(--f-body);transition:.2s; } input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.12)} input::placeholder,textarea::placeholder{color:#5c5c6a} .field{margin-bottom:16px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .hint{font-size:12px;color:var(--muted);margin-top:6px} .err{font-size:12.5px;color:var(--bad);margin-top:6px;display:none} .err.show{display:block} /* ---------- tables ---------- */ table{width:100%;border-collapse:collapse;font-size:13.5px} th{ text-align:start;font-size:11px;letter-spacing:1.4px;text-transform:uppercase; color:var(--muted);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line-soft); white-space:nowrap; } td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle} tbody tr:hover{background:rgba(212,175,55,.04)} .table-wrap{overflow-x:auto} /* ---------- misc ---------- */ .badge{ display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700; letter-spacing:.6px;padding:5px 11px;border-radius:999px;border:1px solid var(--line-soft); color:var(--muted);text-transform:uppercase; } .badge-gold{background:rgba(212,175,55,.13);color:var(--gold-light);border-color:var(--line)} .badge-ok{background:rgba(74,222,128,.12);color:var(--ok);border-color:rgba(74,222,128,.3)} .badge-warn{background:rgba(251,191,36,.12);color:var(--warn);border-color:rgba(251,191,36,.3)} .badge-bad{background:rgba(248,113,113,.12);color:var(--bad);border-color:rgba(248,113,113,.3)} .muted{color:var(--muted)} .small{font-size:12.5px} .center{text-align:center} .stack{display:flex;flex-direction:column;gap:14px} .flex{display:flex;align-items:center;gap:12px} .between{display:flex;align-items:center;justify-content:space-between;gap:12px} .wrap{flex-wrap:wrap} .grow{flex:1} .divider{height:1px;background:var(--line-soft);margin:18px 0} .mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:1px} .hide{display:none!important} /* ---------- warning box ---------- */ .warnbox{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);border-radius:14px; padding:16px;display:flex;gap:13px} .warnbox i{color:var(--warn);font-size:16px;flex:none;margin-top:2px} .warnbox b{display:block;font-size:14px;color:var(--warn);margin-bottom:4px} .warnbox p{font-size:13px;color:var(--muted)} /* ---------- toast ---------- */ #toast{ position:fixed;bottom:26px;left:50%;transform:translate(-50%,120px);z-index:2000; background:var(--bg-elev);border:1px solid var(--line);border-radius:999px; padding:13px 26px;font-size:14px;font-weight:600;color:var(--gold-light); box-shadow:0 12px 40px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.9,.3,1.2); max-width:90vw;text-align:center; } #toast.on{transform:translate(-50%,0)} /* ---------- modal ---------- */ .modal{ position:fixed;inset:0;z-index:1500;background:rgba(5,5,8,.82);backdrop-filter:blur(6px); display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto; } .modal.on{display:flex} .modal-box{ background:var(--bg-card);border:1px solid var(--line);border-radius:20px; width:100%;max-width:480px;padding:30px;position:relative; box-shadow:0 30px 80px rgba(0,0,0,.7);margin:auto; } .modal-x{ position:absolute;top:14px;inset-inline-end:16px;background:none;border:0; color:var(--muted);font-size:22px;cursor:pointer;line-height:1; } .modal-x:hover{color:var(--gold)} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line-soft);padding:44px 0 30px;margin-top:60px;background:#08080a} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:30px} .foot-grid h4{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .foot-grid a,.foot-grid li{color:var(--muted);font-size:13.5px;list-style:none;line-height:2} .foot-grid a:hover{color:var(--gold-light)} .foot-bot{border-top:1px solid var(--line-soft);padding-top:20px;text-align:center;color:#63636f;font-size:12.5px} @media(max-width:900px){ /* Phone top bar is logo + menu only — EN/UK/RU + links live in the drawer. */ .nav{ display:flex;align-items:center;justify-content:space-between; gap:12px;width:100%;min-width:0;box-sizing:border-box; } .logo{min-width:0;flex:1 1 auto;overflow:hidden} .nav-actions{display:flex;align-items:center;gap:0;flex:none} .nav-links{display:none} .nav-drawer{ display:flex;position:fixed;top:0;right:0;bottom:0;left:auto; width:min(320px,86vw);max-width:100%;margin:0;padding:78px 22px 28px; box-sizing:border-box;flex-direction:column;gap:0; background:rgba(12,12,16,.98);border-left:1px solid var(--line);z-index:950; transform:translateX(105%);transition:transform .25s cubic-bezier(.2,.7,.3,1); box-shadow:-18px 0 50px rgba(0,0,0,.45);overflow-y:auto;-webkit-overflow-scrolling:touch; } [dir="rtl"] .nav-drawer{ right:auto;left:0;border-left:0;border-right:1px solid var(--line); transform:translateX(-105%);box-shadow:18px 0 50px rgba(0,0,0,.45); } .nav-drawer.open{transform:none} .nav-drawer[hidden]{display:none!important} .nav-drawer-head{display:flex;justify-content:flex-end;align-items:center; border-bottom:0!important;padding:0 0 12px;margin:-52px 0 8px} .nav-close{ width:44px;height:44px;border-radius:10px;border:1px solid var(--line); background:none;color:var(--gold);font-size:18px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;flex:none; } .nav-close:active{transform:scale(.96)} .nav-drawer li{padding:0;border-bottom:1px solid var(--line-soft)} .nav-drawer a{display:flex;align-items:center;min-height:52px;padding:14px 4px; font-size:16px;color:var(--muted)} .nav-drawer a:hover,.nav-drawer a.on{color:var(--gold-light)} .nav-lang{border-bottom:0;margin-top:auto;padding-top:22px} .nav-lang .lang{width:100%;border-radius:12px} .nav-lang .lang button{flex:1;min-height:44px;padding:12px 8px;font-size:13px;letter-spacing:.2px} .burger{display:inline-flex;flex:none;position:relative;z-index:960} .burger.is-open{background:rgba(212,175,55,.12)} .staff-link{display:none} .nav-actions > .btn{display:none} .nav-actions > .lang{display:none} .nav-scrim[hidden]{display:none!important} .row2{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .btn,.btn-lg,.btn-sm{min-height:44px} body{background-attachment:scroll;font-size:16px} } /* ---------- legal / info pages (offer, privacy, returns, about) ---------- */ .legal{max-width:760px;margin:0 auto;padding:36px 0 20px} .legal .eyebrow{margin-bottom:10px} .legal h1{font-size:clamp(26px,4vw,38px);margin-bottom:8px} .legal .updated{color:var(--muted);font-size:13px;margin-bottom:26px} .legal h2{font-family:var(--f-head);font-size:20px;color:var(--gold-light); margin:30px 0 12px;padding-top:6px} .legal h3{font-size:15.5px;color:var(--text);margin:18px 0 8px} .legal p,.legal li{color:var(--muted);font-size:15px;line-height:1.7} .legal p{margin-bottom:12px} .legal ul,.legal ol{margin:0 0 14px;padding-inline-start:22px} .legal li{margin-bottom:6px} .legal a{color:var(--gold-light);text-decoration:underline;text-underline-offset:2px} .legal strong{color:var(--text)} .legal .req{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:14px; padding:16px 18px;margin:12px 0 4px} .legal .req dt{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:10px} .legal .req dt:first-child{margin-top:0} .legal .req dd{margin:2px 0 0;color:var(--text);font-size:14.5px} .legal .ph{color:var(--gold);background:rgba(212,175,55,.10);border:1px dashed rgba(212,175,55,.4); border-radius:6px;padding:1px 7px;font-size:13px;white-space:nowrap} .legal-draft{display:flex;gap:12px;align-items:flex-start;background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.32);border-radius:14px;padding:14px 16px;margin-bottom:26px} .legal-draft i{color:var(--gold);font-size:17px;margin-top:2px} .legal-draft p{margin:0;font-size:13px;line-height:1.55;color:var(--gold-light)} @media(max-width:560px){ .sec{padding:44px 0} /* spread the three link groups evenly across the row (like desktop) instead of stacking them all down the left; the about block spans the full width above. */ .foot-grid{grid-template-columns:repeat(3,1fr);gap:22px 14px} .foot-grid>:first-child{grid-column:1/-1;margin-bottom:4px} .container,.container-sm{padding-inline:16px} .logo{gap:8px} .logo-mark{width:34px;height:34px} .logo-text{font-size:18px;letter-spacing:1.5px} .logo-sub{display:none} .burger{width:40px;height:40px} .modal{padding:0;align-items:flex-end} .modal-box{ max-width:100%;margin:0;border-radius:20px 20px 0 0; max-height:min(92vh,920px);overflow-y:auto; padding:24px 18px calc(20px + env(safe-area-inset-bottom,0px)); } }