/* ===================================================================== GIAN — clear THICK-GLASS keys, trays & popups (v2, local mockup) Scope: icons, icon buttons, dock, dialogs / popovers / tooltips and dropdown / select menus ONLY. Cards, photos, layout, fonts, text pills are untouched (they live in glass.css / pages.css). Recipe (from Saleh's refs): colourless acrylic, bright refractive rim, lighter "thickness" band along the bottom edge, soft lifted shadow, thin charcoal monoline icons. ===================================================================== */ :root{ --ink-ic:#1d1d1f; --k-r:28%; /* squircle radius for keys */ --k-face:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 22%,rgba(255,255,255,.03) 55%,rgba(255,255,255,.10) 82%,rgba(255,255,255,.38) 100%); --k-rim: inset 0 0 0 1.3px rgba(92,94,100,.36), /* refracted dark silhouette */ inset 0 0 0 2.8px rgba(255,255,255,.94), /* bright rim line */ inset 0 3px 1px 2px rgba(255,255,255,.96), /* specular top edge */ inset 0 -4.5px 2px -1px #fff, /* refracted light, bottom lip */ inset 0 0 0 6px rgba(255,255,255,.14), /* clear wall of the slab */ inset 0 0 8px 6px rgba(118,120,128,.17), /* darker inner edge of the wall */ inset 0 16px 14px -10px rgba(255,255,255,.7), /* glow under the top edge */ inset 0 -14px 14px -10px rgba(70,72,80,.10), /* thickness falloff */ 0 0 0 .6px rgba(80,82,90,.22); /* outer hairline */ --k-drop:0 2px 2px -1px rgba(20,22,26,.16),0 8px 12px -6px rgba(20,22,26,.22),0 18px 26px -12px rgba(20,22,26,.26),0 32px 40px -24px rgba(20,22,26,.22); --k-drop-hi:0 1px 1px rgba(20,22,26,.10),0 10px 14px -4px rgba(20,22,26,.20),0 24px 32px -10px rgba(20,22,26,.30),0 36px 44px -24px rgba(20,22,26,.24); --k-press: inset 0 0 0 1px rgba(255,255,255,.9),inset 0 2px 4px rgba(0,0,0,.14),inset 0 -2px 1px rgba(255,255,255,.95), inset 0 0 6px 4px rgba(120,122,128,.14),0 0 0 1px rgba(40,42,48,.08),0 2px 4px -1px rgba(20,22,26,.20); /* popup / dialog slab */ --pop-fill:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(250,250,251,.80) 14%,rgba(246,246,247,.76) 60%,rgba(250,250,251,.80) 90%,rgba(255,255,255,.90) 100%); --pop-rim: inset 0 0 0 1.2px rgba(96,98,104,.30),inset 0 0 0 2.8px rgba(255,255,255,.92),inset 0 3px 1px 2px rgba(255,255,255,.95), inset 0 -5px 2px -1px rgba(255,255,255,.98),inset 0 0 12px 6px rgba(120,122,130,.12), inset 0 22px 22px -16px rgba(255,255,255,.7),inset 0 -22px 22px -16px rgba(70,72,80,.08),0 0 0 .6px rgba(80,82,90,.2); --pop-drop:0 2px 3px -1px rgba(20,22,26,.12),0 16px 26px -12px rgba(20,22,26,.26),0 40px 60px -30px rgba(20,22,26,.30); } /* ---------------------------------------------------------------- KEY */ .gk,.ico-orb,.wa-orb,.circle,.add,.dock a{ position:relative;display:grid;place-items:center;border:0;cursor:pointer;color:var(--ink-ic); border-radius:var(--k-r);background:var(--k-face); -webkit-backdrop-filter:blur(5px) saturate(130%);backdrop-filter:blur(5px) saturate(130%); box-shadow:var(--k-rim),var(--k-drop);isolation:isolate; transition:transform .28s cubic-bezier(.2,.9,.25,1.2),box-shadow .28s} /* inner face of the slab (gives the thick, two-level look) */ .gk::before,.ico-orb::before,.wa-orb::before,.circle::before,.add::before,.dock a::before{ content:"";position:absolute;inset:9%;border-radius:24%;pointer-events:none;z-index:-1; border:1px solid rgba(255,255,255,.8);filter:blur(.4px); background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 75%,rgba(255,255,255,.22)); box-shadow:inset 0 1px 1px rgba(110,112,120,.12),inset 0 -1px 1px rgba(255,255,255,.6),0 1px 1px rgba(110,112,120,.10),0 -1px 1px rgba(110,112,120,.06)} /* specular glint, top-left */ .gk::after,.ico-orb::after,.wa-orb::after,.circle::after,.add::after,.dock a::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:radial-gradient(60% 34% at 30% 8%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%), radial-gradient(70% 22% at 50% 102%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%)} .gk svg,.ico-orb svg,.wa-orb svg,.circle svg,.add svg,.dock a svg{stroke-width:1.6;color:var(--ink-ic);position:relative;z-index:1} :is(a,button).gk:hover,a .ico-orb:hover,.circle:hover,.add:hover,a:hover>.ico-orb,a:hover>.wa-orb{transform:translateY(-2px) scale(1.05);box-shadow:var(--k-rim),var(--k-drop-hi)} :is(a,button).gk:active,.circle:active,.add:active,.dock a:active{transform:translateY(1px) scale(.95);box-shadow:var(--k-press)} :is(.gk,.circle,.add,.dock a):focus-visible{outline:2px solid #1d1d1f;outline-offset:3px} /* sizes: boxes keep the v1 dimensions from glass.css / pages.css (layout untouched); only icon sizes tuned */ .circle.lang{color:var(--ink-ic)} .menu-btn{display:none} @media (max-width:1080px){.menu-btn{display:grid}} /* colour variants are now all clear glass (no sand / green fill) */ .ico-orb.sand,.ico-orb.wa,.pop .ico-orb,.call .wa-orb,.mail .wa-orb{background:var(--k-face);color:var(--ink-ic)} .ico-orb.wa svg,.wa-orb svg{color:var(--ink-ic)} /* WhatsApp: charcoal mark inside clear glass + a tiny green status bead as the only colour accent */ /* keys sitting on a dark photo / dark tray stay readable: denser white face */ .glass.photo :is(.ico-orb,.circle,.gk),.tray.dark :is(.ico-orb,.circle,.gk),.reel-ctl .circle,.hero-in .circle{ background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.62) 45%,rgba(255,255,255,.70) 85%,rgba(255,255,255,.92));color:var(--ink-ic)} /* map marker = glass key (replaces the sand pin drop) */ .mapbox .pinkey{position:absolute;inset-inline-start:50%;top:46%;width:58px;height:58px;transform:translate(50%,-100%); background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.60) 45%,rgba(255,255,255,.68) 85%,rgba(255,255,255,.92))} html[dir=ltr] .mapbox .pinkey{transform:translate(-50%,-100%)} .mapbox .pinkey svg{width:28px;height:28px} /* ------------------------------------------------- MINI KEY (inline icons) icons inside text pills, chips, tags, kickers, inputs, lists → a small glass squircle bead drawn on the svg box itself (pill/chip styling untouched). Arrows stay bare, like the "Let's play →" reference. */ .pill>svg.i:not(.i-arrow):not(.i-arrow-r),.chip>svg.i,.tag>svg.i,.kicker>svg.i,.field>svg.i.ico, .dd-panel a>svg.i,.dd-panel button>svg.i,.fgrid svg.i,.guarantee>svg.i,h3>svg.i,.sheetdoc h2>svg.i,.mega-grid a>svg.i{ box-sizing:content-box;padding:5px;border-radius:30%;color:var(--ink-ic);stroke-width:1.6;overflow:visible; background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.42) 45%,rgba(255,255,255,.55) 85%,rgba(255,255,255,.9)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 1.5px 0 .5px #fff,inset 0 -2px 1px -.5px #fff,inset 0 0 3px 2px rgba(120,122,128,.12), 0 0 0 1px rgba(40,42,48,.07),0 1px 1px rgba(20,22,26,.10),0 5px 9px -4px rgba(20,22,26,.30)} .pill>svg.i:not(.i-arrow):not(.i-arrow-r){width:17px;height:17px;padding:5.5px;margin-inline-start:-10px;margin-block:-4px} .pill.sm>svg.i:not(.i-arrow):not(.i-arrow-r){width:15px;height:15px;padding:4.5px;margin-inline-start:-9px} .pill.lg>svg.i:not(.i-arrow):not(.i-arrow-r){width:19px;height:19px;padding:6.5px;margin-inline-start:-16px;margin-block:-4px} .chip>svg.i{width:13px;height:13px;padding:4px;margin-inline-start:-10px} .tag>svg.i{width:12px;height:12px;padding:3.5px;margin-inline-start:-8px} .kicker>svg.i{width:15px;height:15px;padding:5px;margin-block:-3px} .finder .kicker>svg.i{width:22px;height:22px;padding:6px;margin-block:0} .field>svg.i.ico{width:17px;height:17px;padding:5.5px;bottom:12px;inset-inline-start:12px} .field.has-ico .ctl{padding-inline-start:60px} .hdr-search .field>svg.i.ico{bottom:9px} .dd-panel a>svg.i,.dd-panel button>svg.i{width:16px;height:16px;padding:5px} .fgrid svg.i{width:14px;height:14px;padding:4px;vertical-align:-.5em;margin-inline-end:4px} .guarantee>svg.i{width:22px;height:22px;padding:7px} h3>svg.i{width:17px;height:17px;padding:5px;vertical-align:-.45em} .mega-grid a>svg.i{width:15px;height:15px;padding:4.5px} .pill.wa>svg.i,.pill.dark>svg.i,.pill.ghost-light>svg.i,.tag.dark>svg.i{color:var(--ink-ic)} /* --------------------------------------------------------------- DOCK ref 1: one clear glass pill TRAY holding separate thick squircle keys */ .dock .glass{gap:clamp(8px,1.6vw,22px);padding:13px clamp(14px,2vw,26px);border-radius:999px;align-items:center; background:linear-gradient(180deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.16) 40%,rgba(255,255,255,.12) 64%,rgba(255,255,255,.44) 92%,rgba(255,255,255,.7) 100%); -webkit-backdrop-filter:blur(14px) saturate(140%) brightness(1.05);backdrop-filter:blur(14px) saturate(140%) brightness(1.05); box-shadow: inset 0 0 0 1.4px rgba(92,94,100,.32),inset 0 0 0 3px rgba(255,255,255,.95),inset 0 3px 1px 2px #fff,inset 0 -5px 2px -1px #fff, inset 0 0 0 9px rgba(255,255,255,.14),inset 0 0 12px 9px rgba(118,120,128,.15),inset 0 -16px 18px -12px rgba(0,0,0,.06), 0 0 0 .6px rgba(80,82,90,.22),0 2px 3px rgba(20,22,26,.10),0 18px 26px -10px rgba(20,22,26,.30),0 40px 52px -26px rgba(20,22,26,.32)} .dock .glass::before{inset:9px;border-radius:999px;border:1px solid rgba(255,255,255,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 2px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.6),0 -1px 1px rgba(0,0,0,.04)} .dock .glass::after{mix-blend-mode:normal;opacity:.7; background:radial-gradient(40% 30% at 22% 6%,rgba(255,255,255,.8),transparent 70%),radial-gradient(60% 18% at 50% 104%,rgba(255,255,255,.9),transparent 70%)} .dock a{width:58px;height:58px;border-radius:var(--k-r);transform-origin:50% 100%} .dock a svg{width:30px;height:30px;stroke-width:1.55} .dock a.wa{color:var(--ink-ic)} .dock a:hover,.dock a:focus-visible{transform:translateY(-8px) scale(1.18);background:var(--k-face);box-shadow:var(--k-rim),var(--k-drop-hi)} .dock a.wa:hover{background:var(--k-face);box-shadow:var(--k-rim),0 0 0 5px rgba(37,211,102,.10),var(--k-drop-hi)} .dock a.near{transform:translateY(-3px) scale(1.06)} .dock .badge{top:-5px;inset-inline-end:-5px;min-width:20px;height:20px;border-radius:10px;font:700 11px/20px var(--num);color:var(--ink-ic); background:linear-gradient(180deg,#fff,rgba(255,255,255,.75));box-shadow:inset 0 0 0 1px #fff,0 0 0 1px rgba(40,42,48,.08),0 4px 8px -3px rgba(0,0,0,.3)} /* tooltip = tiny glass capsule */ .dock a .tip,.gtip{background:var(--pop-fill);color:var(--ink-ic);font-weight:600; -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 1.5px 0 #fff,inset 0 -2px 1px -1px #fff,0 0 0 1px rgba(40,42,48,.07),0 8px 14px -6px rgba(20,22,26,.3)} .dock a .tip{bottom:calc(100% + 12px);padding:5px 12px;font-size:13px} .dock a:hover .tip{transform:translateX(-50%) scale(.78)} /* ------------------------------------------------ POPUPS / DIALOGS / MENUS dropdown panels, mega panel, mobile sheet, header search, custom select list */ .dd-panel,.mega,.sheet,.hdr-search,.gsel-pop,.gdialog,.gbubble{ background:var(--pop-fill); -webkit-backdrop-filter:blur(30px) saturate(150%) brightness(1.08);backdrop-filter:blur(30px) saturate(150%) brightness(1.08); box-shadow:var(--pop-rim),var(--pop-drop)} .mega.glass::before,.sheet.glass::before,.hdr-search.glass::before{border-color:rgba(255,255,255,.8)} .mega.glass::after,.sheet.glass::after,.hdr-search.glass::after{mix-blend-mode:normal;opacity:.6; background:radial-gradient(40% 26% at 18% 4%,rgba(255,255,255,.8),transparent 70%),radial-gradient(70% 12% at 50% 102%,rgba(255,255,255,.9),transparent 70%)} .dd-panel,.gsel-pop{padding:10px;border-radius:26px} /* menu options = clear glass capsules on hover / selected */ .dd-panel a,.dd-panel button,.gsel-pop [role=option],.mega-grid a,.sheet nav a,.toc a{transition:background .2s,box-shadow .2s,transform .2s} .dd-panel a:hover,.dd-panel button:hover,.gsel-pop [role=option]:hover,.gsel-pop [role=option].hl,.mega-grid a:hover,.sheet nav a:hover{ background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45) 55%,rgba(255,255,255,.7)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 1.5px 0 #fff,inset 0 -2px 1px -1px #fff,0 0 0 1px rgba(40,42,48,.06),0 6px 12px -6px rgba(20,22,26,.28)} .sheet nav a{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 1.5px 0 #fff,inset 0 -2px 1px -1px rgba(255,255,255,.9),0 0 0 1px rgba(40,42,48,.05),0 4px 8px -5px rgba(20,22,26,.2)} /* custom glass select list (replaces the OS-drawn