/* ============================================================================= IMGENYA — PREMIUM ENGINEERING & BIM DESIGN SYSTEM · v2026.06 Dark-cinematic default (NVIDIA / Bentley / Tesla register) + clean light mode. Brand: Deep Indigo #22195c · Copper Gold #de9e51 · Engineering Cyan #0696D7 ========================================================================== */ /* ---------------------------------------------------------------------------- 1 · DESIGN TOKENS ------------------------------------------------------------------------- */ :root { /* Dark theme (DEFAULT) */ --bg: #08061a; --bg-2: #0c0a22; --bg-3: #110e30; --bg-elev: #161240; --ink: #eef0ff; --ink-2: #cdceef; --muted: #a6a3d0; --muted-2: #837fb0; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --indigo: #5648c9; --indigo-lt: #7b6ef0; --indigo-deep: #22195c; --gold: #e0a85e; --gold-lt: #f4c886; --gold-deep: #c9852f; --cyan: #19b8e8; --cyan-lt: #46d6ff; --green: #1cc088; --green-lt: #4ce0a8; --violet: #9b8cff; --red: #ff5d6c; --gold-soft: rgba(224,168,94,.12); --cyan-soft: rgba(25,184,232,.12); --green-soft: rgba(28,192,136,.12); --indigo-soft: rgba(123,110,240,.14); /* Glass */ --glass: rgba(20,16,52,.55); --glass-2: rgba(26,21,64,.68); --glass-strong: rgba(14,11,40,.82); --glass-brd: rgba(255,255,255,.10); --glass-brd-2: rgba(255,255,255,.18); --card: rgba(19,15,48,.7); /* Shadows / glows — minimalist, subtle elevation scale */ --sh-sm: 0 1px 2px rgba(0,0,0,.24); --sh-md: 0 4px 16px rgba(0,0,0,.26); --sh-lg: 0 16px 40px rgba(0,0,0,.34); --glow-gold: 0 6px 20px rgba(224,168,94,.14); --glow-cyan: 0 6px 20px rgba(25,184,232,.12); /* Gradients */ --grad-gold: linear-gradient(135deg,#f4c886 0%,#e0a85e 48%,#c9852f 100%); --grad-cyan: linear-gradient(135deg,#46d6ff 0%,#19b8e8 55%,#0a7fb8 100%); --grad-indigo: linear-gradient(135deg,#7b6ef0 0%,#5648c9 60%,#22195c 100%); --grad-ink: linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%); /* Radii */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; --font-title: 'Manrope', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --ease: cubic-bezier(.22,.61,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --maxw: 1320px; } /* ============================================================================= 47 · PRICING DECISION UI · 2026-09 Selectable plans, truthful savings and exact-price checkout handoff. ========================================================================== */ .pricing-selector-grid{align-items:stretch} .pricing-selector-grid>.pricing-tier,.pricing-3>.pricing-tier{display:flex;flex-direction:column} .pricing-tier{padding:36px 32px;border-color:color-mix(in srgb,var(--line) 86%,var(--cyan) 14%);background:linear-gradient(155deg,color-mix(in srgb,var(--card) 96%,var(--cyan) 4%),var(--card));isolation:isolate} .pricing-tier::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 100% 0%,rgba(25,184,232,.07),transparent 15rem)} .pricing-tier .tier-name{padding-right:88px;line-height:1.28} .pricing-tier .tier-desc{min-height:44px;margin-bottom:18px} .pricing-tier .tier-flag{max-width:78%;text-align:center} .pricing-tier.current-offer{background:linear-gradient(155deg,rgba(224,168,94,.10),rgba(11,25,42,.96) 38%,rgba(7,20,35,.98))!important;border-color:rgba(224,168,94,.62)!important} .offer-price-cluster{padding-top:4px} .pricing-tier .tier-old{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:.76rem} .pricing-tier .tier-old .money{font:600 .76rem var(--font-mono)} .pricing-tier.current-offer .tier-price{margin:0 0 15px} .pricing-tier.current-offer .tier-price .money{font-size:clamp(3.55rem,6vw,4.7rem)} .offer-impact{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;margin:4px 0 12px;padding:12px;border:1px solid rgba(224,168,94,.34);border-radius:16px;background:linear-gradient(135deg,rgba(224,168,94,.14),rgba(224,168,94,.05));box-shadow:inset 0 1px rgba(255,255,255,.05)} .offer-impact-score{display:flex;min-width:78px;min-height:66px;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;background:var(--gold);color:#08111d;box-shadow:0 8px 20px rgba(224,168,94,.18)} .offer-impact-score strong{font:800 1.55rem/1 var(--font-title);letter-spacing:-.04em} .offer-impact-score small{margin-top:4px;font:700 .57rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase} .offer-impact-copy{display:flex;min-width:0;flex-direction:column;gap:4px} .offer-impact-copy strong{font:800 .9rem/1.35 var(--font-title);color:var(--ink)} .offer-impact-copy strong i{margin-right:5px;color:var(--gold)} .offer-impact-copy strong .money{color:var(--gold-lt)} .offer-impact-copy small{font-size:.69rem;line-height:1.45;color:var(--muted)} .offer-math{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:9px;margin-bottom:20px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(5,14,26,.42)} .offer-math>span{display:flex;min-width:0;flex-direction:column;gap:3px} .offer-math>span:last-child{text-align:right} .offer-math small{font:.58rem var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .offer-math strong{font:750 .82rem var(--font-title);color:var(--ink);white-space:nowrap} .offer-math strong em{font:500 .62rem var(--font-body);font-style:normal;color:var(--muted)} .offer-math>i{font-size:.74rem;color:var(--gold)} .price-compare-head{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:11px;margin:0 0 13px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--cyan) 24%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--cyan-soft) 60%,transparent)} .price-compare-icon{display:grid;width:40px;height:40px;place-items:center;border:1px solid rgba(70,214,255,.24);border-radius:11px;background:rgba(25,184,232,.12);color:var(--cyan-lt)} .price-compare-head>span:last-child{display:flex;min-width:0;flex-direction:column;gap:3px} .price-compare-head strong{font:750 .79rem/1.3 var(--font-title);color:var(--ink)} .price-compare-head small{font-size:.65rem;line-height:1.4;color:var(--muted)} .price-compare-head.permanent-head{border-color:rgba(224,168,94,.25);background:rgba(224,168,94,.07)} .price-compare-head.permanent-head .price-compare-icon{border-color:rgba(224,168,94,.25);background:rgba(224,168,94,.11);color:var(--gold-lt)} .plan-choice-group{display:flex;flex-direction:column;gap:9px;margin-bottom:2px} .plan-choice{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;min-height:82px;padding:13px;border:1px solid var(--line);border-radius:14px;background:rgba(7,18,32,.48);cursor:pointer;transition:border-color .18s var(--ease),background-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)} .plan-choice:hover{transform:translateY(-1px);border-color:rgba(70,214,255,.32);background:rgba(15,35,57,.68)} .plan-choice:focus-within{outline:3px solid rgba(70,214,255,.23);outline-offset:2px} .plan-choice.selected,.plan-choice:has(input:checked){border-color:rgba(70,214,255,.72);background:linear-gradient(135deg,rgba(25,184,232,.14),rgba(15,34,55,.84));box-shadow:inset 3px 0 0 var(--cyan),0 10px 24px rgba(0,0,0,.12)} .plan-choice.plan-choice-recommended.selected,.plan-choice.plan-choice-recommended:has(input:checked){border-color:rgba(224,168,94,.76);background:linear-gradient(135deg,rgba(224,168,94,.16),rgba(18,31,47,.88));box-shadow:inset 3px 0 0 var(--gold),0 12px 28px rgba(0,0,0,.14)} .plan-choice>input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none} .plan-choice-radio{display:grid;width:20px;height:20px;place-items:center;align-self:center;border:1.5px solid rgba(167,185,207,.55);border-radius:50%;background:rgba(4,13,24,.72);transition:.18s var(--ease)} .plan-choice-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);transform:scale(0);transition:transform .18s var(--ease)} .plan-choice.selected .plan-choice-radio,.plan-choice:has(input:checked) .plan-choice-radio{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,184,232,.12)} .plan-choice.selected .plan-choice-radio::after,.plan-choice:has(input:checked) .plan-choice-radio::after{transform:scale(1)} .plan-choice.plan-choice-recommended.selected .plan-choice-radio,.plan-choice.plan-choice-recommended:has(input:checked) .plan-choice-radio{border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,168,94,.13)} .plan-choice.plan-choice-recommended.selected .plan-choice-radio::after,.plan-choice.plan-choice-recommended:has(input:checked) .plan-choice-radio::after{background:var(--gold)} .plan-choice-body{display:flex;min-width:0;flex-direction:column;gap:9px} .plan-choice-top,.plan-choice-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .plan-choice-top>span:first-child{display:flex;min-width:0;flex-direction:column;gap:3px} .plan-choice-top strong{font:780 .86rem/1.25 var(--font-title);color:var(--ink)} .plan-choice-top small{font-size:.63rem;line-height:1.35;color:var(--muted)} .plan-choice-cost{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:2px;text-align:right} .plan-choice-cost b{font:800 1rem/1.1 var(--font-title);letter-spacing:-.02em;color:var(--ink)} .plan-choice.selected .plan-choice-cost b,.plan-choice:has(input:checked) .plan-choice-cost b{color:var(--cyan-lt)} .plan-choice.plan-choice-recommended.selected .plan-choice-cost b,.plan-choice.plan-choice-recommended:has(input:checked) .plan-choice-cost b{color:var(--gold-lt)} .plan-choice-cost small{font:.58rem var(--font-mono);color:var(--muted)} .plan-choice-cost small .money{color:inherit} .plan-choice-saving{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:4px 8px;border:1px solid rgba(224,168,94,.24);border-radius:999px;background:rgba(224,168,94,.09);font:700 .58rem/1 var(--font-mono);color:var(--gold-lt)} .plan-choice-saving.is-neutral{border-color:rgba(70,214,255,.2);background:rgba(25,184,232,.08);color:var(--cyan-lt)} .plan-choice-meter{display:block;height:3px;overflow:hidden;border-radius:99px;background:rgba(141,164,188,.15)} .plan-choice-meter i{display:block;width:var(--saving,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .35s var(--ease)} .choice-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;margin:-3px 0 0;padding:4px 8px;border:1px solid rgba(224,168,94,.3);border-radius:999px;background:rgba(224,168,94,.11);font:750 .57rem/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--gold-lt)} .choice-badge-cyan{border-color:rgba(70,214,255,.25);background:rgba(25,184,232,.09);color:var(--cyan-lt)} .pricing-tier .plan-note{display:flex;align-items:flex-start;gap:7px;min-height:38px;margin:13px 0 16px;color:var(--muted)} .pricing-tier .plan-note i{margin-top:3px;color:var(--cyan-lt)} .plan-choice-cta{display:flex!important;min-height:52px;margin-top:auto;align-items:center;justify-content:center;gap:9px;text-align:center} .plan-choice-cta [data-plan-cta]{min-width:0} .plan-choice-cta>i:last-child{font-size:.72rem;transition:transform .18s var(--ease)} .plan-choice-cta:hover>i:last-child{transform:translateX(3px)} html.light .pricing-tier{background:linear-gradient(155deg,#fff,#f6f9fc);border-color:#cfdae6} html.light .pricing-tier::before{background:radial-gradient(circle at 100% 0%,rgba(20,147,187,.08),transparent 15rem)} html.light .pricing-tier.current-offer{background:linear-gradient(155deg,#fffaf1,#fff 42%,#f7fafc)!important;border-color:rgba(168,104,20,.42)!important} html.light .offer-math,html.light .plan-choice{background:#f7fafc} html.light .plan-choice:hover{background:#eef7fb} html.light .plan-choice.selected,html.light .plan-choice:has(input:checked){background:linear-gradient(135deg,#e8f8fd,#f8fbfd);border-color:#1685aa} html.light .plan-choice.plan-choice-recommended.selected,html.light .plan-choice.plan-choice-recommended:has(input:checked){background:linear-gradient(135deg,#fff3df,#fbfcfd);border-color:#a86814} html.light .plan-choice-radio{background:#fff} html.light .offer-impact{background:#fff7e9;border-color:rgba(168,104,20,.3)} @media (max-width:900px){ .pricing-tier{padding:34px 27px} .pricing-tier .tier-desc{min-height:0} } @media (max-width:560px){ .pricing-tier{padding:32px 18px 22px;border-radius:20px} .pricing-tier .tier-name{padding-right:0;font-size:1.2rem;flex-wrap:wrap} .pricing-tier .tier-flag{max-width:calc(100% - 36px);padding:6px 11px;font-size:.55rem} .pricing-tier.current-offer .tier-name{padding-top:18px} .pricing-tier.current-offer .tier-price .money{font-size:3.25rem} .offer-impact{grid-template-columns:72px minmax(0,1fr);padding:10px} .offer-impact-score{min-width:72px;min-height:62px} .offer-math{padding:11px 10px} .plan-choice{grid-template-columns:18px minmax(0,1fr);gap:9px;padding:12px 10px} .plan-choice-radio{width:18px;height:18px} .plan-choice-top{gap:7px} .plan-choice-cost b{font-size:.9rem} .plan-choice-top strong{font-size:.8rem} .plan-choice-top small{font-size:.58rem} .plan-choice-saving{white-space:normal;line-height:1.25} .choice-badge{font-size:.51rem} .plan-choice-cta{font-size:.76rem;padding-inline:12px} } @media (max-width:380px){ .offer-impact{grid-template-columns:1fr;text-align:center} .offer-impact-score{min-width:0} .offer-math>i{display:none} .offer-math{grid-template-columns:1fr 1fr} .plan-choice-top{align-items:flex-start;flex-direction:column} .plan-choice-cost{align-items:flex-start;text-align:left} } @media (prefers-reduced-motion:reduce){ .plan-choice,.plan-choice-radio,.plan-choice-radio::after,.plan-choice-meter i,.plan-choice-cta>i:last-child{transition:none!important} } /* ============================================================================= 33 · PRODUCT EXPERIENCE REFRESH · 2026-08 Lightweight code-built BIM hero, real product demos and conversion surfaces. ============================================================================= */ /* Code-built hero background (replaces the heavy video and character image) */ .hero { isolation:isolate; background: radial-gradient(circle at 77% 38%,rgba(25,184,232,.13),transparent 32%), radial-gradient(circle at 8% 84%,rgba(224,168,94,.10),transparent 34%), linear-gradient(145deg,var(--bg) 0%,var(--bg-2) 54%,var(--bg-3) 100%); } .hero-code-bg { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .hero-code-bg::before { content:""; position:absolute; inset:-20%; opacity:.5; background-image: linear-gradient(rgba(70,214,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(70,214,255,.055) 1px,transparent 1px); background-size:64px 64px; transform:perspective(700px) rotateX(62deg) translateY(21%); transform-origin:center bottom; } .hero-code-bg::after { content:""; position:absolute; width:48vw; height:48vw; right:-16vw; top:-24vw; border:1px solid rgba(70,214,255,.12); border-radius:50%; box-shadow:0 0 0 80px rgba(70,214,255,.018),0 0 0 160px rgba(123,110,240,.014); } .hero-code-bg span { position:absolute; border-radius:50%; filter:blur(2px); opacity:.34; animation:heroCodeFloat 10s ease-in-out infinite; } .hero-code-bg span:nth-child(1) { width:220px;height:220px;right:10%;top:20%;background:rgba(25,184,232,.12); } .hero-code-bg span:nth-child(2) { width:140px;height:140px;left:42%;bottom:8%;background:rgba(224,168,94,.10);animation-delay:-3s; } .hero-code-bg span:nth-child(3) { width:90px;height:90px;right:42%;top:12%;background:rgba(123,110,240,.12);animation-delay:-6s; } @keyframes heroCodeFloat { 50% { transform:translate3d(0,-18px,0) scale(1.06); } } .hero-trustline { display:flex; align-items:center; gap:8px; margin-top:15px; color:var(--ink-2); font-size:.82rem; font-weight:600; } .hero-trustline i { color:var(--green-lt); } /* Interactive BIM 4D console */ [hidden]{display:none!important} .bim-console { position:relative;width:min(100%,610px);min-height:600px;overflow:hidden;border:1px solid rgba(70,214,255,.25);border-radius:26px; background:linear-gradient(155deg,rgba(14,20,44,.98),rgba(6,10,25,.97));box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);transition:border-color .25s var(--ease),box-shadow .25s var(--ease) } .bim-console:hover{border-color:rgba(70,214,255,.44);box-shadow:0 34px 100px rgba(0,0,0,.46),0 0 0 1px rgba(70,214,255,.05),inset 0 1px 0 rgba(255,255,255,.09)} .bim-console::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.035) 49%,transparent 66%);transform:translateX(-115%);animation:consoleSheen 9s ease-in-out infinite} @keyframes consoleSheen{0%,72%{transform:translateX(-115%)}92%,100%{transform:translateX(115%)}} .bim-console-head{position:relative;z-index:7;display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;color:#c9d3ea} .bim-console-brand{display:flex;align-items:center;gap:8px;font-weight:700}.bim-console-brand i{color:#46d6ff} .bim-console-status{display:flex;align-items:center;gap:7px;color:#8de9c2}.bim-console-status i{width:7px;height:7px;border-radius:50%;background:#1cc088;box-shadow:0 0 12px #1cc088;animation:statusPulse 1.8s ease-in-out infinite} .bim-console.paused .bim-console-status{color:#f0c77f}.bim-console.paused .bim-console-status i{background:#e0a85e;box-shadow:0 0 12px rgba(224,168,94,.75)} @keyframes statusPulse{50%{opacity:.42;transform:scale(.76)}} .bim-viewport{position:relative;height:468px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 76% 18%,rgba(255,236,196,.82) 0 1.2%,rgba(255,227,181,.24) 7%,transparent 28%),linear-gradient(180deg,#657b8b 0%,#9caeb6 37%,#d0d5d2 58%,#69736f 59%,#313a39 100%)} .bim-viewport::before{content:"";position:absolute;inset:0;z-index:0;opacity:.44;background:linear-gradient(90deg,transparent 0 5%,rgba(39,51,57,.5) 5% 11%,transparent 11% 17%,rgba(43,55,61,.44) 17% 26%,transparent 26% 33%,rgba(37,49,55,.42) 33% 39%,transparent 39% 69%,rgba(44,55,58,.38) 69% 77%,transparent 77% 84%,rgba(39,50,54,.45) 84% 94%,transparent 94%);mask-image:linear-gradient(to top,#000 0 29%,transparent 48%);filter:blur(.7px)} .bim-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none;outline:none} .bim-canvas.dragging{cursor:grabbing}.bim-canvas:focus-visible{box-shadow:inset 0 0 0 3px rgba(70,214,255,.42)} .bim-data-tag{position:absolute;z-index:4;display:flex;gap:7px;align-items:center;padding:7px 9px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(7,13,31,.82);box-shadow:0 9px 24px rgba(0,0,0,.22);backdrop-filter:blur(10px);font-size:.62rem;color:#aeb8d2;pointer-events:none} .bim-data-tag b{color:#fff;font-family:var(--font-mono)}.tag-model{left:15px;top:14px}.tag-clash{right:15px;top:14px}.tag-clash b{color:#4ce0a8}.tag-progress{right:15px;top:49px}.tag-progress b{color:#73defd} .bim-phase-card{position:absolute;z-index:4;left:15px;top:50px;max-width:230px;padding:10px 12px;border:1px solid rgba(70,214,255,.18);border-radius:11px;background:linear-gradient(135deg,rgba(10,19,43,.9),rgba(11,13,35,.82));box-shadow:0 12px 30px rgba(0,0,0,.2);backdrop-filter:blur(11px);pointer-events:none} .bim-phase-card>span{display:flex;align-items:center;gap:6px;color:#8da0bf;font:600 .54rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.bim-phase-card>span i{color:#e0a85e}.bim-phase-card>span b{color:#75e6b7;margin-left:auto}.bim-phase-card>strong{display:block;margin-top:5px;color:#fff;font:700 .78rem var(--font-title)} .bim-selection{position:absolute;z-index:5;right:15px;bottom:49px;width:min(285px,calc(100% - 30px));display:grid;grid-template-columns:38px minmax(0,1fr) 44px;gap:10px;align-items:center;padding:10px;border:1px solid rgba(224,168,94,.34);border-radius:13px;background:rgba(8,13,30,.9);box-shadow:0 16px 38px rgba(0,0,0,.3);backdrop-filter:blur(14px)} .bim-selection-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:rgba(224,168,94,.14);color:#f1c779}.bim-selection>div:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}.bim-selection small{color:#8e9bb6;font:600 .48rem var(--font-mono);letter-spacing:.07em;text-transform:uppercase}.bim-selection strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:.72rem}.bim-selection span{color:#aeb8d2;font-size:.58rem}.bim-selection span b{color:#e7edf8;font-weight:600}.bim-selection button{width:44px;height:44px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.04);color:#b9c5dc;cursor:pointer;transition:.2s var(--ease)}.bim-selection button:hover,.bim-selection button:focus-visible{color:#fff;background:rgba(255,255,255,.11);outline:2px solid rgba(70,214,255,.3);outline-offset:2px} .bim-hint{position:absolute;z-index:4;left:50%;bottom:12px;translate:-50% 0;display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:calc(100% - 28px);padding:7px 10px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(7,12,27,.77);color:#9ca9c1;font:600 .54rem var(--font-mono);white-space:nowrap;pointer-events:none;backdrop-filter:blur(9px)}.bim-hint i{color:#72ddfb} .bim-console-foot{position:relative;z-index:7;display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:13px;min-height:78px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);color:#c9d3ea} .bim-build-controls{display:flex;gap:7px}.bim-tool{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.045);color:#cbd6ea;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}.bim-tool.primary{background:linear-gradient(135deg,rgba(25,184,232,.26),rgba(123,110,240,.22));border-color:rgba(70,214,255,.32);color:#8ce9ff}.bim-tool:hover:not(:disabled),.bim-tool:focus-visible{transform:translateY(-1px);background:rgba(70,214,255,.14);border-color:rgba(70,214,255,.4);color:#fff;outline:2px solid rgba(70,214,255,.28);outline-offset:2px}.bim-tool:active:not(:disabled){transform:none;background:rgba(70,214,255,.22)}.bim-tool:disabled{opacity:.35;cursor:not-allowed} .bim-timeline{min-width:0}.bim-timeline>div{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:1px;color:#8491aa;font-size:.52rem;letter-spacing:.07em;text-transform:uppercase}.bim-timeline>div b{color:#e6edf9;font-size:.56rem}.bim-timeline input{--bim-progress:0%;width:100%;height:44px;margin:0;appearance:none;background:transparent;cursor:pointer}.bim-timeline input::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,#46d6ff 0 var(--bim-progress),rgba(255,255,255,.12) var(--bim-progress) 100%)}.bim-timeline input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;margin-top:-7px;border:3px solid #08101f;border-radius:50%;background:#e0a85e;box-shadow:0 0 0 2px rgba(224,168,94,.35)}.bim-timeline input:focus-visible{outline:2px solid rgba(70,214,255,.35);outline-offset:2px;border-radius:8px} /* Product-focused conversion section */ .product-intro { position:relative; } .product-feature-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:42px; } .product-feature-card { overflow:hidden;border:1px solid var(--line);border-radius:24px;background:linear-gradient(155deg,var(--glass-2),var(--glass));box-shadow:var(--sh-md);transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease); } .product-feature-card:hover{transform:translateY(-5px);border-color:rgba(70,214,255,.28);box-shadow:var(--sh-lg)} .product-shot { position:relative;display:block;aspect-ratio:16/8.9;overflow:hidden;background:var(--bg-3); } .product-shot img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s var(--ease),filter .3s var(--ease)} .product-feature-card:hover .product-shot img{transform:scale(1.025);filter:saturate(1.06)} .product-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(4,6,20,.78));pointer-events:none} .shot-badge{position:absolute;z-index:2;left:18px;bottom:16px;display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:rgba(8,10,29,.86);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:.72rem;font-weight:700;backdrop-filter:blur(10px)} .shot-badge i{color:#46d6ff}.product-feature-copy{padding:24px}.product-logo{display:flex;align-items:center;gap:12px;margin-bottom:14px}.product-logo small{font:.62rem var(--font-mono);letter-spacing:.13em;color:var(--muted)}.product-logo h3{font:700 1.35rem var(--font-title);margin:2px 0 0;color:var(--ink)} .product-icon{width:45px;height:45px;border-radius:12px;display:grid;place-items:center;font-size:1.05rem}.product-icon.revit{background:rgba(25,184,232,.13);color:var(--cyan-lt)}.product-icon.cad{background:rgba(37,99,235,.14);color:#67a1ff} .product-feature-copy>p{min-height:54px;color:var(--ink-2);font-size:.92rem;line-height:1.65}.product-proof{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.product-proof span{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:.72rem;font-weight:600}.product-proof i{color:var(--green-lt)} .product-price-row{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:12px;margin:17px 0;color:var(--ink-2);font-size:.75rem}.product-price-row strong{font:800 1.75rem var(--font-title);color:var(--gold-lt)}.product-price-row small{grid-column:2;color:var(--muted);text-align:right;margin-top:2px} /* Real screenshots and lightweight video facades */ .demo-intro,.tutorial-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin:6px 0 25px}.demo-intro h2,.tutorial-heading h3{font:700 clamp(1.45rem,2.4vw,2rem) var(--font-title);margin:12px 0 5px;color:var(--ink)}.demo-intro p,.tutorial-heading p{max-width:590px;color:var(--ink-2);line-height:1.65}.tutorial-heading{margin-top:42px}.tutorial-heading h3{font-size:1.55rem} .real-shot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.real-shot{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--glass);box-shadow:var(--sh-sm);transition:transform .22s var(--ease),border-color .22s var(--ease)}.real-shot:hover{transform:translateY(-3px);border-color:rgba(70,214,255,.3)}.real-shot>img{width:100%;aspect-ratio:16/8.8;object-fit:cover;display:block;background:var(--bg-3)}.real-shot figcaption{display:flex;align-items:center;gap:11px;padding:13px 15px;color:var(--ink)}.real-shot figcaption>i{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--cyan-soft);color:var(--cyan-lt)}.real-shot figcaption span{display:flex;flex-direction:column;gap:2px}.real-shot figcaption b{font-size:.82rem}.real-shot figcaption small{color:var(--muted);font-size:.68rem} .tutorial-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.video-lite{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;padding:0;border:1px solid var(--line);border-radius:18px;background:#080b18;cursor:pointer;text-align:left;box-shadow:var(--sh-md);transition:transform .25s var(--ease),border-color .25s var(--ease)}.video-lite:hover,.video-lite:focus-visible{transform:translateY(-3px);border-color:rgba(70,214,255,.48);outline:3px solid rgba(70,214,255,.18);outline-offset:3px}.video-lite>img{width:100%;height:100%;object-fit:cover;display:block}.video-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,5,15,.05),rgba(3,5,15,.86))}.video-play{position:absolute;left:50%;top:46%;translate:-50% -50%;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#10152b;box-shadow:0 14px 35px rgba(0,0,0,.35);transition:transform .22s var(--ease),background .22s var(--ease)}.video-lite:hover .video-play{transform:scale(1.08);background:#46d6ff}.video-copy{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:4px;color:#fff}.video-copy small{font:.58rem var(--font-mono);letter-spacing:.13em;color:#73defd}.video-copy b{font:700 .95rem var(--font-title)}.video-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-lite.loaded .video-shade,.video-lite.loaded .video-play,.video-lite.loaded .video-copy,.video-lite.loaded>img{display:none} /* Membretes / CAD product page */ .product-hero-shot{position:relative;width:100%;height:100%;overflow:hidden}.product-hero-shot>img{width:100%;height:100%;object-fit:cover;object-position:center}.product-hero-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(4,7,20,.5));pointer-events:none}.product-shot-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;background:rgba(8,12,28,.88);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:.67rem;font-weight:700;box-shadow:var(--sh-md)}.product-shot-chip i{color:#46d6ff}.chip-top{top:17px;right:17px}.chip-bottom{bottom:18px;left:17px}.product-shot-play{position:absolute;z-index:3;right:17px;bottom:17px;display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 13px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:#fff;color:#11172b;font-weight:800;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.28);transition:.2s var(--ease)}.product-shot-play:hover,.product-shot-play:focus-visible{transform:translateY(-2px);background:#46d6ff;outline:3px solid rgba(70,214,255,.2);outline-offset:3px}.product-shot-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .product-tutorial-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:30px;align-items:center;padding:12px 0}.video-lite-wide{aspect-ratio:16/9}.tutorial-benefits h2{font:700 clamp(1.7rem,3vw,2.45rem) var(--font-title);margin:14px 0 10px;color:var(--ink)}.tutorial-benefits>p{color:var(--ink-2);line-height:1.7}.product-poster{max-height:620px;background:#fff}.product-poster img{object-fit:contain!important;object-position:center!important}.pricing-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1240px}.pricing-3 .tier{min-width:0}.usd-inline{display:block;margin-top:3px;color:var(--cyan-lt);font:600 .62rem var(--font-mono);white-space:nowrap}.currency-usd-tag{font-size:.68rem;color:var(--cyan-lt);font-family:var(--font-mono)} .usd-inline[hidden],.currency-usd-tag[hidden]{display:none!important} .cad-launch-badge{color:#f5c778;background:rgba(224,168,94,.12);border:1px solid rgba(224,168,94,.38);box-shadow:none} html.light .cad-launch-badge{color:#774708;background:rgba(168,104,20,.10);border-color:rgba(135,84,15,.28)} .promo-date-chip{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 10px;border:1px solid rgba(28,192,136,.34);border-radius:999px;background:rgba(28,192,136,.10);color:var(--green-lt);font:700 .66rem var(--font-mono)} .promo-date-chip i{font-size:.7rem}.promo-date-chip time{color:var(--ink)} html.promo-cad-expired .pricing-3{grid-template-columns:repeat(2,minmax(0,1fr));max-width:940px} html.promo-cad-expired .pricing-3 .tier.perpetua{grid-column:auto} .tier.promo-current{border-color:rgba(70,214,255,.38);box-shadow:0 22px 58px rgba(25,184,232,.13)} .btn .money{font-family:var(--font-title)!important;letter-spacing:0} /* Global interaction and navigation polish */ a,button,[role="button"]{touch-action:manipulation}.nav-links{gap:20px}.nav-links a{font-size:.78rem}.nav-links a:focus-visible,.btn:focus-visible,.mk-tab:focus-visible{outline:3px solid rgba(70,214,255,.34);outline-offset:3px} html.light .bim-console{background:linear-gradient(155deg,#101a32,#0b1225);box-shadow:0 28px 70px rgba(30,58,95,.22)} html.light .product-feature-card,html.light .real-shot{background:#fff}.product-feature-card .btn{min-height:44px} @media (max-width:1180px){.bim-console{min-height:547px}.bim-viewport{height:415px}.pricing-3{grid-template-columns:1fr 1fr}.pricing-3 .tier.perpetua{grid-column:1/-1}html.promo-cad-expired .pricing-3 .tier.perpetua{grid-column:auto}.nav-links{gap:13px}.nav-links a{font-size:.73rem}} @media (max-width:900px){.product-feature-grid,.product-tutorial-layout{grid-template-columns:1fr}.bim-console{width:min(100%,650px);min-height:522px}.bim-viewport{height:390px}.hero-right{align-items:center}.product-poster{max-height:none}.tutorial-benefits{order:-1}} @media (max-width:720px){.product-feature-grid,.real-shot-grid,.tutorial-product-grid,.pricing-3,html.promo-cad-expired .pricing-3{grid-template-columns:1fr}.pricing-3 .tier.perpetua,html.promo-cad-expired .pricing-3 .tier.perpetua{grid-column:auto}.demo-intro,.tutorial-heading{align-items:flex-start;flex-direction:column}.bim-console{min-height:472px;border-radius:20px}.bim-viewport{height:340px}.bim-console-head{padding:0 13px}.bim-console-foot{gap:9px;padding:9px 10px}.bim-data-tag{font-size:.55rem}.tag-model{left:10px;top:10px}.tag-clash{right:10px;top:10px}.tag-progress{right:10px;top:43px}.bim-phase-card{left:10px;top:45px}.bim-selection{right:10px;bottom:48px}.product-feature-copy{padding:20px}.product-feature-copy>p{min-height:0}.product-price-row strong{font-size:1.5rem}.product-shot-chip{display:none}.product-shot-play span{display:none}.product-shot-play{width:48px;height:48px;padding:0;justify-content:center}.real-shot figcaption small{display:none}} @media (max-width:480px){.bim-console{min-height:472px}.bim-viewport{height:340px}.bim-console-brand{font-size:.55rem}.bim-console-status span{display:none}.bim-console-foot{grid-template-columns:auto minmax(80px,1fr) auto}.bim-build-controls{gap:4px}.bim-phase-card{top:10px;max-width:205px}.tag-model,.tag-clash{display:none}.tag-progress{top:10px}.bim-selection{left:10px;right:10px;width:auto}.bim-hint{bottom:9px;max-width:calc(100% - 20px);white-space:normal;text-align:center;line-height:1.35}.video-copy b{font-size:.82rem}.video-play{width:50px;height:50px}.hero-trustline{font-size:.74rem}} @media (max-width:380px){.bim-console-foot{grid-template-columns:1fr auto;min-height:119px}.bim-timeline{grid-column:1/-1;grid-row:2}.bim-build-controls{grid-column:1;grid-row:1}.bim-console-foot>.bim-tool{grid-column:2;grid-row:1}.bim-viewport{height:320px}.bim-console{min-height:493px}} @media (max-width:380px){.nav-cta>.buy-trigger{display:none}.brand{gap:8px}.brand-txt .b-name{font-size:1rem}} @media (prefers-reduced-motion:reduce){.hero-code-bg span,.bim-console::before,.bim-console-status i{animation:none!important}.bim-console,.bim-tool,.product-feature-card,.real-shot,.video-lite{transition:none!important}} /* Light theme overrides */ html.light { --bg: #f7f9fc; --bg-2: #eef2f8; --bg-3: #e6ebf3; --bg-elev: #ffffff; --ink: #141727; --ink-2: #3a3f55; --muted: #5d6479; --muted-2: #8a90a6; --line: #e3e8f0; --line-2: #d3dae6; --indigo: #5648c9; --indigo-lt: #6c5ce7; --cyan: #0696D7; --cyan-lt: #12AADD; --green: #0F9B6A; --green-lt: #16b87f; --gold: #cf8f3f; --gold-lt: #de9e51; --gold-deep: #b06f22; --gold-soft: rgba(222,158,81,.10); --cyan-soft: rgba(6,150,215,.08); --green-soft: rgba(15,155,106,.08); --indigo-soft: rgba(86,72,201,.08); --glass: rgba(255,255,255,.72); --glass-2: rgba(255,255,255,.82); --glass-strong: rgba(255,255,255,.9); --glass-brd: rgba(34,25,92,.10); --glass-brd-2: rgba(34,25,92,.16); --card: #ffffff; --sh-sm: 0 1px 2px rgba(15,23,42,.06); --sh-md: 0 4px 16px rgba(15,23,42,.08); --sh-lg: 0 16px 40px rgba(15,23,42,.10); --glow-gold: 0 6px 18px rgba(222,158,81,.14); --glow-cyan: 0 6px 18px rgba(6,150,215,.12); } /* ---------------------------------------------------------------------------- 2 · RESET & BASE ------------------------------------------------------------------------- */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; } body { background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.65; overflow-x:hidden; position:relative; transition:background .5s var(--ease), color .5s var(--ease); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; } button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } ul { list-style:none; } ::selection { background:rgba(224,168,94,.32); color:var(--ink); } :focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; } /* Scrollbar */ ::-webkit-scrollbar { width:11px; height:11px; } ::-webkit-scrollbar-track { background:var(--bg-2); } ::-webkit-scrollbar-thumb { background:linear-gradient(var(--gold),var(--gold-deep)); border-radius:99px; border:2px solid var(--bg-2); } /* Smooth themed transition on key surfaces */ nav,.topbar,.glass,.s-card,.svc-card,.price-card,.acad-card,.test-card,.faq-item, .stat,.calc-wrap,.cmp,.cmp td,.cmp th,.addin,.addin-feat,.foot,select,input,.tier { transition:background .5s var(--ease),color .5s var(--ease), border-color .5s var(--ease),box-shadow .45s var(--ease), transform .5s var(--ease); } /* ---------------------------------------------------------------------------- 3 · LAYOUT UTILITIES ------------------------------------------------------------------------- */ .wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; } .section { position:relative; z-index:2; padding:104px 0; } .section.tight { padding:74px 0; } .center { text-align:center; } .eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold); background:var(--gold-soft); border:1px solid rgba(224,168,94,.28); padding:7px 16px; border-radius:var(--r-pill); } .eyebrow.cyan { color:var(--cyan); background:var(--cyan-soft); border-color:rgba(25,184,232,.28); } .eyebrow.green { color:var(--green); background:var(--green-soft); border-color:rgba(28,192,136,.28); } .eyebrow.violet{ color:var(--violet);background:var(--indigo-soft);border-color:rgba(123,110,240,.30); } .eyebrow i { font-size:.8rem; } .sec-title { font-family:var(--font-title); font-weight:800; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.06; letter-spacing:-1.2px; color:var(--ink); margin-top:18px; } .sec-title .grad { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .sec-title .grad-c { background:var(--grad-cyan); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .sec-sub { font-size:1.02rem; color:var(--muted); max-width:660px; margin:18px auto 0; line-height:1.75; } .sec-head { max-width:760px; margin:0 auto; } /* Scroll reveal (snappy, GPU-only) */ .reveal { opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease), transform .55s var(--ease); } .reveal.in { opacity:1; transform:none; } .reveal.left { transform:translateX(-34px); } .reveal.left.in { transform:none; } .reveal.right { transform:translateX(34px); } .reveal.right.in { transform:none; } .reveal.zoom { transform:scale(.94); } .reveal.zoom.in { transform:none; } .reveal.in { will-change:auto; } /* Defensive: split-text elements must never stay invisible */ .reveal[data-split]{ opacity:1; transform:none; } /* ---------------------------------------------------------------------------- 4 · AMBIENT BACKGROUND (aurora mesh + technical grid canvas + grain) ------------------------------------------------------------------------- */ #grid-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; } html.light #grid-canvas { opacity:.6; } .aurora { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .aurora span { position:absolute; border-radius:50%; filter:blur(64px); opacity:.4; will-change:transform; } .aurora .a1 { width:46vw; height:46vw; left:-12vw; top:-8vw; background:radial-gradient(circle,rgba(86,72,201,.55),transparent 70%); animation:drift1 26s var(--ease) infinite alternate; } .aurora .a2 { width:40vw; height:40vw; right:-10vw; top:6vh; background:radial-gradient(circle,rgba(25,184,232,.4),transparent 70%); animation:drift2 30s var(--ease) infinite alternate; } .aurora .a3 { width:38vw; height:38vw; left:24vw; bottom:-14vw; background:radial-gradient(circle,rgba(224,168,94,.32),transparent 70%); animation:drift3 34s var(--ease) infinite alternate; } html.light .aurora span { opacity:.35; } @keyframes drift1 { to { transform:translate(8vw,6vh) scale(1.15); } } @keyframes drift2 { to { transform:translate(-7vw,9vh) scale(1.1); } } @keyframes drift3 { to { transform:translate(6vw,-7vh) scale(1.2); } } .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------------------------------------------------------------------------- 5 · TOP UTILITY BAR (language + currency + theme) ------------------------------------------------------------------------- */ .topbar { position:fixed; top:0; left:0; width:100%; z-index:1001; background:var(--glass-strong); backdrop-filter:blur(20px) saturate(140%); border-bottom:1px solid var(--line); height:38px; display:flex; align-items:center; font-size:.76rem; } .topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; } .topbar-left { display:flex; align-items:center; gap:16px; color:var(--muted); } .topbar-left .tb-item { display:flex; align-items:center; gap:6px; white-space:nowrap; } .topbar-left .tb-item i { color:var(--gold); font-size:.74rem; } .topbar-right { display:flex; align-items:center; gap:8px; } /* Selector (lang / currency) */ .selector { position:relative; } .sel-btn { display:flex; align-items:center; gap:7px; background:var(--glass); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 10px 4px 7px; font-family:var(--font-title); font-weight:600; font-size:.74rem; color:var(--ink-2); transition:all .25s var(--ease); } .sel-btn:hover { border-color:var(--gold); color:var(--ink); } .sel-btn .flag { width:20px; height:14px; border-radius:3px; overflow:hidden; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.15); } .sel-btn .caret { font-size:.6rem; opacity:.7; transition:transform .25s; } .selector.open .sel-btn .caret { transform:rotate(180deg); } .sel-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:182px; background:var(--glass-strong); backdrop-filter:blur(24px); border:1px solid var(--line-2); border-radius:var(--r); padding:6px; box-shadow:var(--sh-lg); opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97); transform-origin:top right; transition:all .28s var(--ease-spring); z-index:30; } .selector.open .sel-menu { opacity:1; visibility:visible; transform:none; } .sel-opt { display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border-radius:11px; font-size:.82rem; color:var(--ink-2); font-family:var(--font-body); text-align:left; transition:background .2s; } .sel-opt:hover { background:var(--glass-2); color:var(--ink); } .sel-opt.active { background:var(--gold-soft); color:var(--gold); font-weight:700; } .sel-opt .flag { width:24px; height:16px; border-radius:3px; overflow:hidden; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.12); } .sel-opt small { margin-left:auto; color:var(--muted-2); font-family:var(--font-mono); font-size:.68rem; } .theme-btn { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--glass); border:1px solid var(--line); color:var(--gold); font-size:.82rem; transition:all .3s var(--ease); } .theme-btn:hover { transform:rotate(18deg) scale(1.08); border-color:var(--gold); } /* Flag SVG sizing inside */ .flag svg { width:100%; height:100%; display:block; } /* ---------------------------------------------------------------------------- 6 · NAVBAR ------------------------------------------------------------------------- */ nav#nav { position:fixed; top:38px; left:0; width:100%; z-index:1000; background:transparent; padding:18px 0; transition:all .45s var(--ease); } nav#nav.scrolled { background:var(--glass-strong); backdrop-filter:blur(22px) saturate(150%); border-bottom:1px solid var(--line); padding:11px 0; box-shadow:var(--sh-sm); } .nav-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand { display:flex; align-items:center; gap:13px; } .brand-logo { width:50px; height:50px; border-radius:50%; object-fit:contain; flex-shrink:0; border:2px solid rgba(224,168,94,.55); padding:1px; background:var(--bg-2); box-shadow:0 0 22px rgba(224,168,94,.3); transition:transform .4s var(--ease-spring); } .brand:hover .brand-logo { transform:rotate(-6deg) scale(1.06); } .brand-txt .b-name { font-family:var(--font-title); font-weight:800; font-size:1.5rem; letter-spacing:.5px; line-height:1; color:var(--ink); } .brand-txt .b-name span { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .brand-txt .b-sub { font-family:var(--font-mono); font-size:.54rem; letter-spacing:2.5px; color:var(--muted); margin-top:3px; text-transform:uppercase; } .nav-links { display:flex; align-items:center; gap:30px; } .nav-links a { position:relative; font-family:var(--font-title); font-weight:600; font-size:.88rem; letter-spacing:.3px; color:var(--ink-2); padding:5px 0; transition:color .25s; } .nav-links a::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--grad-gold); border-radius:2px; transition:width .3s var(--ease); } .nav-links a:hover { color:var(--ink); } .nav-links a:hover::after { width:100%; } .nav-links a.hot { color:var(--gold); } .nav-cta { display:flex; align-items:center; gap:12px; } /* Mobile nav */ .burger { display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--glass); color:var(--ink); font-size:1.1rem; } .mobile-menu { display:none; } /* ---------------------------------------------------------------------------- 7 · BUTTONS ------------------------------------------------------------------------- */ .btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-title); font-weight:700; font-size:.92rem; letter-spacing:.4px; padding:14px 26px; border-radius:14px; overflow:hidden; white-space:nowrap; transition:transform .3s var(--ease-spring), box-shadow .35s var(--ease), background .3s; } .btn i { font-size:.95em; } .btn-gold { background:var(--grad-gold); color:#1a1206; box-shadow:0 10px 30px rgba(224,168,94,.35); } .btn-gold:hover { transform:translateY(-3px); box-shadow:0 16px 44px rgba(224,168,94,.5); } .btn-cyan { background:var(--grad-cyan); color:#04121a; box-shadow:0 10px 30px rgba(25,184,232,.32); } .btn-cyan:hover { transform:translateY(-3px); box-shadow:0 16px 44px rgba(25,184,232,.48); } .btn-ghost { background:var(--glass); border:1.5px solid var(--glass-brd-2); color:var(--ink); backdrop-filter:blur(10px); } .btn-ghost:hover { transform:translateY(-3px); border-color:var(--gold); box-shadow:var(--sh-md); } .btn-dark { background:var(--bg-elev); border:1px solid var(--line-2); color:var(--ink); } .btn-dark:hover { transform:translateY(-3px); box-shadow:var(--sh-md); } .btn-sm { padding:10px 18px; font-size:.82rem; border-radius:11px; } .btn-lg { padding:18px 34px; font-size:1.05rem; border-radius:16px; } .btn-block { width:100%; } .btn[disabled] { opacity:.55; cursor:not-allowed; } /* Shine sweep */ .btn-gold::before,.btn-cyan::before,.btn-shine::before { content:''; position:absolute; top:0; left:-150%; width:60%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-22deg); } .btn-gold:hover::before,.btn-cyan:hover::before,.btn-shine:hover::before { animation:shine .9s var(--ease); } @keyframes shine { to { left:160%; } } /* Pulse for high-value CTAs */ .pulse { animation:pulseGlow 2.6s ease-in-out infinite; } @keyframes pulseGlow { 0%,100%{ box-shadow:0 10px 30px rgba(224,168,94,.35);} 50%{ box-shadow:0 10px 50px rgba(224,168,94,.6);} } /* ---------------------------------------------------------------------------- 8 · HERO ------------------------------------------------------------------------- */ .hero { position:relative; padding:170px 0 70px; overflow:hidden; } .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; } .hero-left { position:relative; z-index:4; } .hero-badges { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; } .mini-badge { display:inline-flex; align-items:center; gap:8px; background:var(--glass); border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 14px; font-size:.76rem; font-weight:600; color:var(--ink-2); backdrop-filter:blur(8px); } .mini-badge i { color:var(--gold); } .mini-badge .star { color:#ffc861; } .hero h1 { font-family:var(--font-title); font-weight:800; font-size:clamp(2.7rem,5.6vw,4.7rem); line-height:1.02; letter-spacing:-2px; margin-bottom:22px; } .hero h1 .l { display:block; overflow:hidden; } .hero h1 .l > span { display:inline-block; } .hero h1 .t1 { color:var(--ink); } .hero h1 .t2 { background:var(--grad-cyan); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero h1 .t3 { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-desc { font-size:1.08rem; color:var(--ink-2); max-width:520px; line-height:1.75; margin-bottom:30px; } .hero-desc b { color:var(--ink); font-weight:600; } .hero-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; } .hero-stats { display:flex; gap:30px; flex-wrap:wrap; } .hero-stat .n { font-family:var(--font-title); font-weight:800; font-size:1.9rem; line-height:1; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-stat.c .n { background:var(--grad-cyan); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-stat .l { font-size:.74rem; color:var(--muted); margin-top:4px; letter-spacing:.4px; } .hero-stat { position:relative; padding-left:18px; } .hero-stat::before { content:''; position:absolute; left:0; top:3px; bottom:3px; width:3px; border-radius:3px; background:var(--grad-gold); } .hero-stat.c::before { background:var(--grad-cyan); } /* Hero stage (engineer + floating cards) */ .hero-right { position:relative; z-index:3; min-height:560px; display:flex; align-items:flex-end; justify-content:center; } .stage { position:relative; width:100%; max-width:460px; } .stage-ring { position:absolute; left:50%; bottom:6%; transform:translateX(-50%); width:118%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 60%,rgba(86,72,201,.5),rgba(25,184,232,.18) 45%,transparent 66%); filter:blur(14px); z-index:1; } .stage-ring::before,.stage-ring::after { content:''; position:absolute; inset:8%; border-radius:50%; border:1px dashed rgba(224,168,94,.3); animation:spin 26s linear infinite; } .stage-ring::after { inset:20%; border-color:rgba(25,184,232,.28); animation-direction:reverse; animation-duration:34s; } @keyframes spin { to { transform:rotate(360deg); } } .engineer { position:relative; z-index:3; width:auto; height:auto; max-height:600px; margin:0 auto; filter:drop-shadow(0 40px 50px rgba(0,0,0,.55)); animation:floaty 6s ease-in-out infinite; transform-style:preserve-3d; } html.light .engineer { filter:drop-shadow(0 36px 44px rgba(34,25,92,.3)); } @keyframes floaty { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } } .glow-blob { position:absolute; z-index:0; border-radius:50%; filter:blur(60px); } .glow-blob.g1 { width:240px; height:240px; background:rgba(224,168,94,.4); left:-6%; top:18%; } .glow-blob.g2 { width:220px; height:220px; background:rgba(25,184,232,.35); right:-4%; bottom:24%; } /* Floating glass info cards */ .f-card { position:absolute; z-index:5; display:flex; align-items:center; gap:11px; background:var(--glass-2); backdrop-filter:blur(18px) saturate(150%); border:1px solid var(--glass-brd-2); border-radius:16px; padding:11px 15px; box-shadow:var(--sh-md); animation:floatCard 7s ease-in-out infinite; } .f-card .ic { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:1.05rem; flex-shrink:0; } .f-card .tx .k { font-size:.64rem; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; font-weight:600; font-family:var(--font-mono); } .f-card .tx .v { font-family:var(--font-title); font-weight:700; font-size:.92rem; color:var(--ink); line-height:1.15; } .f-card.c1 { top:8%; left:-7%; animation-delay:0s; } .f-card.c2 { top:40%; right:-9%; animation-delay:1.4s; } .f-card.c3 { bottom:11%; left:-8%; animation-delay:2.6s; } @keyframes floatCard { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-13px); } } .live-dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(28,192,136,.6); animation:ping 1.8s infinite; } @keyframes ping { 0%{ box-shadow:0 0 0 0 rgba(28,192,136,.6);} 70%{ box-shadow:0 0 0 9px rgba(28,192,136,0);} 100%{ box-shadow:0 0 0 0 rgba(28,192,136,0);} } /* Live advisor video chip (preserves the Vimeo advisor) */ .advisor-chip { position:absolute; z-index:6; bottom:3%; right:-4%; width:138px; aspect-ratio:3/4; border-radius:18px; overflow:hidden; border:1.5px solid var(--glass-brd-2); box-shadow:var(--sh-lg); cursor:pointer; background:var(--bg-3); } .advisor-chip iframe { position:absolute; inset:-12% -18%; width:136%; height:124%; border:none; filter:url(#chroma-key); pointer-events:none; } .advisor-chip .a-mask { position:absolute; inset:0; background:linear-gradient(to top,var(--bg-3) 2%,transparent 30%); } .advisor-chip .a-tag { position:absolute; left:8px; bottom:8px; z-index:2; display:flex; align-items:center; gap:6px; font-size:.62rem; font-weight:700; color:#fff; background:rgba(8,6,26,.6); padding:4px 9px; border-radius:99px; backdrop-filter:blur(6px); } .advisor-chip .a-tag .live-dot { width:7px; height:7px; } .advisor-chip:hover { transform:translateY(-4px) scale(1.03); } .scroll-hint { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font-size:.66rem; letter-spacing:2px; text-transform:uppercase; font-family:var(--font-mono); } .scroll-hint .mouse { width:22px; height:34px; border:2px solid var(--line-2); border-radius:12px; position:relative; } .scroll-hint .mouse::before { content:''; position:absolute; left:50%; top:6px; width:3px; height:6px; background:var(--gold); border-radius:2px; transform:translateX(-50%); animation:scrolly 1.6s infinite; } @keyframes scrolly { 0%{ opacity:0; transform:translate(-50%,0);} 40%{ opacity:1;} 100%{ opacity:0; transform:translate(-50%,12px);} } /* ---------------------------------------------------------------------------- 9 · MARQUEE (software ticker) ------------------------------------------------------------------------- */ .marquee { padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); overflow:hidden; position:relative; z-index:2; } .marquee::before,.marquee::after { content:''; position:absolute; top:0; bottom:0; width:140px; z-index:2; pointer-events:none; } .marquee::before { left:0; background:linear-gradient(90deg,var(--bg),transparent); } .marquee::after { right:0; background:linear-gradient(270deg,var(--bg),transparent); } .mq-track { display:flex; width:max-content; animation:mq 38s linear infinite; } .marquee:hover .mq-track { animation-play-state:paused; } .mq-item { display:flex; align-items:center; gap:10px; padding:0 30px; font-family:var(--font-title); font-weight:700; font-size:.96rem; color:var(--muted); white-space:nowrap; transition:color .3s; } .mq-item:hover { color:var(--ink); } .mq-item i,.mq-item .swl { font-size:1.1rem; } .mq-sep { color:var(--gold); opacity:.5; align-self:center; } @keyframes mq { to { transform:translateX(-50%); } } /* ---------------------------------------------------------------------------- 10 · STATS BAND ------------------------------------------------------------------------- */ .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .stat { position:relative; text-align:center; padding:38px 22px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); overflow:hidden; } .stat::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%,var(--gold-soft),transparent 60%); opacity:0; transition:opacity .4s; } .stat:hover { transform:translateY(-6px); border-color:rgba(224,168,94,.4); box-shadow:var(--sh-lg); } .stat:hover::before { opacity:1; } .stat .num { font-family:var(--font-title); font-weight:800; font-size:3.1rem; line-height:1; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .stat.cyan .num { background:var(--grad-cyan); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .stat.green .num { background:linear-gradient(135deg,#4ce0a8,#1cc088); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .stat .lbl { margin-top:10px; font-size:.78rem; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; font-weight:600; } /* ---------------------------------------------------------------------------- 11 · SOFTWARE STACK ------------------------------------------------------------------------- */ .stack-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:54px; } .s-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:26px 16px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); text-align:center; overflow:hidden; } .s-card::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--sw,var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .s-card:hover { transform:translateY(-7px); border-color:color-mix(in srgb,var(--sw,var(--gold)) 50%,transparent); box-shadow:var(--sh-md); } .s-card:hover::after { transform:scaleX(1); } .s-card:hover .swl { transform:scale(1.12) rotate(-4deg); } .s-name { font-family:var(--font-title); font-weight:700; font-size:.86rem; color:var(--ink); } .s-cat { font-size:.64rem; color:var(--muted); font-family:var(--font-mono); letter-spacing:1px; text-transform:uppercase; } /* Software "letter" badge */ .swl { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-family:var(--font-title); font-weight:800; font-size:1.15rem; color:#fff; background:var(--sw,#666); box-shadow:0 8px 20px color-mix(in srgb,var(--sw,#666) 40%,transparent); transition:transform .4s var(--ease-spring); position:relative; } .swl.outline { background:var(--bg-elev); color:var(--sw); border:2px solid var(--sw); box-shadow:none; } .swl i { font-size:1.5rem; } /* ---------------------------------------------------------------------------- 12 · SERVICE CARDS (BIM) — 3D tilt ------------------------------------------------------------------------- */ .svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px; } .tilt { transform-style:preserve-3d; transition:transform .3s var(--ease); will-change:transform; } .svc-card { position:relative; padding:32px 26px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); overflow:hidden; cursor:pointer; display:flex; flex-direction:column; min-height:230px; } .svc-card .spot { position:absolute; inset:0; opacity:0; transition:opacity .4s; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--ac,var(--gold)) 16%,transparent),transparent 60%); } .svc-card:hover .spot { opacity:1; } .svc-card:hover { border-color:color-mix(in srgb,var(--ac,var(--gold)) 45%,transparent); box-shadow:var(--sh-lg); } .svc-ic { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:1.4rem; background:color-mix(in srgb,var(--ac,var(--gold)) 14%,transparent); color:var(--ac,var(--gold)); margin-bottom:18px; transition:transform .4s var(--ease-spring); transform:translateZ(36px); } .svc-card:hover .svc-ic { transform:translateZ(50px) scale(1.1) rotate(5deg); background:var(--ac,var(--gold)); color:#0a0820; } .svc-card h3 { font-family:var(--font-title); font-weight:700; font-size:1.22rem; color:var(--ink); margin-bottom:9px; transform:translateZ(24px); } .svc-card p { font-size:.9rem; color:var(--muted); line-height:1.7; flex-grow:1; transform:translateZ(14px); } .svc-tags { display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 16px; transform:translateZ(18px); } .svc-tag { font-size:.66rem; font-family:var(--font-mono); color:var(--ink-2); background:var(--glass); border:1px solid var(--line); border-radius:99px; padding:3px 9px; } .svc-link { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-title); font-weight:700; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; color:var(--ac,var(--gold)); margin-top:auto; transform:translateZ(20px); } .svc-card:hover .svc-link i { transform:translateX(5px); } .svc-link i { transition:transform .3s; } /* ---------------------------------------------------------------------------- 13 · PREVENTA / ADD-IN ★ flagship new section ------------------------------------------------------------------------- */ .addin-sec { position:relative; padding:110px 0; overflow:hidden; } .addin-sec::before { content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(86,72,201,.22),transparent 60%), radial-gradient(ellipse 60% 50% at 80% 100%,rgba(224,168,94,.14),transparent 60%); } .addin-wrap { position:relative; z-index:2; } .addin-head { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; margin-bottom:56px; } .addin-kicker { display:flex; align-items:center; gap:12px; margin-bottom:18px; } .soon-badge { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-weight:700; font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color:#0a0820; background:var(--grad-gold); padding:7px 16px; border-radius:99px; box-shadow:var(--glow-gold); } .soon-badge i { animation:wobble 2s ease-in-out infinite; } @keyframes wobble { 0%,100%{ transform:rotate(0);} 25%{ transform:rotate(-12deg);} 75%{ transform:rotate(12deg);} } .addin-title { font-family:var(--font-title); font-weight:800; font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.05; letter-spacing:-1.4px; color:var(--ink); } .addin-title .grad { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .addin-lead { font-size:1.05rem; color:var(--ink-2); line-height:1.75; margin-top:18px; max-width:580px; } /* Countdown */ .countdown { display:flex; gap:12px; margin-top:26px; } .cd-box { text-align:center; min-width:74px; padding:14px 10px; border-radius:14px; background:var(--glass-2); border:1px solid var(--glass-brd-2); backdrop-filter:blur(12px); box-shadow:var(--sh-sm); } .cd-box .cd-n { font-family:var(--font-title); font-weight:800; font-size:1.9rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; } .cd-box .cd-l { font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; margin-top:5px; font-family:var(--font-mono); } /* Add-in product mock panel */ .addin-mock { position:relative; } .mock-window { position:relative; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(160deg,#13112e,#0b0922); border:1px solid var(--glass-brd-2); box-shadow:var(--sh-lg); transform:perspective(1400px) rotateY(-12deg) rotateX(4deg); transition:transform .6s var(--ease); } .addin-mock:hover .mock-window { transform:perspective(1400px) rotateY(-6deg) rotateX(2deg); } .mock-bar { display:flex; align-items:center; gap:7px; padding:11px 15px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--line); } .mock-bar .d { width:11px; height:11px; border-radius:50%; } .mock-bar .d.r{ background:#ff5f57;} .mock-bar .d.y{ background:#febc2e;} .mock-bar .d.g{ background:#28c840;} .mock-bar .t { margin-left:10px; font-family:var(--font-mono); font-size:.68rem; color:var(--muted); } .mock-body { padding:20px; display:grid; grid-template-columns:64px 1fr; gap:16px; min-height:280px; } .mock-ribbon { display:flex; flex-direction:column; gap:9px; } .mock-tool { width:46px; height:46px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid var(--line); display:grid; place-items:center; color:var(--cyan-lt); font-size:1.05rem; transition:.3s; } .mock-tool:nth-child(odd){ color:var(--gold-lt);} .mock-tool.on { background:var(--gold-soft); border-color:rgba(224,168,94,.5); color:var(--gold); box-shadow:0 0 16px rgba(224,168,94,.3); } .mock-canvas { position:relative; border-radius:14px; background: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/26px 26px, linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/26px 26px, radial-gradient(circle at 70% 30%,rgba(25,184,232,.12),transparent 60%); border:1px solid var(--line); overflow:hidden; } .mock-canvas svg { position:absolute; inset:0; width:100%; height:100%; } .mock-cap { position:absolute; left:14px; bottom:12px; font-family:var(--font-mono); font-size:.66rem; color:var(--cyan-lt); display:flex; align-items:center; gap:7px; } .mock-float { position:absolute; right:-18px; top:30px; background:var(--glass-2); backdrop-filter:blur(14px); border:1px solid var(--glass-brd-2); border-radius:13px; padding:10px 14px; box-shadow:var(--sh-md); display:flex; align-items:center; gap:9px; font-size:.78rem; } .mock-float .pc { font-family:var(--font-title); font-weight:800; color:var(--green-lt); } /* Feature grid */ .addin-feats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .addin-feat { position:relative; padding:24px 20px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); overflow:hidden; } .addin-feat:hover { transform:translateY(-5px); border-color:rgba(224,168,94,.4); box-shadow:var(--sh-md); } .addin-feat .fi { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.15rem; margin-bottom:14px; background:var(--af,var(--gold-soft)); color:var(--afc,var(--gold)); } .addin-feat h4, .addin-feat h3 { font-family:var(--font-title); font-weight:700; font-size:1rem; color:var(--ink); margin-bottom:6px; } .addin-feat p { font-size:.82rem; color:var(--muted); line-height:1.6; } .addin-feat .soon-tag { position:absolute; top:12px; right:12px; font-size:.56rem; font-family:var(--font-mono); font-weight:700; letter-spacing:1px; color:var(--violet); background:var(--indigo-soft); border:1px solid rgba(123,110,240,.3); border-radius:99px; padding:2px 8px; } /* Pricing tiers (preventa + pro) */ .addin-pricing { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; max-width:980px; margin-left:auto; margin-right:auto; } .tier { position:relative; padding:38px 34px; border-radius:var(--r-xl); overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-md); } .tier.featured { background:linear-gradient(165deg,rgba(34,25,92,.6),var(--glass-strong)); border:1.5px solid rgba(224,168,94,.5); box-shadow:var(--glow-gold),var(--sh-lg); } .tier-flag { position:absolute; top:0; right:0; padding:7px 18px; font-family:var(--font-mono); font-weight:700; font-size:.66rem; letter-spacing:1.5px; text-transform:uppercase; border-radius:0 0 0 16px; } .tier.featured .tier-flag { background:var(--grad-gold); color:#0a0820; } .tier.pro .tier-flag { background:var(--indigo-soft); color:var(--violet); border:1px solid rgba(123,110,240,.3); border-top:none; border-right:none; } .tier-name { font-family:var(--font-title); font-weight:800; font-size:1.4rem; color:var(--ink); display:flex; align-items:center; gap:10px; } .tier-name .chip { font-size:.6rem; font-family:var(--font-mono); padding:3px 8px; border-radius:99px; letter-spacing:1px; } .tier-name .chip.life { background:var(--green-soft); color:var(--green-lt); } .tier-name .chip.mo { background:var(--indigo-soft); color:var(--violet); } .tier-desc { font-size:.86rem; color:var(--muted); margin:8px 0 20px; line-height:1.6; } .tier-price { display:flex; align-items:flex-end; gap:10px; margin-bottom:6px; } .tier-price .cur { font-family:var(--font-title); font-weight:700; font-size:1.3rem; color:var(--ink-2); margin-bottom:8px; } .tier-price .amt { font-family:var(--font-title); font-weight:800; font-size:3.6rem; line-height:.9; color:var(--ink); letter-spacing:-1px; } .tier.featured .tier-price .amt { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .tier-price .per { font-size:.9rem; color:var(--muted); margin-bottom:8px; } .tier-old { font-size:.9rem; color:var(--muted); text-decoration:line-through; } .tier-save { display:inline-flex; align-items:center; gap:6px; margin:8px 0 18px; font-family:var(--font-title); font-weight:700; font-size:.74rem; letter-spacing:.5px; color:var(--green-lt); background:var(--green-soft); border:1px solid rgba(28,192,136,.25); border-radius:99px; padding:5px 13px; } .tier-list { display:flex; flex-direction:column; gap:11px; margin-bottom:26px; } .tier-list li { display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--ink-2); } .tier-list li i { color:var(--green); margin-top:3px; flex-shrink:0; font-size:.85rem; } .tier-list li.soon i { color:var(--violet); } .tier-list li.soon { color:var(--muted); } /* Cross-promo banner */ .crosspromo { margin-top:30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:center; padding:20px 28px; border-radius:var(--r-lg); background:var(--glass-2); border:1px dashed rgba(224,168,94,.4); backdrop-filter:blur(10px); text-align:center; } .crosspromo .cp-ic { font-size:1.6rem; color:var(--gold); } .crosspromo b { color:var(--ink); } .crosspromo .cp-save { font-family:var(--font-title); font-weight:800; color:var(--green-lt); } /* ---------------------------------------------------------------------------- 14 · ACADEMIC + CALCULATOR ------------------------------------------------------------------------- */ .acad-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:54px; } .acad-card { position:relative; padding:26px 20px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); overflow:hidden; } .acad-card:hover { transform:translateY(-6px); border-color:rgba(224,168,94,.4); box-shadow:var(--sh-md); } .acad-card .a-badge { position:absolute; top:12px; right:12px; font-size:.58rem; font-family:var(--font-mono); font-weight:700; letter-spacing:1px; padding:3px 8px; border-radius:99px; background:var(--gold-soft); color:var(--gold); border:1px solid rgba(224,168,94,.25); } .acad-card .a-badge.new { background:var(--indigo-soft); color:var(--violet); border-color:rgba(123,110,240,.3); } .acad-ic { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; font-size:1.2rem; margin-bottom:14px; background:var(--ag,var(--gold-soft)); color:var(--agc,var(--gold)); transition:transform .4s var(--ease-spring); } .acad-card:hover .acad-ic { transform:scale(1.12) rotate(-5deg); } .acad-card h3 { font-family:var(--font-title); font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:6px; } .acad-card p { font-size:.83rem; color:var(--muted); line-height:1.6; } .acad-card .a-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:14px; padding:10px; border-radius:11px; background:var(--grad-gold); color:#0a0820; font-family:var(--font-title); font-weight:700; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; } .calc-wrap { margin-top:48px; display:grid; grid-template-columns:1.2fr .8fr; gap:0; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--glass-brd-2); box-shadow:var(--sh-lg); background:var(--glass-2); backdrop-filter:blur(18px); } .calc-form { padding:40px; display:flex; flex-direction:column; gap:22px; } .calc-form h3 { font-family:var(--font-title); font-weight:800; font-size:1.55rem; color:var(--ink); } .calc-form > p { font-size:.88rem; color:var(--muted); margin-top:-12px; } .calc-group { display:flex; flex-direction:column; gap:9px; } .calc-group label { font-family:var(--font-mono); font-weight:700; font-size:.74rem; letter-spacing:1px; text-transform:uppercase; color:var(--gold); } .calc-select { width:100%; padding:13px 16px; border-radius:13px; background:var(--bg-2); color:var(--ink); border:1px solid var(--line); font-family:var(--font-body); font-size:.92rem; transition:.3s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238f8cc0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; -webkit-appearance:none; appearance:none; } .calc-select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); } .calc-slider-row { display:flex; align-items:center; gap:18px; } .calc-slider { flex:1; -webkit-appearance:none; appearance:none; height:8px; border-radius:99px; background:var(--bg-3); border:1px solid var(--line); cursor:pointer; } .calc-slider::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--grad-gold); border:2px solid var(--bg); box-shadow:0 4px 12px rgba(224,168,94,.5); transition:transform .2s; } .calc-slider::-webkit-slider-thumb:hover { transform:scale(1.25); } .calc-slider::-moz-range-thumb { width:18px; height:18px; border:2px solid var(--bg); border-radius:50%; background:var(--gold); } .calc-slider-val { font-family:var(--font-title); font-weight:800; font-size:1.35rem; color:var(--gold); min-width:74px; text-align:right; } .calc-result { padding:40px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:linear-gradient(165deg,rgba(34,25,92,.5),var(--bg-3)); position:relative; } .calc-result .cr-lbl { font-family:var(--font-mono); font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); } .calc-result .cr-val { font-family:var(--font-title); font-weight:800; font-size:3.4rem; line-height:1; color:var(--gold); margin:12px 0 18px; } .calc-result .cr-val .cur { font-size:1.4rem; vertical-align:super; margin-right:2px; } .calc-result .cr-note { font-size:.74rem; color:var(--muted); margin-bottom:22px; line-height:1.5; } .pricePulse { animation:pricePulse .45s var(--ease-spring); } @keyframes pricePulse { 50%{ transform:scale(1.12); color:var(--cyan-lt);} } .exp-band { margin-top:48px; display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:space-between; padding:36px 42px; border-radius:var(--r-xl); background:linear-gradient(135deg,rgba(34,25,92,.55),var(--glass-2)); border:1px solid var(--glass-brd-2); box-shadow:var(--sh-md); } .exp-band .eb-num { font-family:var(--font-title); font-weight:800; font-size:4.4rem; line-height:1; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; flex-shrink:0; } .exp-band .eb-txt h3 { font-family:var(--font-title); font-weight:700; font-size:1.35rem; color:var(--ink); margin-bottom:5px; } .exp-band .eb-txt p { font-size:.86rem; color:var(--muted); max-width:440px; } .exp-pills { display:flex; gap:9px; flex-wrap:wrap; } .exp-pill { display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:99px; background:var(--glass); border:1px solid var(--line); font-family:var(--font-title); font-weight:600; font-size:.76rem; color:var(--ink-2); } .exp-pill i { color:var(--gold); } /* ---------------------------------------------------------------------------- 15 · TUTORIALS + VIDEO MODAL ------------------------------------------------------------------------- */ .tut-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; } .tut-card { border-radius:var(--r-lg); overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); cursor:pointer; display:flex; flex-direction:column; } .tut-card:hover { transform:translateY(-8px); border-color:rgba(25,184,232,.4); box-shadow:var(--sh-lg); } .tut-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#000; } .tut-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .tut-card:hover .tut-thumb img { transform:scale(1.08); } .tut-play { position:absolute; inset:0; display:grid; place-items:center; background:rgba(8,6,26,.32); transition:background .3s; } .tut-card:hover .tut-play { background:rgba(8,6,26,.12); } .tut-pbtn { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:1.3rem; color:#0a0820; background:rgba(255,255,255,.92); box-shadow:0 6px 20px rgba(0,0,0,.4); transition:all .35s var(--ease-spring); } .tut-pbtn i { margin-left:4px; } .tut-card:hover .tut-pbtn { background:var(--grad-cyan); color:#04121a; transform:scale(1.16); } .tut-tag { position:absolute; left:12px; bottom:12px; font-family:var(--font-mono); font-weight:700; font-size:.62rem; letter-spacing:1px; text-transform:uppercase; color:var(--cyan-lt); background:var(--glass-strong); border:1px solid var(--line); border-radius:7px; padding:4px 9px; } .tut-info { padding:20px; display:flex; flex-direction:column; flex-grow:1; } .tut-info h3 { font-family:var(--font-title); font-weight:700; font-size:.98rem; color:var(--ink); line-height:1.4; margin-bottom:14px; } .tut-info .tut-link { display:inline-flex; align-items:center; gap:7px; margin-top:auto; font-family:var(--font-title); font-weight:700; font-size:.78rem; letter-spacing:.5px; text-transform:uppercase; color:var(--cyan); } .tut-card:hover .tut-link i { transform:translateX(5px); } .tut-link i { transition:transform .3s; } .video-modal { display:none; position:fixed; inset:0; z-index:10000; background:rgba(6,4,18,.92); backdrop-filter:blur(14px); align-items:center; justify-content:center; padding:24px; } .video-modal.open { display:flex; animation:fadeIn .3s; } @keyframes fadeIn { from{ opacity:0; } } .vm-box { position:relative; width:100%; max-width:920px; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; border:2px solid var(--glass-brd-2); box-shadow:var(--sh-lg); transform:scale(.92); transition:transform .35s var(--ease-spring); } .video-modal.open .vm-box { transform:scale(1); } .vm-box iframe { width:100%; height:100%; border:none; } .vm-close { position:absolute; top:-48px; right:0; display:flex; align-items:center; gap:8px; color:#fff; font-family:var(--font-title); font-weight:700; font-size:.9rem; } .vm-close:hover { color:var(--gold-lt); } /* ---------------------------------------------------------------------------- 16 · PRICING ------------------------------------------------------------------------- */ .pricing-hero { margin-top:54px; } .sub-label { display:flex; align-items:center; gap:14px; font-family:var(--font-mono); font-weight:700; font-size:.76rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:18px; } .sub-label::after { content:''; flex:1; height:1px; background:var(--line); } .supremo { position:relative; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding:42px 46px; border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(150deg,rgba(34,25,92,.7),var(--glass-strong)); border:1.5px solid rgba(224,168,94,.45); box-shadow:var(--glow-gold),var(--sh-lg); } .supremo .sup-glow { position:absolute; top:-100px; right:10%; width:340px; height:240px; background:radial-gradient(circle,rgba(224,168,94,.25),transparent 70%); pointer-events:none; } .sup-top { position:absolute; top:0; left:50%; transform:translateX(-50%); background:var(--grad-gold); color:#0a0820; font-family:var(--font-mono); font-weight:700; font-size:.68rem; letter-spacing:1.5px; padding:6px 22px; border-radius:0 0 12px 12px; } .sup-tier { font-family:var(--font-mono); font-size:.78rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin:8px 0 4px; } .sup-name { font-family:var(--font-title); font-weight:800; font-size:2rem; color:var(--ink); margin-bottom:8px; } .sup-desc { font-size:.9rem; color:var(--muted); max-width:520px; margin-bottom:18px; } .sup-feats { display:flex; flex-wrap:wrap; gap:9px; } .sup-feat { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:99px; background:var(--glass); border:1px solid var(--line); font-size:.78rem; color:var(--ink-2); font-weight:600; } .sup-feat i { color:var(--cyan); font-size:.7rem; } .sup-right { text-align:center; flex-shrink:0; min-width:200px; } .sup-old { font-size:.95rem; color:var(--muted); text-decoration:line-through; } .sup-price { font-family:var(--font-title); font-weight:800; font-size:4rem; line-height:1; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .sup-price .cur { font-size:1.5rem; vertical-align:super; -webkit-text-fill-color:var(--gold); } .sup-save { display:inline-block; margin:10px 0 16px; font-family:var(--font-title); font-weight:700; font-size:.76rem; color:var(--green-lt); background:var(--green-soft); border:1px solid rgba(28,192,136,.25); border-radius:99px; padding:5px 14px; } .filter-bar { display:flex; justify-content:center; gap:12px; margin:44px 0 28px; flex-wrap:wrap; } .filter-btn { padding:10px 22px; border-radius:99px; background:var(--card); border:1px solid var(--line); font-family:var(--font-title); font-weight:700; font-size:.82rem; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); transition:all .3s; } .filter-btn:hover { color:var(--ink); border-color:var(--gold); } .filter-btn.active { background:var(--grad-gold); border-color:transparent; color:#0a0820; box-shadow:0 6px 18px rgba(224,168,94,.35); } .price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; transition:opacity .3s; align-items:stretch; } .price-card { position:relative; padding:34px 28px; border-radius:var(--r-lg); overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); display:flex; flex-direction:column; } .price-card:hover { transform:translateY(-7px); border-color:rgba(224,168,94,.4); box-shadow:var(--sh-lg); } .price-card.dashed { border-style:dashed; border-color:rgba(224,168,94,.45); background:var(--gold-soft); } .disc { position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-weight:700; font-size:.74rem; color:var(--gold); background:var(--gold-soft); border:1px solid rgba(224,168,94,.3); border-radius:99px; padding:4px 11px; } .pc-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:1.15rem; margin-bottom:16px; background:var(--pc,var(--gold-soft)); color:var(--pcc,var(--gold)); } .pc-tier { font-family:var(--font-mono); font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-weight:700; } .pc-name { font-family:var(--font-title); font-weight:700; font-size:1.4rem; color:var(--ink); margin:4px 0 10px; } .pc-desc { font-size:.84rem; color:var(--muted); line-height:1.6; margin-bottom:18px; flex-grow:1; } .pc-price { margin-bottom:18px; } .pc-old { font-size:.84rem; color:var(--muted); text-decoration:line-through; } .pc-new { font-family:var(--font-title); font-weight:800; font-size:2.5rem; line-height:1; color:var(--ink); } .pc-new .cur { font-size:1.1rem; vertical-align:super; } .pc-bonus { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.7rem; font-weight:700; color:var(--cyan); background:var(--cyan-soft); border:1px solid rgba(25,184,232,.22); border-radius:99px; padding:3px 10px; font-family:var(--font-mono); } /* ---------------------------------------------------------------------------- 17 · COMPARISON TABLE ------------------------------------------------------------------------- */ .cmp-wrap { margin-top:54px; overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--sh-sm); } .cmp { width:100%; border-collapse:collapse; min-width:640px; background:var(--bg-2); } .cmp th,.cmp td { padding:17px 22px; border-bottom:1px solid var(--line); text-align:center; } .cmp thead th { font-family:var(--font-title); font-weight:700; font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink); background:var(--bg-2); } .cmp thead th .pq { display:block; font-family:var(--font-mono); font-size:.72rem; color:var(--muted); font-weight:400; margin-top:3px; } .cmp th:first-child,.cmp td:first-child { text-align:left; color:var(--ink-2); font-weight:600; font-size:.88rem; } .cmp tbody tr:hover td { background:var(--gold-soft); } .cmp .feat-col { background:rgba(224,168,94,.07); } .cmp thead .feat-col { color:var(--gold); } .cmp tbody tr:hover td.feat-col { background:rgba(224,168,94,.14); } .cmp .ok { color:var(--green); font-size:1.05rem; } .cmp .no { color:var(--muted-2); opacity:.6; } .cmp tbody tr:last-child td { border-bottom:none; } /* ---------------------------------------------------------------------------- 18 · CTA WITH CHARACTER ------------------------------------------------------------------------- */ .cta-sec { position:relative; } .cta-inner { display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; } .cta-char { position:relative; display:grid; place-items:center; min-height:420px; } .cta-char .ring { position:absolute; width:88%; aspect-ratio:1; border-radius:50%; border:1px dashed rgba(224,168,94,.25); animation:spin 30s linear infinite; } .cta-char .ring::after { content:''; position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(25,184,232,.18); } .cta-char .glow-blob { width:300px; height:300px; background:rgba(224,168,94,.3); } .cta-char img { position:relative; z-index:2; max-height:420px; width:auto; cursor:pointer; filter:drop-shadow(0 30px 40px rgba(0,0,0,.5)); animation:floaty 5s ease-in-out infinite; transition:transform .4s var(--ease-spring); } html.light .cta-char img { filter:drop-shadow(0 26px 34px rgba(34,25,92,.28)); } .cta-char img:hover { transform:scale(1.05) rotate(2deg); } .cta-bubble { position:absolute; z-index:3; top:6%; left:4%; background:var(--glass-2); backdrop-filter:blur(12px); border:1px solid var(--glass-brd-2); border-radius:16px 16px 16px 4px; padding:12px 16px; max-width:170px; box-shadow:var(--sh-md); animation:floatCard 4s ease-in-out infinite; } .cta-bubble p { font-family:var(--font-title); font-weight:700; font-size:.84rem; color:var(--ink); line-height:1.3; } .cta-bubble span { color:var(--gold); } .cta-right .cta-h2 { font-family:var(--font-title); font-weight:800; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08; color:var(--ink); margin-bottom:14px; } .cta-right .cta-h2 .grad { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .cta-right .cta-sub { font-size:.98rem; color:var(--muted); line-height:1.75; margin-bottom:26px; } .cta-box { padding:26px 30px; border-radius:var(--r-lg); background:var(--glass-2); border:1px solid var(--glass-brd-2); box-shadow:var(--sh-sm); margin-bottom:18px; } .cta-box .cb-from { font-family:var(--font-mono); font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); } .cta-box .cb-old { font-size:.9rem; color:var(--muted); text-decoration:line-through; } .cta-box .cb-amt { font-family:var(--font-title); font-weight:800; font-size:3.8rem; line-height:1; color:var(--ink); } .cta-box .cb-amt .cur { font-size:1.5rem; vertical-align:super; } .cta-box .cb-save { display:inline-block; margin-top:8px; font-family:var(--font-title); font-weight:700; font-size:.76rem; color:var(--green-lt); background:var(--green-soft); border:1px solid rgba(28,192,136,.25); border-radius:99px; padding:5px 14px; } .cta-trust { display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; } .cta-trust span { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); } .cta-trust span i { color:var(--green); } /* ---------------------------------------------------------------------------- 19 · TESTIMONIALS ------------------------------------------------------------------------- */ .test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px; } .test-card { position:relative; padding:30px 26px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); overflow:hidden; } .test-card:hover { transform:translateY(-6px); border-color:rgba(224,168,94,.4); box-shadow:var(--sh-md); } .test-card .q { font-family:var(--font-title); font-size:3rem; line-height:.6; color:var(--gold); opacity:.3; } .test-card .stars { color:#ffc861; font-size:.82rem; margin:10px 0; } .test-card p { font-size:.9rem; color:var(--ink-2); line-height:1.75; font-style:italic; margin-bottom:20px; } .test-author { display:flex; align-items:center; gap:12px; } .test-av { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-title); font-weight:800; font-size:.95rem; flex-shrink:0; background:var(--bg-3); border:1px solid var(--line); } .test-name { font-family:var(--font-title); font-weight:700; font-size:.88rem; color:var(--ink); } .test-role { font-size:.74rem; color:var(--muted); } /* ---------------------------------------------------------------------------- 20 · FAQ ------------------------------------------------------------------------- */ .faq-list { max-width:840px; margin:54px auto 0; display:flex; flex-direction:column; gap:12px; } .faq-item { border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); overflow:hidden; } .faq-item.open { border-color:rgba(224,168,94,.4); } .faq-q { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; font-family:var(--font-title); font-weight:700; font-size:.98rem; color:var(--ink); cursor:pointer; } .faq-q:hover { color:var(--gold); } .faq-q .qi { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold); flex-shrink:0; transition:transform .35s var(--ease); font-size:.8rem; } .faq-item.open .qi { transform:rotate(135deg); } .faq-a { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); } .faq-a-inner { padding:0 24px 20px; font-size:.9rem; color:var(--muted); line-height:1.75; } /* ---------------------------------------------------------------------------- 21 · FOOTER ------------------------------------------------------------------------- */ .foot { position:relative; z-index:2; padding:70px 0 30px; border-top:1px solid var(--line); background:var(--bg-2); } .foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:44px; } .foot-brand .brand { margin-bottom:16px; } .foot-brand p { font-size:.88rem; color:var(--muted); line-height:1.7; max-width:300px; margin-bottom:18px; } .foot-social { display:flex; gap:10px; } .foot-social a { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--line); color:var(--ink-2); transition:all .3s; } .foot-social a:hover { transform:translateY(-3px); border-color:var(--gold); color:var(--gold); } .foot-col h4 { font-family:var(--font-title); font-weight:700; font-size:.84rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink); margin-bottom:16px; } .foot-col a { display:block; font-size:.86rem; color:var(--muted); padding:5px 0; transition:color .25s, padding .25s; } .foot-col a:hover { color:var(--gold); padding-left:5px; } .foot-flags { display:flex; flex-direction:column; gap:12px; } .foot-pe { display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:14px; background:var(--glass); border:1px solid var(--line); } .foot-pe .flag { width:34px; height:23px; border-radius:4px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.12); flex-shrink:0; } .foot-pe .pe-tx b { display:block; font-family:var(--font-title); font-weight:700; font-size:.86rem; color:var(--ink); } .foot-pe .pe-tx span { font-size:.72rem; color:var(--muted); } .foot-intl { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .foot-intl .flag { width:28px; height:19px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.12); transition:transform .25s; } .foot-intl .flag:hover { transform:translateY(-3px) scale(1.1); } .foot-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line); } .foot-bottom p { font-size:.78rem; color:var(--muted); } .foot-bottom .fb-links { display:flex; gap:18px; } .foot-bottom .fb-links a { font-size:.78rem; color:var(--muted); } .foot-bottom .fb-links a:hover { color:var(--gold); } /* ---------------------------------------------------------------------------- 22 · FLOATING WHATSAPP + BUY OVERLAY ------------------------------------------------------------------------- */ .wa-float { position:fixed; bottom:24px; right:24px; z-index:980; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; font-size:1.7rem; box-shadow:0 8px 26px rgba(37,211,102,.45); animation:floaty 3s ease-in-out infinite; } .wa-float::before { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:waRing 2.4s ease-out infinite; } @keyframes waRing { 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(1.5); opacity:0;} } .wa-float:hover { transform:scale(1.1); } .buy-overlay { display:none; position:fixed; inset:0; z-index:9999; background:rgba(6,4,18,.9); backdrop-filter:blur(16px); align-items:center; justify-content:center; } .buy-overlay.open { display:flex; animation:fadeIn .35s; } .buy-card { position:relative; max-width:420px; width:90%; padding:48px 42px; border-radius:var(--r-xl); text-align:center; background:var(--glass-strong); border:1px solid var(--glass-brd-2); box-shadow:var(--sh-lg); overflow:hidden; } .buy-icon { width:78px; height:78px; border-radius:50%; margin:0 auto 22px; display:grid; place-items:center; font-size:1.9rem; color:var(--gold); background:var(--gold-soft); border:2px solid rgba(224,168,94,.35); animation:buyPulse 2s ease-in-out infinite; } @keyframes buyPulse { 0%,100%{ transform:scale(1) rotate(0);} 50%{ transform:scale(1.08) rotate(8deg);} } .buy-card h3 { font-family:var(--font-title); font-weight:800; font-size:1.4rem; color:var(--ink); margin-bottom:8px; } .buy-card p { font-size:.88rem; color:var(--muted); margin-bottom:26px; } .buy-bar { height:5px; border-radius:99px; background:var(--bg-3); overflow:hidden; margin-bottom:10px; } .buy-bar span { display:block; height:100%; width:0; background:var(--grad-gold); border-radius:99px; transition:width 1.3s var(--ease); } .buy-step { font-family:var(--font-mono); font-size:.68rem; letter-spacing:1px; color:var(--muted); } /* ---------------------------------------------------------------------------- 23 · RESPONSIVE ------------------------------------------------------------------------- */ @media (max-width:1180px){ .stack-grid { grid-template-columns:repeat(4,1fr); } .addin-feats { grid-template-columns:repeat(2,1fr); } .acad-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:1024px){ .section { padding:80px 0; } .hero { padding:150px 0 50px; } .hero-grid { grid-template-columns:1fr; gap:20px; } .hero-left { text-align:center; max-width:660px; margin:0 auto; } .hero-badges,.hero-ctas,.hero-stats { justify-content:center; } .hero-stat { padding-left:0; } .hero-stat::before { display:none; } .hero-right { min-height:480px; margin-top:10px; } .stage { max-width:380px; } .f-card.c1 { left:0; } .f-card.c2 { right:0; } .f-card.c3 { left:0; } .advisor-chip { right:2%; } .stats-grid { grid-template-columns:repeat(2,1fr); } .svc-grid,.tut-grid,.price-grid,.test-grid { grid-template-columns:1fr 1fr; } .addin-head { grid-template-columns:1fr; gap:30px; } .addin-mock { max-width:520px; margin:0 auto; } .calc-wrap { grid-template-columns:1fr; } .cta-inner { grid-template-columns:1fr; gap:30px; } .cta-char { min-height:340px; order:-1; } .supremo { grid-template-columns:1fr; gap:28px; text-align:center; } .sup-feats { justify-content:center; } .foot-grid { grid-template-columns:1fr 1fr; gap:30px; } .nav-links { display:none; } .burger { display:grid; place-items:center; } } @media (max-width:760px){ .wrap { padding:0 18px; } .section { padding:64px 0; } .topbar .wrap { padding:0 10px; } .topbar-left { min-width:0; flex:1; overflow:hidden; } .topbar-left .tb-item:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; } .topbar-right { flex-shrink:0; gap:4px; } .topbar .theme-btn { display:none; } .topbar-left .tb-item.hide-sm { display:none; } .hero h1 { letter-spacing:-1px; } .stack-grid { grid-template-columns:repeat(3,1fr); } .svc-grid,.tut-grid,.price-grid,.test-grid,.addin-feats,.acad-grid,.addin-pricing { grid-template-columns:1fr; } .stats-grid { grid-template-columns:1fr 1fr; } .exp-band { flex-direction:column; text-align:center; } .foot-grid { grid-template-columns:1fr; } .countdown { justify-content:center; } .calc-form,.calc-result { padding:28px; } .f-card { display:none; } /* avoid clutter on small screens */ .advisor-chip { width:112px; right:0; bottom:0; } } @media (max-width:430px){ .stack-grid { grid-template-columns:repeat(2,1fr); } .stats-grid { grid-template-columns:1fr; } .hero-stats { gap:18px; } } /* ---------------------------------------------------------------------------- 24 · MOTION PREFERENCES (only gate intrusive motion, per Windows guidance) ------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .engineer,.cta-char img,.wa-float,.f-card,.stage-ring::before,.stage-ring::after, .cta-char .ring,.aurora span { animation:none !important; } html { scroll-behavior:auto; } } .no-anim * { animation:none !important; transition:none !important; } /* ============================================================================= 25 · MULTI-PAGE ADDITIONS (chrome, detail pages, marketplace, 3D, facade) ========================================================================== */ /* Skip link (a11y) */ .skip-link { position:fixed; top:-60px; left:12px; z-index:2000; background:var(--grad-gold); color:#0a0820; font-family:var(--font-title); font-weight:700; padding:10px 18px; border-radius:0 0 12px 12px; transition:top .25s var(--ease); } .skip-link:focus { top:0; } /* Topbar link variant */ .tb-link { text-decoration:none; transition:color .25s; } .tb-link:hover { color:var(--gold); } /* Active nav item */ .nav-links a[aria-current="page"] { color:var(--gold); } .nav-links a[aria-current="page"]::after { width:100%; } /* Three.js hero canvas */ .hero-3d { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.2s var(--ease); } .hero-3d.on { opacity:1; } .stage .hero-3d { border-radius:50%; } /* Video facade (lazy Vimeo) */ .advisor-chip.facade { cursor:pointer; } .advisor-chip .a-poster { position:absolute; inset:0; z-index:1; display:grid; place-items:center; background: radial-gradient(circle at 50% 35%, rgba(86,72,201,.55), transparent 60%), linear-gradient(160deg,#171340,#0b0922); } .advisor-chip .a-poster .pbtn { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); color:#0a0820; font-size:.9rem; box-shadow:0 6px 18px rgba(0,0,0,.4); transition:transform .3s var(--ease-spring); } .advisor-chip:hover .a-poster .pbtn { transform:scale(1.14); background:var(--grad-gold); } /* ---- Breadcrumb ---- */ .breadcrumb { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); font-family:var(--font-mono); } .breadcrumb a { color:var(--muted); transition:color .2s; } .breadcrumb a:hover { color:var(--gold); } .breadcrumb .sep { opacity:.5; } .breadcrumb [aria-current] { color:var(--ink-2); } /* ---- Detail-page hero ---- */ .page-hero { position:relative; padding:150px 0 60px; overflow:hidden; } .page-hero::before { content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 70% 60% at 30% 0%,rgba(86,72,201,.2),transparent 60%); } .page-hero::after { content:''; position:absolute; z-index:1; pointer-events:none; right:clamp(4%, calc((100vw - var(--maxw)) / 2), 10%); top:22%; width:min(34vw,460px); aspect-ratio:1; border:1px solid rgba(70,214,255,.22); border-radius:38% 62% 54% 46%; background: linear-gradient(rgba(70,214,255,.08) 1px,transparent 1px) 0 0/28px 28px, linear-gradient(90deg,rgba(70,214,255,.08) 1px,transparent 1px) 0 0/28px 28px, radial-gradient(circle at 45% 40%,rgba(25,184,232,.18),transparent 55%); box-shadow:inset 0 0 70px rgba(25,184,232,.08), 0 0 80px rgba(25,184,232,.08); transform:rotate(-7deg); opacity:.9; } .page-hero .wrap { position:relative; z-index:2; } .page-hero h1 { font-family:var(--font-title); font-weight:800; font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.05; letter-spacing:-1.4px; color:var(--ink); margin:18px 0 16px; max-width:18ch; } .page-hero h1 .grad { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .page-hero h1 .grad-c { background:var(--grad-cyan); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .page-hero .lead { font-size:1.08rem; color:var(--ink-2); max-width:600px; line-height:1.75; margin-bottom:26px; } .page-hero .ph-ctas { display:flex; gap:14px; flex-wrap:wrap; } .page-hero .ph-stats { display:flex; gap:30px; flex-wrap:wrap; margin-top:34px; } .page-hero .ph-stats .n { font-family:var(--font-title); font-weight:800; font-size:1.7rem; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .page-hero .ph-stats .l { font-size:.74rem; color:var(--muted); margin-top:2px; } /* ---- Detail service block (alternating) ---- */ .feature-row { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; padding:54px 0; border-bottom:1px solid var(--line); } .feature-row.rev .fr-media { order:-1; } .feature-row .fr-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; } .feature-row h2 { font-family:var(--font-title); font-weight:800; font-size:clamp(1.6rem,3vw,2.3rem); color:var(--ink); margin-bottom:14px; letter-spacing:-.5px; } .feature-row p { color:var(--muted); line-height:1.8; margin-bottom:18px; } .feature-row .fr-list { display:flex; flex-direction:column; gap:10px; margin-bottom:22px; } .feature-row .fr-list li { display:flex; align-items:flex-start; gap:10px; color:var(--ink-2); font-size:.92rem; } .feature-row .fr-list li i { color:var(--green); margin-top:4px; } .fr-media { position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:300px; background:linear-gradient(160deg,#13112e,#0b0922); border:1px solid var(--glass-brd-2); box-shadow:var(--sh-lg); display:grid; place-items:center; } .fr-media .fr-ic { font-size:4.5rem; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; opacity:.9; } .fr-media .fr-grid { position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/30px 30px, linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/30px 30px; opacity:.6; } /* ---- Marketplace tabs (Add-In) ---- */ .mk-tabs { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:0; } .mk-tab { padding:13px 22px; font-family:var(--font-title); font-weight:700; font-size:.9rem; color:var(--muted); border-bottom:2px solid transparent; transition:all .25s; } .mk-tab:hover { color:var(--ink); } .mk-tab.active { color:var(--gold); border-bottom-color:var(--gold); } .mk-panel { display:none; padding:40px 0; animation:fadeIn .4s; } .mk-panel.active { display:block; } /* Demo gallery (screenshots placeholder) */ .demo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .demo-shot { position:relative; aspect-ratio:16/10; border-radius:var(--r); overflow:hidden; border:1px solid var(--glass-brd-2); background:linear-gradient(160deg,#13112e,#0b0922); box-shadow:var(--sh-md); } .demo-shot .ds-bar { display:flex; align-items:center; gap:6px; padding:10px 13px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--line); } .demo-shot .ds-bar .d { width:9px; height:9px; border-radius:50%; } .demo-shot .ds-cap { position:absolute; bottom:12px; left:14px; font-family:var(--font-mono); font-size:.7rem; color:var(--cyan-lt); } .demo-shot .ds-body { position:absolute; inset:38px 0 0; background: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/24px 24px, linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/24px 24px; display:grid; place-items:center; color:var(--gold); font-size:2.4rem; } .changelog { display:flex; flex-direction:column; gap:14px; } .cl-item { display:grid; grid-template-columns:120px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); } .cl-ver { font-family:var(--font-mono); color:var(--gold); font-weight:700; font-size:.85rem; } .cl-item p { color:var(--muted); font-size:.88rem; } .compat-table { width:100%; border-collapse:collapse; } .compat-table td { padding:12px 16px; border-bottom:1px solid var(--line); font-size:.9rem; } .compat-table td:first-child { color:var(--ink-2); font-weight:600; } .compat-table .ok { color:var(--green); } /* ---- Course cards (academia) ---- */ .course-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; } .course-card { border-radius:var(--r-lg); overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s, border-color .4s; } .course-card:hover { transform:translateY(-7px); border-color:rgba(224,168,94,.4); box-shadow:var(--sh-lg); } .course-thumb { aspect-ratio:16/9; position:relative; display:grid; place-items:center; background:linear-gradient(160deg,var(--c1,#1a1448),#0b0922); color:#fff; font-size:2.6rem; } .course-thumb .c-badge { position:absolute; top:12px; left:12px; font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:var(--glass-strong); color:var(--gold); border:1px solid var(--line); border-radius:7px; padding:4px 9px; z-index:2; } .course-thumb img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:1; } .course-info { padding:22px; display:flex; flex-direction:column; flex-grow:1; } .course-info h3 { font-family:var(--font-title); font-weight:700; font-size:1.08rem; color:var(--ink); margin-bottom:8px; } .course-info p { font-size:.85rem; color:var(--muted); line-height:1.6; margin-bottom:14px; flex-grow:1; } .course-meta { display:flex; gap:14px; font-size:.76rem; color:var(--muted); margin-bottom:16px; } .course-meta span { display:flex; align-items:center; gap:5px; } .course-meta i { color:var(--gold); } .course-rating { color:#ffc861; font-size:.8rem; } /* Authority / trust band */ .authority { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px; } .auth-card { text-align:center; padding:30px 18px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); } .auth-card .ai { font-size:1.8rem; color:var(--gold); margin-bottom:12px; } .auth-card h4, .auth-card h3 { font-family:var(--font-title); font-weight:700; color:var(--ink); margin-bottom:6px; } .auth-card p { font-size:.82rem; color:var(--muted); line-height:1.6; } /* "See more" link card on home hub */ .hub-more { display:inline-flex; align-items:center; gap:9px; margin-top:30px; font-family:var(--font-title); font-weight:700; letter-spacing:.4px; color:var(--gold); padding:12px 22px; border-radius:var(--r); border:1.5px solid rgba(224,168,94,.4); background:var(--gold-soft); transition:all .3s var(--ease); } .hub-more:hover { transform:translateY(-3px); box-shadow:var(--sh-md); } .hub-more i { transition:transform .3s; } .hub-more:hover i { transform:translateX(5px); } /* CTA strip (reusable) */ .cta-strip { margin:0; padding:70px 0; text-align:center; background:linear-gradient(135deg,rgba(34,25,92,.6),var(--glass-2)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .cta-strip h2 { font-family:var(--font-title); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.6rem); color:var(--ink); margin-bottom:14px; letter-spacing:-.5px; } .cta-strip p { color:var(--muted); max-width:560px; margin:0 auto 26px; } .cta-strip .cs-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } @media (max-width:1024px){ .feature-row { grid-template-columns:1fr; gap:28px; } .feature-row.rev .fr-media { order:0; } .demo-grid { grid-template-columns:1fr; } .course-grid { grid-template-columns:1fr 1fr; } .authority { grid-template-columns:1fr 1fr; } } @media (max-width: 860px) { .mission-grid { grid-template-columns: 1fr; } } /* ---- AutoCAD & Civil 3D Tool Mockup UI ---- */ .cad-app-window { background: var(--glass-strong); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--sh-lg); overflow: hidden; font-size: 0.85rem; backdrop-filter: blur(16px); text-align: left; } .cad-app-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: rgba(12, 10, 34, 0.85); border-bottom: 1px solid var(--line); } html.light .cad-app-header { background: rgba(240, 243, 250, 0.95); } .cad-app-dots { display: flex; gap: 6px; } .cad-app-dots span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .cad-app-dots span:nth-child(1) { background: #ff5f57; } .cad-app-dots span:nth-child(2) { background: #febc2e; } .cad-app-dots span:nth-child(3) { background: #28c840; } .cad-app-title { font-family: var(--font-title); font-weight: 700; font-size: 0.88rem; color: var(--ink); display: flex; align-items: center; gap: 8px; } .cad-app-badge { display: flex; gap: 6px; } .cad-app-badge .b-cad { background: #ce1126; color: #fff; font-weight: 800; font-size: 0.72rem; padding: 2px 6px; border-radius: 4px; } .cad-app-badge .b-c3d { background: #0039a6; color: #fff; font-weight: 800; font-size: 0.72rem; padding: 2px 6px; border-radius: 4px; } .cad-app-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; padding: 18px; } @media (max-width: 680px) { .cad-app-body { grid-template-columns: 1fr; } } .cad-pane-left, .cad-pane-right { background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: 14px; } .cad-pane-title { font-family: var(--font-title); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .cad-layout-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; } .cad-layout-list li { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-2); display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.03); padding: 5px 8px; border-radius: 4px; } .cad-layout-list li i { color: var(--green-lt); } .cad-field { margin-bottom: 8px; font-size: 0.78rem; } .cad-field label { display: block; color: var(--muted); font-size: 0.72rem; margin-bottom: 2px; } .cad-field span { font-family: var(--font-mono); font-weight: 600; color: var(--ink); background: rgba(0,0,0,.25); padding: 4px 8px; border-radius: 4px; display: block; border: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.light .cad-field span { background: rgba(0,0,0,.04); } .cad-check { font-size: 0.78rem; color: var(--ink-2); margin: 10px 0 14px; display: flex; align-items: center; gap: 6px; } .cad-check i { color: var(--green-lt); } .cad-plot-btn { font-size: 0.82rem !important; padding: 10px 14px !important; } /* ============================================================================= 30 · INSPIRED PREMIUM TRANSITIONS & VISUAL PRESENTATION (ECD & Kinedrik) ========================================================================== */ /* Modern Tab Switcher Transitions */ .mk-tabs { background: var(--glass-strong); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 6px; backdrop-filter: blur(20px); gap: 6px; box-shadow: var(--sh-sm); } .mk-tab { border-radius: var(--r-pill); padding: 10px 22px; font-family: var(--font-title); font-weight: 600; font-size: 0.88rem; color: var(--ink-2); transition: all 0.3s var(--ease); } .mk-tab:hover { color: var(--ink); background: var(--gold-soft); } .mk-tab.active { background: var(--grad-gold) !important; color: #08061a !important; font-weight: 700; box-shadow: 0 4px 18px rgba(224, 168, 94, 0.35); transform: translateY(-1px); } .mk-panel { display: none; opacity: 0; transform: translateY(16px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .mk-panel.active { display: block; opacity: 1; transform: translateY(0); } /* Card Hover Spotlight & Shimmer Glow */ .svc-card, .price-card, .course-card, .addin-feat, .tier, .s-card, .hub-card, .test-card { position: relative; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .svc-card::before, .price-card::before, .tier::before, .course-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(224, 168, 94, 0.5), transparent 40%, rgba(25, 184, 232, 0.5)); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; } .svc-card:hover::before, .price-card:hover::before, .tier:hover::before, .course-card:hover::before { opacity: 1; } .svc-card:hover, .price-card:hover, .course-card:hover, .addin-feat:hover, .tier:hover, .s-card:hover, .hub-card:hover, .test-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.45); } /* Media Card Hover Zoom & Badges */ .card-media, .photo { overflow: hidden; border-radius: var(--r); } .card-media img, .photo img { transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .card-media:hover img, .photo:hover img { transform: scale(1.08); } /* Verified Badge & Rating Star Polish */ .verified-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--green-lt); background: rgba(28, 192, 136, 0.12); border: 1px solid rgba(28, 192, 136, 0.3); padding: 3px 10px; border-radius: var(--r-pill); } .star-rating { display: flex; gap: 4px; color: #f59e0b; font-size: 0.85rem; } .star-rating i { filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.4)); } /* Pulse Badge Effect */ .pulse-badge { position: relative; overflow: hidden; } .pulse-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(224, 168, 94, 0.7); animation: badgePulse 2s infinite; } @keyframes badgePulse { 0% { box-shadow: 0 0 0 0 rgba(224, 168, 94, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(224, 168, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 168, 94, 0); } } /* Smooth Accordion Smoothness */ .faq-a { transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s var(--ease); } .faq-item .qi i { transition: transform 0.35s var(--ease); } .faq-item.open .qi i { transform: rotate(45deg); color: var(--gold); } /* ============================================================================= 31 · STITCH DESIGN SYSTEM — AETHERIC GLASS (ADVANCED PREMIUM) TOKENS ========================================================================== */ /* Flagship Pricing Card Styling (Licencia Perpetua PRO / Pack BIM Supremo) */ .tier.popular, .tier.featured, .price-card.featured, .tier-flagship { border: 1px solid rgba(224, 168, 94, 0.45) !important; background: radial-gradient(circle at top, rgba(224, 168, 94, 0.12), transparent 70%), var(--glass-strong) !important; box-shadow: inset 0 0 24px rgba(224, 168, 94, 0.18), 0 20px 48px rgba(0, 0, 0, 0.5) !important; } .tier.popular::after, .tier.featured::after, .price-card.featured::after { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: var(--grad-gold); border-radius: 2px; box-shadow: 0 0 12px var(--gold); } .tier.popular .btn-cta, .tier.featured .btn-cta, .price-card.featured .btn-cta { background: linear-gradient(135deg, #e0a85e 0%, #19b8e8 100%) !important; color: #070b13 !important; font-weight: 800 !important; border: none !important; box-shadow: 0 6px 20px rgba(224, 168, 94, 0.35) !important; } .tier.popular .btn-cta:hover, .tier.featured .btn-cta:hover, .price-card.featured .btn-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 28px rgba(25, 184, 232, 0.45) !important; } /* Technical data and currency pills */ .money, .currency-pill, .mono-data { font-family: var(--font-mono) !important; letter-spacing: 0.04em; } .live-status-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--green-lt); background: rgba(28, 192, 136, 0.1); border: 1px solid rgba(28, 192, 136, 0.25); padding: 4px 10px; border-radius: var(--r-pill); } .live-status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-lt); box-shadow: 0 0 8px var(--green-lt); animation: pulseGreen 1.8s infinite; } @keyframes pulseGreen { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } @media (max-width:680px){ .course-grid { grid-template-columns:1fr; } .authority { grid-template-columns:1fr; } .cl-item { grid-template-columns:1fr; gap:4px; } .page-hero { padding:130px 0 40px; } } /* ============================================================================= 26 · HERO VIDEO · REAL ICONS/PHOTOS · BIG PRICES · SMOOTH TRANSITIONS ========================================================================== */ /* Page fade-in + cross-page view transitions (progressive enhancement) */ @view-transition { navigation: auto; } body { opacity:0; animation:pageIn .5s var(--ease) forwards; } @keyframes pageIn { to { opacity:1; } } ::view-transition-old(root) { animation:vtOut .35s var(--ease) both; } ::view-transition-new(root) { animation:vtIn .4s var(--ease) both; } @keyframes vtOut { to { opacity:0; } } @keyframes vtIn { from { opacity:0; } } /* ---- Hero background video ---- */ .hero-video-wrap { position:absolute; inset:0; z-index:0; overflow:hidden; } .hero-video-wrap video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-video-wrap::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,6,26,.62) 0%, rgba(8,6,26,.5) 45%, rgba(8,6,26,.9) 100%), radial-gradient(ellipse 70% 60% at 22% 40%, rgba(8,6,26,.55), transparent 70%); } html.light .hero-video-wrap::after { background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.4) 45%, rgba(255,255,255,.92) 100%); } .hero { background:var(--bg); } .hero .wrap, .hero .scroll-hint { position:relative; z-index:4; } /* with a video behind, drop the now-redundant ambient blobs inside the hero */ .hero .deco { display:none; } /* ---- Real software icons in stack/marquee ---- */ .swl.img { background:#fff; padding:9px; } .swl.img img { width:100%; height:100%; object-fit:contain; display:block; } html.light .swl.img { background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); } .mq-item img { width:22px; height:22px; object-fit:contain; vertical-align:middle; } /* ---- Real photos in feature-row media ---- */ .fr-media.photo { background:#0b0922; padding:0; } .fr-media.photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .feature-row:hover .fr-media.photo img { transform:scale(1.05); } .fr-media.photo::after { content:''; position:absolute; inset:0; background:linear-gradient(160deg, transparent 40%, rgba(8,6,26,.5)); pointer-events:none; } .fr-media .fr-badge { position:absolute; left:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#fff; background:rgba(8,6,26,.6); border:1px solid var(--glass-brd-2); padding:5px 11px; border-radius:99px; backdrop-filter:blur(6px); } /* Add-In hero/overview real screenshot */ .addin-shot { position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--glass-brd-2); box-shadow:var(--sh-lg); } .addin-shot img { width:100%; display:block; } .addin-shot .as-tag { position:absolute; left:14px; top:14px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#0a0820; background:var(--grad-gold); padding:5px 12px; border-radius:99px; } /* ============ BIGGER, FLASHIER PRICES ============ */ .sup-price { font-size:5.4rem; letter-spacing:-2px; filter:drop-shadow(0 6px 26px rgba(224,168,94,.45)); animation:priceGlow 3s ease-in-out infinite; } .sup-price .cur { font-size:2rem; } @keyframes priceGlow { 0%,100%{ filter:drop-shadow(0 6px 26px rgba(224,168,94,.4)); } 50%{ filter:drop-shadow(0 6px 40px rgba(224,168,94,.75)); } } .sup-old { font-size:1.15rem; } .sup-save { font-size:.86rem; padding:7px 16px; } .tier.featured .tier-price .amt, .tier.featured .tier-price .money { font-size:4.6rem; letter-spacing:-2px; } .tier .tier-price .money { font-size:4rem; font-weight:800; line-height:.9; } .tier.featured .tier-price .money { filter:drop-shadow(0 6px 24px rgba(224,168,94,.4)); } .tier-price .money .cur { font-size:1.5rem; vertical-align:super; } .tier-save { font-size:.82rem; padding:7px 15px; } .pc-new { font-size:3.3rem; letter-spacing:-1px; } .pc-new .money { display:inline-block; } .pc-new .cur { font-size:1.3rem; } .price-card.feat-pop .pc-new { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .disc { font-size:.82rem; padding:5px 13px; font-weight:800; box-shadow:0 4px 14px rgba(224,168,94,.25); } .cb-amt { font-size:4.8rem; letter-spacing:-2px; filter:drop-shadow(0 6px 22px rgba(224,168,94,.35)); } .cb-amt .cur { font-size:1.7rem; } .cb-save { font-size:.82rem; padding:7px 16px; } .cr-val { font-size:4.2rem !important; letter-spacing:-1.5px; } .page-hero .ph-stats .n .money { font-size:1.9rem; } /* shimmering sweep on featured price containers */ .sup-right, .tier.featured .tier-price { position:relative; } @media (max-width:760px){ .sup-price { font-size:4.2rem; } .tier.featured .tier-price .money { font-size:3.6rem; } .cb-amt { font-size:3.6rem; } .pc-new { font-size:2.8rem; } .hero-video-wrap video { object-position:center; } } /* ---- Comunidad BIM IMGENYA (WhatsApp group) ---- */ .community { position:relative; display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center; padding:48px 52px; border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(135deg, rgba(37,211,102,.14), var(--glass-2)); border:1px solid rgba(37,211,102,.4); box-shadow:0 0 60px rgba(37,211,102,.12), var(--sh-lg); } .comm-glow { position:absolute; top:-120px; right:-60px; width:360px; height:360px; background:radial-gradient(circle, rgba(37,211,102,.3), transparent 70%); pointer-events:none; } .community .eyebrow.green { color:#25D366; background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.3); } .comm-left { position:relative; z-index:2; } .comm-left h1,.comm-left h2 { font-family:var(--font-title); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.08; letter-spacing:-.6px; color:var(--ink); margin:14px 0 12px; } .comm-left h1 span,.comm-left h2 span { color:#25D366; } .comm-left p { color:var(--muted); line-height:1.7; max-width:560px; } .comm-feats { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 26px; } .comm-feat { display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:99px; background:var(--glass); border:1px solid var(--line); font-family:var(--font-title); font-weight:600; font-size:.82rem; color:var(--ink-2); } .comm-feat i { color:#25D366; } .btn-wa { background:#25D366; color:#06230f; box-shadow:0 10px 30px rgba(37,211,102,.4); } .btn-wa::before { content:''; position:absolute; top:0; left:-150%; width:60%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-22deg); } .btn-wa:hover { transform:translateY(-3px); box-shadow:0 16px 46px rgba(37,211,102,.55); background:#28d96b; } .btn-wa:hover::before { animation:shine .9s var(--ease); } .comm-right { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; } .comm-badge { width:128px; height:128px; border-radius:34px; display:grid; place-items:center; font-size:3.6rem; color:#fff; background:linear-gradient(135deg,#25D366,#128C7E); box-shadow:0 20px 54px rgba(37,211,102,.45); animation:floaty 5s ease-in-out infinite; } .comm-members { display:flex; align-items:center; } .comm-av { width:42px; height:42px; border-radius:50%; border:2.5px solid var(--bg-2); margin-left:-13px; display:grid; place-items:center; font-family:var(--font-title); font-weight:700; font-size:.85rem; color:#fff; } .comm-av:first-child { margin-left:0; } .comm-count { margin-left:12px; font-family:var(--font-title); font-weight:700; font-size:.88rem; color:var(--ink-2); } .comm-count span { display:block; font-weight:400; font-size:.74rem; color:var(--muted); } @media (max-width:860px){ .community { grid-template-columns:1fr; text-align:center; padding:38px 26px; gap:26px; } .comm-feats { justify-content:center; } .comm-left p { margin:0 auto; } .comm-right { order:-1; } } /* ---- Home hub / index menu (cards → subpages) ---- */ .hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px; } .hub-card { position:relative; display:block; padding:32px 28px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); overflow:hidden; } .hub-card::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--hc,var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .hub-card:hover { transform:translateY(-7px); border-color:color-mix(in srgb,var(--hc,var(--gold)) 50%,transparent); box-shadow:var(--sh-lg); } .hub-card:hover::after { transform:scaleX(1); } .hub-card .hc-ic { width:58px; height:58px; border-radius:16px; display:grid; place-items:center; font-size:1.5rem; background:color-mix(in srgb,var(--hc,var(--gold)) 14%,transparent); color:var(--hc,var(--gold)); margin-bottom:18px; transition:transform .4s var(--ease-spring), background .3s, color .3s; } .hub-card:hover .hc-ic { transform:scale(1.12) rotate(5deg); background:var(--hc,var(--gold)); color:#0a0820; } .hub-card h3 { font-family:var(--font-title); font-weight:700; font-size:1.3rem; color:var(--ink); margin-bottom:8px; } .hub-card p { font-size:.9rem; color:var(--muted); line-height:1.65; margin-bottom:16px; } .hub-card .hc-go { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-title); font-weight:700; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; color:var(--hc,var(--gold)); } .hub-card:hover .hc-go i { transform:translateX(5px); } .hc-go i { transition:transform .3s; } .hub-card .hc-badge { position:absolute; top:16px; right:16px; font-family:var(--font-mono); font-size:.58rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 9px; border-radius:99px; background:var(--gold-soft); color:var(--gold); border:1px solid rgba(224,168,94,.3); } .hub-card .hc-badge.new { background:var(--green-soft); color:var(--green-lt); border-color:rgba(28,192,136,.3); } .hub-card .hc-badge.soon { background:var(--indigo-soft); color:var(--violet); border-color:rgba(123,110,240,.3); } @media (max-width:1024px){ .hub-grid { grid-template-columns:1fr 1fr; } } @media (max-width:680px){ .hub-grid { grid-template-columns:1fr; } } /* ============================================================================= 27 · MINIMALIST ENTERPRISE PASS (ui-ux-pro-max: Minimalism/Swiss + Enterprise SaaS) Calm motion · flat elevation · single accent · clean type. Overrides only. ========================================================================== */ /* A · MOTION CALM — remove distracting perpetual animations */ .pulse, .sup-price, .soon-badge i, .engineer, .cta-char img, .f-card, .wa-float, .stage-ring::before, .stage-ring::after, .deco-1, .deco-2, .deco-3 { animation: none !important; } .sup-price, .tier.featured .tier-price .money, .cb-amt, .tier.featured .tier-price { filter: none !important; } /* drop the moving "shine" sweep on buttons */ .btn-gold::before, .btn-cyan::before, .btn-shine::before, .btn-wa::before, .btn-primary::before, .calc-btn::before, .sup-btn::before, .cta-big-btn::before { display: none !important; } /* B · FLAT, CONSISTENT ELEVATION + HAIRLINE BORDERS */ .stat, .s-card, .svc-card, .price-card, .acad-card, .test-card, .faq-item, .hub-card, .course-card, .addin-feat, .auth-card, .tut-card, .cmp-wrap, .exp-band, .calc-wrap, .demo-shot, .mock-window, .fr-media, .addin-shot, .f-card, .mini-badge, .comm-feat, .svc-tag { box-shadow: var(--sh-sm); } .stat:hover, .s-card:hover, .svc-card:hover, .price-card:hover, .acad-card:hover, .test-card:hover, .hub-card:hover, .course-card:hover, .addin-feat:hover, .tut-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); } /* remove heavy glows on featured surfaces */ .tier.featured, .supremo, .price-card.feat { box-shadow: var(--sh-md) !important; } .glow-blob, .sup-glow, .price-glow, .comm-glow, .stat::before, .svc-card .spot { opacity: .5; } .glow-blob { filter: blur(70px); } /* C · SINGLE ACCENT — flatten decorative gradient text to a solid accent */ .grad, .sec-title .grad, .addin-title .grad, .cta-h2 .grad, .page-hero h1 .grad { background: none !important; -webkit-text-fill-color: var(--gold) !important; color: var(--gold) !important; } .grad-c, .sec-title .grad-c, .page-hero h1 .grad-c { background: none !important; -webkit-text-fill-color: var(--cyan) !important; color: var(--cyan) !important; } /* hero headline: clean, one accent line only */ .hero h1 .t1, .hero h1 .t2 { background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; } .hero h1 .t3 { background: none !important; -webkit-text-fill-color: var(--gold) !important; color: var(--gold) !important; } /* neutralize the rainbow accent strip on software cards (real logos carry the colour) */ .s-card::after { background: var(--gold) !important; } .s-card:hover { border-color: var(--line-2) !important; } /* D · CLEAN BUTTONS — solid, calm, accessible press feedback */ .btn { border-radius: var(--r); letter-spacing: .2px; } .btn:active { transform: translateY(0) scale(.985); } .btn-gold:hover, .btn-cyan:hover, .btn-ghost:hover, .btn-dark:hover, .btn-wa:hover { transform: translateY(-2px); } /* E · CALMER AMBIENT */ .aurora span { opacity: .22 !important; } #grid-canvas { opacity: .28; } html.light #grid-canvas { opacity: .4; } .hero-video-wrap::after { background: linear-gradient(180deg, rgba(8,6,26,.72) 0%, rgba(8,6,26,.62) 45%, rgba(8,6,26,.94) 100%) !important; } html.light .hero-video-wrap::after { background: linear-gradient(180deg, rgba(247,249,252,.62) 0%, rgba(247,249,252,.5) 45%, rgba(247,249,252,.96) 100%) !important; } /* F · QUIETER MICRO-INTERACTIONS — keep scale, drop playful rotation */ .s-card:hover .swl { transform: scale(1.04) !important; } .svc-card:hover .svc-ic { transform: translateZ(40px) scale(1.05) !important; } .acad-card:hover .acad-ic, .hub-card:hover .hc-ic { transform: scale(1.06) !important; } .brand:hover .brand-logo { transform: scale(1.04) !important; } /* G · clearer focus ring (WCAG) */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* ============================================================================= 29 · SCROLL UX · PROCESO · ÍNDICE DE SECCIÓN · 404 (2026-07 polish pass) ========================================================================== */ /* ---- Scroll progress bar (top hairline) ---- */ .scroll-progress { position:fixed; top:0; left:0; height:2px; width:100%; z-index:1200; background:var(--grad-gold); transform-origin:left; transform:scaleX(0); pointer-events:none; } /* ---- Back to top ---- */ .back-top { position:fixed; left:22px; bottom:24px; z-index:998; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:.95rem; background:var(--glass-strong); color:var(--ink-2); border:1px solid var(--line-2); box-shadow:var(--sh-md); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, color .2s, border-color .2s; } .back-top.show { opacity:1; visibility:visible; transform:none; } .back-top:hover { color:var(--gold); border-color:var(--gold); } @media (max-width:760px){ .back-top { left:14px; bottom:18px; width:40px; height:40px; } } /* ---- Mobile menu backdrop + CTA (injected by app.js) ---- */ .mobile-backdrop { position:fixed; inset:0; z-index:1001; background:rgba(4,3,14,.55); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; } .mobile-backdrop.show { opacity:1; visibility:visible; } html.light .mobile-backdrop { background:rgba(20,23,39,.35); } /* ---- Section index (anchor chips under a page hero) ---- */ .sec-index { display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding:4px 2px 10px; margin-top:-8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .sec-index::-webkit-scrollbar { display:none; } .sec-index a { flex-shrink:0; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill); background:var(--glass); border:1px solid var(--line); font-family:var(--font-title); font-weight:600; font-size:.8rem; color:var(--ink-2); transition:color .2s, border-color .2s, background .2s; } .sec-index a i { font-size:.78rem; color:var(--gold); } .sec-index a:hover { color:var(--ink); border-color:var(--gold); background:var(--gold-soft); } /* ---- Editorial numbering on feature rows ---- */ .fr-num { font-family:var(--font-mono); font-weight:700; font-size:.72rem; color:var(--muted-2); letter-spacing:1px; padding-right:11px; margin-right:11px; border-right:1px solid var(--line-2); } /* ---- Process (Cómo trabajamos) ---- */ .process { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:54px; list-style:none; padding:0; } .p-step { position:relative; padding:28px 24px 26px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); overflow:hidden; } .p-icon-img { position:absolute; top:16px; right:16px; width:70px; height:70px; object-fit:contain; opacity:.88; filter:drop-shadow(0 8px 18px rgba(25,184,232,.14)); transition:transform .3s var(--ease), opacity .3s; } .p-step:hover .p-icon-img { transform:translateY(-4px) rotate(2deg); opacity:1; } .p-step h3, .p-step p, .p-step .p-meta { position:relative; z-index:1; } .p-step::before { content:''; position:absolute; top:44px; right:-19px; width:20px; height:1px; background:var(--line-2); z-index:1; } .p-step:last-child::before { display:none; } .p-num { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; font-family:var(--font-mono); font-weight:700; font-size:.82rem; background:var(--gold-soft); color:var(--gold); border:1px solid rgba(224,168,94,.28); margin-bottom:16px; } .p-step h3 { font-family:var(--font-title); font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:8px; } .p-step p { font-size:.86rem; color:var(--muted); line-height:1.65; margin-bottom:14px; } .p-meta { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--green); } .p-meta i { font-size:.72rem; } @media (max-width:1024px){ .process { grid-template-columns:1fr 1fr; } .p-step::before { display:none; } } @media (max-width:640px){ .process { grid-template-columns:1fr; } } @media (max-width:760px){ .page-hero::after { width:58vw; right:-18vw; top:28%; opacity:.28; } .p-icon-img { width:58px; height:58px; right:12px; top:14px; } } /* ---- Testimonial verified badge ---- */ .t-verified { display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--green); background:var(--green-soft); border:1px solid rgba(28,192,136,.25); border-radius:99px; padding:3px 9px; white-space:nowrap; } .test-card .test-author { display:flex; align-items:center; gap:12px; } /* ---- 404 page ---- */ .err-hero { min-height:72vh; display:grid; place-items:center; text-align:center; padding:170px 0 90px; position:relative; z-index:2; } .err-code { font-family:var(--font-title); font-weight:800; font-size:clamp(6rem,18vw,11rem); line-height:1; letter-spacing:-6px; color:var(--ink); } .err-code span { color:var(--gold); } .err-hero h1 { font-family:var(--font-title); font-weight:800; font-size:clamp(1.4rem,3vw,2rem); color:var(--ink); margin:10px 0 12px; letter-spacing:-.5px; } .err-hero p { color:var(--muted); max-width:460px; margin:0 auto 30px; line-height:1.7; } /* ---------------------------------------------------------------------------- 29b · ADD-IN PLAN TABLE + COUNTDOWN CAPTION ------------------------------------------------------------------------- */ .plan-table { width:100%; border-collapse:collapse; margin:8px 0 0; } .plan-table td { padding:12px 6px; border-bottom:1px solid var(--line); font-size:.88rem; } .plan-table td:first-child { color:var(--ink-2); font-weight:600; } .plan-table td:nth-child(2) { text-align:right; font-family:var(--font-title); font-weight:800; color:var(--ink); } .plan-table td:nth-child(2) .cur { font-size:.78rem; vertical-align:super; } .plan-table .pm { text-align:right; font-family:var(--font-mono); font-size:.66rem; color:var(--muted); white-space:nowrap; } .plan-table tr:last-child td { border-bottom:none; } .plan-table tr.star td { color:var(--gold); background:var(--gold-soft); } .plan-table tr.star td:first-child i { margin-left:5px; } .plan-note { font-size:.78rem; color:var(--muted); line-height:1.6; margin:14px 0 20px; } .cd-cap { font-family:var(--font-mono); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin:18px 0 10px; } .cd-cap i { color:var(--gold); } .tier .countdown { margin-bottom:22px; } .tier .cd-box { min-width:64px; padding:10px 8px; } .tier .cd-box .cd-n { font-size:1.5rem; } .err-links { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px; } /* ============================================================================= 30 · PREMIUM MINIMAL UI SYSTEM · 2026-07 Unified visual language for every route. Functional behavior is unchanged. ========================================================================== */ /* --- Refined tokens and base rhythm --- */ :root { --bg: #070b13; --bg-2: #0a111d; --bg-3: #0e1727; --bg-elev: #111d30; --ink: #f4f6fb; --ink-2: #d2d8e5; --muted: #98a3b7; --muted-2: #707d92; --line: rgba(207, 220, 240, .09); --line-2: rgba(207, 220, 240, .17); --card: rgba(14, 24, 40, .78); --glass: rgba(10, 18, 31, .66); --glass-2: rgba(13, 23, 39, .82); --glass-strong: rgba(7, 12, 22, .9); --glass-brd: rgba(207, 220, 240, .1); --glass-brd-2: rgba(207, 220, 240, .18); --gold: #d6a968; --gold-lt: #edca91; --gold-deep: #b77d35; --cyan: #38b9e5; --cyan-lt: #72d5f3; --green: #2fc291; --violet: #9487ef; --gold-soft: rgba(214, 169, 104, .1); --cyan-soft: rgba(56, 185, 229, .1); --green-soft: rgba(47, 194, 145, .1); --indigo-soft: rgba(148, 135, 239, .1); --sh-sm: 0 1px 2px rgba(0, 0, 0, .24); --sh-md: 0 12px 30px rgba(0, 0, 0, .22); --sh-lg: 0 28px 70px rgba(0, 0, 0, .28); --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px; --maxw: 1240px; } html.light { --bg: #f6f8fb; --bg-2: #eef2f7; --bg-3: #e7edf5; --bg-elev: #ffffff; --ink: #101828; --ink-2: #344054; --muted: #667085; --muted-2: #98a2b3; --line: rgba(16, 24, 40, .08); --line-2: rgba(16, 24, 40, .14); --card: rgba(255, 255, 255, .9); --glass: rgba(255, 255, 255, .76); --glass-2: rgba(255, 255, 255, .9); --glass-strong: rgba(255, 255, 255, .94); --glass-brd: rgba(16, 24, 40, .08); --glass-brd-2: rgba(16, 24, 40, .14); --sh-sm: 0 1px 3px rgba(16, 24, 40, .06); --sh-md: 0 14px 34px rgba(16, 24, 40, .08); --sh-lg: 0 30px 75px rgba(16, 24, 40, .11); } body { background: radial-gradient(circle at 8% -4%, rgba(76, 94, 184, .14), transparent 31rem), radial-gradient(circle at 94% 8%, rgba(56, 185, 229, .08), transparent 28rem), var(--bg); font-size: 16px; line-height: 1.68; } html.light body { background: radial-gradient(circle at 8% -4%, rgba(86, 72, 201, .07), transparent 31rem), radial-gradient(circle at 94% 8%, rgba(56, 185, 229, .06), transparent 28rem), var(--bg); } .wrap { max-width: var(--maxw); padding-inline: clamp(20px, 4vw, 42px); } .section { padding: clamp(76px, 9vw, 118px) 0; } .section.tight { padding: clamp(58px, 7vw, 86px) 0; } .section + .section { border-top: 1px solid var(--line); } .sec-head { max-width: 750px; } .sec-title { margin-top: 16px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; } .sec-sub { max-width: 640px; margin-top: 18px; color: var(--muted); line-height: 1.75; } .eyebrow { gap: 8px; padding: 7px 12px; border-color: var(--line-2); background: color-mix(in srgb, var(--gold) 8%, transparent); font-size: .66rem; letter-spacing: .16em; } .eyebrow.cyan { border-color: var(--line-2); } .eyebrow.green { border-color: var(--line-2); } .eyebrow.violet { border-color: var(--line-2); } /* --- Cleaner navigation --- */ .topbar { height: 34px; border-bottom-color: var(--line); font-size: .72rem; } .topbar-left { gap: 14px; } .topbar-left .tb-item i { color: var(--cyan); } .sel-btn, .theme-btn { background: transparent; border-color: transparent; } .sel-btn:hover, .theme-btn:hover { background: var(--glass); border-color: var(--line-2); } nav#nav { top: 34px; padding: 13px 0; } nav#nav.scrolled { padding: 8px 0; box-shadow: 0 8px 32px rgba(0, 0, 0, .14); } .nav-inner { min-height: 54px; } .brand { gap: 11px; } .brand-logo { width: 44px; height: 44px; border-width: 1px; border-color: var(--line-2); box-shadow: none; } .brand-txt .b-name { font-size: 1.3rem; letter-spacing: .01em; } .brand-txt .b-sub { font-size: .5rem; letter-spacing: .2em; } .nav-links { gap: 4px; } .nav-links a { padding: 9px 12px; border-radius: 9px; font-size: .83rem; letter-spacing: 0; } .nav-links a::after { display: none; } .nav-links a:hover { background: var(--glass); } .nav-links a[aria-current="page"] { background: var(--gold-soft); color: var(--gold-lt); } .burger { width: 40px; height: 40px; border-radius: 10px; } .mobile-menu { border-left: 1px solid var(--line); box-shadow: -24px 0 70px rgba(0, 0, 0, .28); } /* --- Buttons: quiet, tactile, consistent --- */ .btn { min-height: 46px; padding: 12px 21px; border-radius: 11px; font-size: .88rem; letter-spacing: 0; box-shadow: none; transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s, border-color .22s; } .btn-lg { min-height: 52px; padding: 14px 25px; border-radius: 12px; font-size: .96rem; } .btn-sm { min-height: 38px; padding: 9px 15px; border-radius: 9px; } .btn-gold { color: #171006; box-shadow: 0 10px 25px rgba(214, 169, 104, .18); } .btn-gold:hover, .btn-cyan:hover, .btn-ghost:hover, .btn-dark:hover, .btn-wa:hover { transform: translateY(-2px); } .btn-gold:hover { box-shadow: 0 14px 32px rgba(214, 169, 104, .27); } .btn-ghost { background: color-mix(in srgb, var(--bg-elev) 64%, transparent); border-width: 1px; } .btn-gold::before, .btn-cyan::before, .btn-shine::before, .btn-wa::before { display: none; } .pulse { animation: none; } /* --- Home hero --- */ .hero { min-height: 760px; padding: 166px 0 88px; display: grid; align-items: center; } .hero-video-wrap::after { background: linear-gradient(90deg, rgba(7, 11, 19, .96) 0%, rgba(7, 11, 19, .82) 43%, rgba(7, 11, 19, .48) 72%, rgba(7, 11, 19, .82) 100%), linear-gradient(180deg, rgba(7, 11, 19, .28), rgba(7, 11, 19, .95)); } html.light .hero-video-wrap::after { background: linear-gradient(90deg, rgba(246, 248, 251, .94), rgba(246, 248, 251, .76) 48%, rgba(246, 248, 251, .38) 76%, rgba(246, 248, 251, .76)), linear-gradient(180deg, rgba(246, 248, 251, .18), rgba(246, 248, 251, .9)); } .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(34px, 5vw, 72px); } .hero-left { max-width: 690px; } .hero-badges { margin-bottom: 20px; } .mini-badge { padding: 6px 11px; border-radius: 9px; background: rgba(7, 12, 22, .55); } html.light .mini-badge { background: rgba(255, 255, 255, .66); } .hero h1 { font-size: clamp(3rem, 5.4vw, 4.75rem); line-height: .99; letter-spacing: -.055em; margin-bottom: 24px; text-wrap: balance; } .hero-desc { max-width: 650px; color: var(--ink-2); font-size: 1.03rem; line-height: 1.75; } .hero-ctas { margin-top: 30px; gap: 11px; } .hero-stats { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-2); gap: 0; } .hero-stat { flex: 1; padding: 0 22px; } .hero-stat:first-child { padding-left: 0; } .hero-stat .n { font-size: 1.55rem; } .hero-stat .l { color: var(--muted); font-size: .7rem; } .stage { max-width: 440px; } .stage-ring { opacity: .55; } .glow-blob { opacity: .45; } .f-card { border-radius: 12px; box-shadow: var(--sh-md); backdrop-filter: blur(16px); } .scroll-hint { opacity: .55; } .marquee { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 86%, transparent); } .mq-item { color: var(--muted); font-size: .78rem; } .mq-sep { opacity: .22; } /* --- Shared card language --- */ .s-card, .hub-card, .test-card, .auth-card, .course-card, .tut-card, .acad-card, .price-card, .tier, .p-step, .faq-item, .calc-wrap, .feature-row .fr-media, .community, .supremo, .addin, .demo-shot, .exam-banner { border-color: var(--line); box-shadow: var(--sh-sm); } .s-card, .hub-card, .test-card, .auth-card, .course-card, .tut-card, .acad-card, .price-card, .tier, .p-step { background: linear-gradient(150deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--bg-2) 88%, transparent)); transition: transform .28s var(--ease), border-color .28s, box-shadow .28s; } .s-card:hover, .hub-card:hover, .test-card:hover, .auth-card:hover, .course-card:hover, .tut-card:hover, .acad-card:hover, .price-card:hover, .p-step:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--sh-md); } .stack-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 44px; } .s-card { min-height: 145px; padding: 22px 14px; border-radius: 16px; } .s-card::before { height: 1px; opacity: .65; } .swl { width: 48px; height: 48px; border-radius: 12px; font-size: 1.05rem; } .swl.img { padding: 8px; } .s-name { margin-top: 13px; font-size: .88rem; } .s-cat { font-size: .63rem; letter-spacing: .06em; } .hub-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 46px; } .hub-card { min-height: 286px; padding: 30px; border-radius: 20px; overflow: hidden; } .hub-card::after { content: ''; position: absolute; inset: auto 28px 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--hc, var(--gold)); opacity: .68; transition: inset .28s var(--ease), opacity .28s; } .hub-card:hover::after { inset-inline: 0; opacity: 1; } .hc-ic { width: 48px; height: 48px; border-radius: 13px; font-size: 1.1rem; } .hub-card h3 { margin-top: 24px; font-size: 1.24rem; } .hub-card p { color: var(--muted); line-height: 1.7; } .hc-go { margin-top: auto; padding-top: 24px; font-size: .79rem; } .hc-badge { top: 22px; right: 22px; } .test-grid { gap: 16px; margin-top: 44px; } .test-card { padding: 28px; border-radius: 18px; } .test-card .q { opacity: .16; } .test-card p { color: var(--ink-2); line-height: 1.75; } .test-av { box-shadow: none; } .cta-strip { padding: clamp(66px, 8vw, 92px) 0; background: radial-gradient(circle at 50% 0%, rgba(56, 185, 229, .09), transparent 38rem), linear-gradient(135deg, color-mix(in srgb, var(--bg-3) 88%, transparent), var(--bg-2)); border-block: 1px solid var(--line); } .cta-strip h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; text-wrap: balance; } .cta-strip p { max-width: 620px; line-height: 1.75; } .faq-list { max-width: 860px; margin-inline: auto; } .faq-item { border-radius: 14px; background: color-mix(in srgb, var(--card) 84%, transparent); } .faq-q { padding: 21px 22px; } .faq-a p { line-height: 1.75; } /* --- Internal page hero with custom editorial artwork --- */ .page-hero { min-height: 650px; padding: 154px 0 76px; display: grid; align-items: center; border-bottom: 1px solid var(--line); } .page-hero::before { background: radial-gradient(ellipse 55% 65% at 12% 18%, rgba(86, 72, 201, .14), transparent 68%), linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg-2) 58%, transparent)); } .page-hero::after { display: none; } .page-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(400px, .97fr); align-items: center; gap: clamp(42px, 6vw, 78px); } .page-hero-copy { min-width: 0; } .page-hero h1 { max-width: 15ch; margin: 17px 0 18px; font-size: clamp(2.65rem, 4.8vw, 4.15rem); line-height: 1; letter-spacing: -.052em; text-wrap: balance; } .page-hero .lead { max-width: 640px; margin-bottom: 26px; color: var(--ink-2); font-size: 1rem; line-height: 1.75; } .page-hero .ph-ctas { gap: 10px; } .page-hero .ph-stats { margin-top: 30px; gap: 0; padding-top: 22px; border-top: 1px solid var(--line); } .page-hero .ph-stats > div { flex: 1; padding-inline: 18px; border-left: 1px solid var(--line); } .page-hero .ph-stats > div:first-child { padding-left: 0; border-left: 0; } .page-hero .ph-stats .n { font-size: 1.35rem; } .page-hero .ph-stats .l { font-size: .68rem; } .page-hero-visual { position: relative; min-width: 0; aspect-ratio: 1.18 / 1; margin: 0; border: 1px solid var(--line-2); border-radius: 28px; overflow: hidden; background: var(--bg-2); box-shadow: var(--sh-lg); isolation: isolate; } .page-hero-visual::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7, 11, 19, .38), transparent 48%), linear-gradient(180deg, transparent 58%, rgba(7, 11, 19, .72)); pointer-events: none; } .page-hero-visual::after { content: ''; position: absolute; inset: 14px; z-index: 2; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; pointer-events: none; } .page-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 66% center; } .page-hero-visual figcaption, .comm-visual figcaption { position: absolute; left: 24px; bottom: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 9px; background: rgba(7, 11, 19, .68); color: #f4f6fb; backdrop-filter: blur(12px); font-family: var(--font-title); font-size: .72rem; font-weight: 600; } .page-hero-visual figcaption i { color: var(--cyan-lt); } /* --- Detail pages and content modules --- */ .sec-index { margin-top: 0; padding-block: 14px; gap: 7px; } .sec-index a { padding: 8px 13px; border-radius: 9px; background: transparent; font-size: .74rem; } .feature-row { gap: clamp(38px, 6vw, 74px); padding: clamp(56px, 7vw, 82px) 0; } .feature-row h2 { font-size: clamp(1.8rem, 3vw, 2.45rem); letter-spacing: -.035em; } .feature-row p { line-height: 1.75; } .fr-media { min-height: 360px; border-radius: 22px; } .fr-media.photo::after { background: linear-gradient(180deg, transparent 45%, rgba(7, 11, 19, .55)); } .fr-media .fr-badge { left: 18px; bottom: 18px; padding: 7px 11px; border-radius: 8px; } .process { gap: 14px; margin-top: 44px; } .p-step { padding: 26px 22px; border-radius: 16px; } .p-step::before { background: var(--line-2); } .p-num { width: 34px; height: 34px; border-radius: 9px; } .p-icon-img { width: 62px; height: 62px; opacity: .82; } .authority { gap: 14px; margin-top: 0; } .auth-card { padding: 28px 20px; border-radius: 16px; } .auth-card .ai { width: 42px; height: 42px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 11px; background: var(--gold-soft); font-size: 1rem; } .auth-card p { line-height: 1.65; } .course-grid { gap: 16px; margin-top: 44px; } .course-card { border-radius: 18px; } .course-card:hover { transform: translateY(-4px); } .course-thumb { overflow: hidden; } .course-thumb::after { content: ''; position: absolute; inset: 45% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(7, 11, 19, .52)); pointer-events: none; } .course-info { padding: 21px; } .acad-grid { gap: 14px; } .acad-card { padding: 25px 22px; border-radius: 16px; } .acad-ic { width: 44px; height: 44px; border-radius: 11px; } .calc-wrap { border-radius: 22px; overflow: hidden; background: var(--card); } .calc-form, .calc-result { padding: clamp(26px, 4vw, 42px); } .calc-group label { color: var(--ink-2); } .calc-select, .calc-input, input, select, textarea { min-height: 46px; border-radius: 10px; background: var(--bg-2); border-color: var(--line-2); } .price-card, .tier { border-radius: 18px; } .mk-tabs { gap: 4px; } .mk-tab { padding: 12px 16px; } .mk-panel { padding-top: 34px; } .demo-shot { border-radius: 16px; } .compat-table, .cmp { overflow: hidden; border-radius: 14px; } .community { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(34px, 5vw, 62px); padding: clamp(28px, 4vw, 48px); border-radius: 26px; background: linear-gradient(135deg, rgba(37, 211, 102, .08), var(--card)); box-shadow: var(--sh-lg); } .comm-glow { opacity: .42; } .comm-left h1,.comm-left h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.045em; text-wrap: balance; } .comm-left p { color: var(--ink-2); } .comm-feat { border-radius: 9px; background: color-mix(in srgb, var(--bg-elev) 55%, transparent); } .comm-right { align-items: stretch; } .comm-visual { position: relative; aspect-ratio: 1.15 / 1; margin: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg-2); } .comm-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 56%, rgba(7, 11, 19, .7)); pointer-events: none; } .comm-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; } .comm-visual figcaption { left: 16px; bottom: 16px; } .comm-visual figcaption i { color: #25d366; } .comm-members { justify-content: center; padding-top: 2px; } /* --- Footer and fixed actions --- */ .foot { background: color-mix(in srgb, var(--bg-2) 92%, transparent); border-top: 1px solid var(--line); } .foot-grid { gap: clamp(28px, 5vw, 64px); } .wa-float, .back-top { box-shadow: var(--sh-md); } .back-top { border-radius: 11px; } /* --- Responsive layout --- */ @media (max-width: 1180px) { .stack-grid { grid-template-columns: repeat(4, 1fr); } .page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: 38px; } .page-hero h1 { font-size: clamp(2.5rem, 4.8vw, 3.6rem); } } @media (max-width: 1024px) { .hero { padding-top: 148px; } .hero-grid { grid-template-columns: 1fr; } .hero-left { text-align: center; margin-inline: auto; } .hero-desc { margin-inline: auto; } .hero-right { min-height: 410px; } .hero-stats { max-width: 650px; margin-inline: auto; } .page-hero { padding: 142px 0 64px; } .page-hero-grid { grid-template-columns: 1fr; gap: 34px; } .page-hero-copy { max-width: 760px; } .page-hero h1 { max-width: 17ch; } .page-hero-visual { width: min(100%, 760px); aspect-ratio: 16 / 8.8; } .page-hero-visual img { object-position: 70% center; } .community { grid-template-columns: 1fr; } .comm-visual { aspect-ratio: 16 / 8.5; } } @media (max-width: 760px) { .wrap { padding-inline: 18px; } .section { padding: 66px 0; } .section.tight { padding: 52px 0; } .topbar-left .tb-item:not(:first-child) { display: none; } .brand-txt .b-sub { display: none; } .hero { min-height: auto; padding: 140px 0 62px; } .hero h1 { font-size: clamp(2.55rem, 12.5vw, 3.6rem); } .hero-desc { font-size: .96rem; } .hero-ctas, .page-hero .ph-ctas { display: grid; grid-template-columns: 1fr; } .hero-ctas .btn, .page-hero .ph-ctas .btn { width: 100%; white-space: normal; } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); } .hero-stat { padding: 0 10px; } .hero-right { min-height: 360px; } .stage { max-width: 320px; } .advisor-chip { width: 104px; } .stack-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; } .s-card { min-height: 128px; padding: 18px 10px; } .hub-grid { grid-template-columns: 1fr; } .hub-card { min-height: 244px; padding: 25px; } .test-grid { grid-template-columns: 1fr; } .test-card { padding: 24px; } .page-hero { min-height: auto; padding: 132px 0 54px; } .page-hero h1 { margin-top: 15px; font-size: clamp(2.35rem, 10.5vw, 3.15rem); } .page-hero .lead { font-size: .95rem; } .page-hero .ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); } .page-hero .ph-stats > div { padding-inline: 10px; } .page-hero .ph-stats .n { font-size: 1.1rem; } .page-hero-visual { aspect-ratio: 4 / 3; border-radius: 20px; } .page-hero-visual::after { inset: 10px; border-radius: 13px; } .page-hero-visual figcaption { left: 15px; bottom: 15px; max-width: calc(100% - 30px); } .feature-row { gap: 26px; padding: 48px 0; } .fr-media { min-height: 270px; border-radius: 18px; } .authority { grid-template-columns: 1fr 1fr; } .community { padding: 22px; border-radius: 20px; } .comm-visual { aspect-ratio: 4 / 3; } .t-verified { margin-left: 0; } } @media (max-width: 520px) { .topbar { height: 32px; } nav#nav { top: 32px; } .brand-logo { width: 40px; height: 40px; } .brand-txt .b-name { font-size: 1.12rem; } .hero-stats { grid-template-columns: 1fr; gap: 14px; } .hero-stat { padding: 0; } .hero-stat + .hero-stat { padding-top: 14px; border-top: 1px solid var(--line); } .hero-stat::before { display: none; } .stack-grid { grid-template-columns: repeat(2, 1fr); } .page-hero .ph-stats { grid-template-columns: 1fr; gap: 13px; } .page-hero .ph-stats > div { padding: 13px 0 0; border-left: 0; border-top: 1px solid var(--line); } .page-hero .ph-stats > div:first-child { padding-top: 0; border-top: 0; } .page-hero-visual figcaption { font-size: .66rem; } .authority { grid-template-columns: 1fr; } .comm-feats { display: grid; grid-template-columns: 1fr; } .comm-feat { width: 100%; } .comm-members { flex-wrap: wrap; } .calc-form, .calc-result { padding: 24px 20px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================================================= 31 · LIGHT MODE CONTRAST AUDIT · 2026-07 Darker semantic accents and light surfaces for previously dark-only modules. ========================================================================== */ html.light { --ink: #101828; --ink-2: #2d3a4f; --muted: #4f5d73; --muted-2: #667085; --gold: #87540f; --gold-lt: #714309; --gold-deep: #633a06; --cyan: #08799f; --cyan-lt: #075f7e; --green: #087653; --green-lt: #056346; --violet: #5545b6; --line: rgba(16, 24, 40, .11); --line-2: rgba(16, 24, 40, .2); --gold-soft: rgba(135, 84, 15, .1); --cyan-soft: rgba(8, 121, 159, .09); --green-soft: rgba(8, 118, 83, .09); --indigo-soft: rgba(85, 69, 182, .09); } html.light .topbar, html.light .topbar-left, html.light .breadcrumb, html.light .breadcrumb a { color: var(--ink-2); } html.light .topbar-left .tb-item i { color: var(--cyan); } html.light .nav-links a.hot { color: var(--gold); } html.light .nav-links a[aria-current="page"] { color: var(--gold); background: rgba(135, 84, 15, .1); } html.light .theme-btn { color: var(--gold); } html.light .brand-txt .b-name span, html.light .hero h1 .t3, html.light .grad, html.light .sec-title .grad, html.light .addin-title .grad, html.light .cta-h2 .grad, html.light .page-hero h1 .grad { background: none !important; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } html.light .grad-c, html.light .sec-title .grad-c, html.light .page-hero h1 .grad-c { background: none !important; color: var(--cyan) !important; -webkit-text-fill-color: var(--cyan) !important; } html.light .eyebrow { color: var(--gold); background: rgba(135, 84, 15, .1); border-color: rgba(135, 84, 15, .24); } html.light .eyebrow.cyan { color: var(--cyan); background: var(--cyan-soft); border-color: rgba(8, 121, 159, .24); } html.light .eyebrow.green { color: var(--green); background: var(--green-soft); border-color: rgba(8, 118, 83, .24); } html.light .eyebrow.violet { color: var(--violet); background: var(--indigo-soft); border-color: rgba(85, 69, 182, .24); } html.light .mini-badge { color: var(--ink-2); border-color: var(--line-2); } html.light .hero-desc, html.light .page-hero .lead, html.light .sec-sub { color: var(--ink-2); } /* Featured pricing surfaces were designed dark-first; make them truly light. */ html.light .tier.featured { background: linear-gradient(155deg, #ffffff 0%, #f4f1fb 100%); border-color: rgba(85, 69, 182, .24); box-shadow: var(--sh-md) !important; } html.light .tier.featured .tier-name, html.light .tier.featured .tier-price .cur, html.light .tier.featured .tier-price .per, html.light .tier.featured .tier-list li { color: var(--ink); } html.light .tier.featured .tier-desc, html.light .tier.featured .tier-old { color: var(--muted); } html.light .tier.featured .tier-price .amt, html.light .tier.featured .tier-price .money { background: none !important; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } html.light .tier-save, html.light .tier-name .chip.life { color: var(--green); background: rgba(8, 118, 83, .1); border-color: rgba(8, 118, 83, .22); } html.light .supremo { background: linear-gradient(145deg, #ffffff 0%, #faf5ec 100%); border-color: rgba(135, 84, 15, .25); box-shadow: var(--sh-md) !important; } html.light .sup-price, html.light .sup-price .cur, html.light .price-card.feat-pop .pc-new, html.light .cb-amt, html.light .exp-band .eb-num { background: none !important; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } html.light .sup-save { color: var(--green); border-color: rgba(8, 118, 83, .22); } html.light .sup-feat { background: #ffffff; color: var(--ink-2); border-color: var(--line); } html.light .exp-band { background: linear-gradient(145deg, #ffffff, #f1f4f9); border-color: var(--line-2); } html.light .calc-result { background: linear-gradient(155deg, #f4f1fb, #edf3f8); border-left-color: var(--line); } html.light .calc-result .cr-val, html.light .calc-slider-val, html.light .calc-group label { color: var(--gold); } html.light .community .eyebrow.green, html.light .comm-left h1 span, html.light .comm-left h2 span { color: var(--green); } html.light .community .eyebrow.green { background: var(--green-soft); border-color: rgba(8, 118, 83, .24); } html.light .comm-feat i { color: var(--green); } /* Inline per-card colors are decorative; use a darker mix for readable labels. */ html.light .hub-card .hc-go, html.light .hub-card .hc-badge { color: color-mix(in srgb, var(--hc, var(--gold)) 52%, #101828); } html.light .hub-card .hc-badge { background: #ffffff; border-color: var(--line-2); } html.light .hub-card .hc-badge.new { color: var(--green); background: var(--green-soft); border-color: rgba(8, 118, 83, .22); } html.light .hub-card .hc-badge.soon { color: var(--violet); background: var(--indigo-soft); border-color: rgba(85, 69, 182, .22); } html.light .pc-bonus, html.light .tut-info .tut-link { color: var(--cyan); } html.light .cmp thead .feat-col { color: var(--gold); } html.light .cmp .feat-col { background: rgba(135, 84, 15, .07); } html.light .cmp tbody tr:hover td.feat-col { background: rgba(135, 84, 15, .12); } /* Preserve high-contrast labels inside intentionally dark media mockups. */ html.light .mock-window .mock-bar .t { color: #b7c1d4; } html.light .mock-window .mock-cap, html.light .demo-shot .ds-cap { color: #72d5f3; } html.light .mock-window .mock-tool { color: #72d5f3; } html.light .mock-window .mock-tool:nth-child(odd), html.light .demo-shot .ds-body { color: #edca91; } html.light .mock-window .mock-tool.on { color: #edca91; } html.light .faq-q:hover { color: var(--gold); } html.light .faq-q .qi { color: var(--gold); background: var(--gold-soft); } html.light .t-verified { color: var(--green); border-color: rgba(8, 118, 83, .22); } /* Final cascade anchors for the 2026-08 product experience. */ .hero { background:radial-gradient(circle at 77% 38%,rgba(25,184,232,.13),transparent 32%),radial-gradient(circle at 8% 84%,rgba(224,168,94,.10),transparent 34%),linear-gradient(145deg,var(--bg) 0%,var(--bg-2) 54%,var(--bg-3) 100%); } .hero .hero-right { align-items:center; } .hero .bim-console { width:min(100%,590px); } .addin-pricing.pricing-3 { grid-template-columns:repeat(3,minmax(0,1fr));max-width:1240px; } .page-hero-visual .product-hero-shot>img { object-fit:cover;object-position:center; } .page-hero-visual.product-poster img,.product-poster img { object-fit:contain!important;object-position:center!important; } .video-embed-live { position:relative;width:100%;height:100%;min-height:inherit;overflow:hidden;background:#050814;border-radius:inherit; } .video-embed-live iframe { position:absolute;inset:0;width:100%;height:100%;border:0; } .product-hero-shot>.video-embed-live { position:absolute;inset:0;z-index:5; } .product-hero-shot.video-active::after { display:none; } @media (max-width:1180px){.addin-pricing.pricing-3{grid-template-columns:repeat(2,minmax(0,1fr))}.addin-pricing.pricing-3 .tier.perpetua{grid-column:1/-1}} @media (max-width:720px){.addin-pricing.pricing-3{grid-template-columns:1fr}.addin-pricing.pricing-3 .tier.perpetua{grid-column:auto}} /* ============================================================================= 32 · PROFESSIONAL FINISHING PASS · 2026-08 Balanced grids, calmer motion and consistent conversion-card alignment. ========================================================================== */ ::selection { background: color-mix(in srgb, var(--gold) 78%, transparent); color: #0c1019; } :where(h1, h2, h3) { text-wrap: balance; } :where(p, li) { text-wrap: pretty; } nav#nav { border-bottom: 1px solid transparent; transition: padding .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); } nav#nav.scrolled { border-bottom-color: var(--line); } .hero-badges { align-items: stretch; gap: 9px; } .hero-badges .mini-badge { min-height: 34px; align-items: center; } .hero-trustline { width: fit-content; min-height: 36px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg-elev) 58%, transparent); } /* The construction viewer should feel alive, not distract continuously. */ .bim-console::before { animation: consoleSheenOnce 1.35s .45s var(--ease) both; } .bim-console.paused .bim-console-status i { animation: none; } @keyframes consoleSheenOnce { from { transform: translateX(-115%); } to { transform: translateX(115%); } } .wa-float { animation: none; } .wa-float::before { inset: -4px; opacity: .38; animation: none; } .product-intro { border-block: 1px solid var(--line); background: radial-gradient(circle at 90% 16%, rgba(56, 185, 229, .07), transparent 28rem), radial-gradient(circle at 8% 88%, rgba(214, 169, 104, .06), transparent 26rem), color-mix(in srgb, var(--bg-2) 56%, transparent); } .product-feature-card { display: grid; grid-template-rows: auto 1fr; } .product-feature-copy { display: flex; flex-direction: column; } .product-feature-copy > .btn { align-self: flex-start; margin-top: auto; } .product-shot { border-bottom: 1px solid var(--line); } .hub-card { display: flex; flex-direction: column; } .mobile-theme-toggle { display: flex; align-items: center; gap: 11px; min-height: 48px; margin-top: 8px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--bg-elev) 70%, transparent); color: var(--ink-2); font: 700 .9rem var(--font-title); cursor: pointer; } .mobile-theme-toggle i { width: 20px; color: var(--gold); } .mobile-theme-toggle:hover, .mobile-theme-toggle:focus-visible { color: var(--ink); border-color: var(--line-2); background: var(--glass-2); outline: 3px solid rgba(56, 185, 229, .22); outline-offset: 2px; } .test-card { display: flex; min-width: 0; flex-direction: column; } .test-card p { flex: 1; } .test-card .test-author { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 7px; } .test-card .test-av { grid-row: 1 / span 2; } .test-card .t-verified { grid-column: 2; width: fit-content; max-width: 100%; margin: 0; } /* Seven destinations: make the final one an intentional wide callout. */ @media (min-width: 901px) { .hub-grid > .hub-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; min-height: 176px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 22px; row-gap: 5px; padding: 28px 32px; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) .hc-ic { grid-column: 1; grid-row: 1 / -1; width: 54px; height: 54px; margin: 0; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) h3 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) p { grid-column: 2; grid-row: 2; align-self: start; max-width: 780px; margin: 0; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) .hc-go { grid-column: 3; grid-row: 1 / -1; align-self: center; margin: 0; padding: 12px 15px; border: 1px solid color-mix(in srgb, var(--hc, var(--gold)) 28%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--hc, var(--gold)) 8%, transparent); } } @media (hover: none) { .s-card:hover, .hub-card:hover, .test-card:hover, .auth-card:hover, .course-card:hover, .tut-card:hover, .acad-card:hover, .price-card:hover, .p-step:hover, .product-feature-card:hover, .real-shot:hover, .video-lite:hover { transform: none; } } @media (max-width: 760px) { .hero-badges { align-items: flex-start; } .hero-trustline { width: 100%; } .test-card .t-verified { white-space: normal; line-height: 1.35; } .wa-float { right: 14px; bottom: 14px; width: 52px; height: 52px; font-size: 1.45rem; } } /* ============================================================================= 34 · IMGENYA PREMIUM SYSTEM · 2026-08 Unified technical palette, calmer motion, clearer hierarchy and stronger UX. ========================================================================== */ :root { --bg: #07111f; --bg-2: #0a1627; --bg-3: #0d1c31; --bg-elev: #10233a; --ink: #f7f9fc; --ink-2: #d3ddea; --muted: #9aabc0; --muted-2: #71859e; --line: rgba(183, 207, 232, .11); --line-2: rgba(183, 207, 232, .2); --indigo: #4568a8; --indigo-lt: #7194d2; --indigo-deep: #19345a; --cyan: #28b8dc; --cyan-lt: #63daf2; --gold: #e4ad5e; --gold-lt: #f0c37f; --gold-deep: #bd7926; --green: #1ba878; --green-lt: #58d6aa; --violet: #8e83d8; --glass: rgba(10, 23, 40, .72); --glass-2: rgba(13, 29, 50, .84); --glass-strong: rgba(7, 17, 31, .95); --glass-brd: rgba(183, 207, 232, .11); --glass-brd-2: rgba(183, 207, 232, .2); --card: rgba(12, 27, 47, .86); --sh-sm: 0 1px 2px rgba(0, 0, 0, .22); --sh-md: 0 12px 30px rgba(0, 0, 0, .24); --sh-lg: 0 26px 64px rgba(0, 0, 0, .32); --cta-bg: #e4ad5e; --cta-ink: #171006; --maxw: 1260px; } html.light { --bg: #f3f6fa; --bg-2: #eaf0f6; --bg-3: #e2eaf3; --bg-elev: #ffffff; --ink: #101827; --ink-2: #2d3a4f; --muted: #526174; --muted-2: #6d7b8e; --line: rgba(25, 49, 77, .12); --line-2: rgba(25, 49, 77, .2); --card: rgba(255, 255, 255, .94); --glass: rgba(255, 255, 255, .78); --glass-2: rgba(255, 255, 255, .92); --glass-strong: rgba(247, 250, 253, .97); --glass-brd: rgba(25, 49, 77, .1); --glass-brd-2: rgba(25, 49, 77, .18); --cyan: #087b9a; --cyan-lt: #07647e; --gold: #86520d; --gold-lt: #704208; --gold-deep: #5f3705; --green: #087653; --green-lt: #056346; --cta-bg: #a96712; --cta-ink: #ffffff; --sh-sm: 0 1px 3px rgba(17, 37, 61, .06); --sh-md: 0 12px 30px rgba(17, 37, 61, .09); --sh-lg: 0 26px 64px rgba(17, 37, 61, .12); } body { background: radial-gradient(circle at 86% 3%, rgba(40, 184, 220, .08), transparent 27rem), radial-gradient(circle at 6% 18%, rgba(69, 104, 168, .09), transparent 29rem), var(--bg); transition: background-color .3s var(--ease), color .3s var(--ease); } html.light body { background: radial-gradient(circle at 86% 3%, rgba(8, 123, 154, .055), transparent 27rem), radial-gradient(circle at 6% 18%, rgba(69, 104, 168, .055), transparent 29rem), var(--bg); } .aurora .a1, .aurora .a3 { display: none; } .aurora .a2 { opacity: .13 !important; animation-duration: 42s; } #grid-canvas { opacity: .16; } html.light #grid-canvas { opacity: .2; } .marquee { opacity: .86; } .mq-track { animation-duration: 42s; } .wrap { max-width: var(--maxw); padding-inline: clamp(20px, 4vw, 44px); } .section { padding: clamp(76px, 8vw, 108px) 0; } .section.tight { padding: clamp(56px, 6.5vw, 80px) 0; } .section + .section { border-top-color: var(--line); } .section:nth-of-type(even):not(.product-intro) { background: color-mix(in srgb, var(--bg-2) 42%, transparent); } .sec-head { max-width: 790px; } .sec-head.center { text-align: center; } .sec-title { max-width: 860px; margin-inline: auto; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.04; letter-spacing: -.045em; } .sec-sub { max-width: 680px; margin-inline: auto; line-height: 1.72; } .eyebrow { letter-spacing: .11em; } .topbar { min-height: 40px; height: auto; } .topbar .wrap { min-height: 40px; } .sel-btn, .theme-btn { min-width: 44px; min-height: 44px; border-radius: 10px; } .sel-btn { padding-inline: 10px; } .selector.open .sel-btn { border-color: var(--line-2); background: var(--glass-2); } .sel-opt { min-height: 44px; } .sel-opt:focus-visible { background: var(--glass-2); outline-offset: -3px; } nav#nav { min-height: 78px; } .nav-inner { min-height: 78px; } .brand-logo { filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .12)); } .nav-links { gap: 4px; } .nav-links a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 9px; font-size: .79rem; letter-spacing: .01em; } .nav-links a:hover { background: color-mix(in srgb, var(--bg-elev) 70%, transparent); } .nav-links a[aria-current="page"] { color: var(--gold-lt); background: var(--gold-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent); } .burger { width: 44px; height: 44px; } .menu-open { overflow: hidden; } .mobile-panel a[aria-current="page"] { color: var(--gold-lt) !important; } .btn { min-height: 44px; border-radius: 11px; transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); } .btn-gold { background: var(--cta-bg); color: var(--cta-ink); box-shadow: 0 10px 24px color-mix(in srgb, var(--cta-bg) 20%, transparent); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--cta-bg) 28%, transparent); } .btn-ghost { background: color-mix(in srgb, var(--bg-elev) 65%, transparent); } .btn-lg { min-height: 52px; padding: 14px 24px; } .btn-sm { min-height: 42px; padding: 9px 15px; } .hero { min-height: min(840px, calc(100svh - 20px)); padding: 166px 0 84px; background: radial-gradient(circle at 76% 34%, rgba(40, 184, 220, .09), transparent 30%), linear-gradient(145deg, var(--bg) 0%, var(--bg-2) 62%, var(--bg-3) 100%); } .hero-code-bg::before { opacity: .32; background-size: 72px 72px; } .hero-code-bg::after { opacity: .62; } .hero-code-bg span { display: none; } .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); gap: clamp(40px, 5vw, 72px); } .hero-left { max-width: 690px; } .hero h1 { max-width: 690px; font-size: clamp(3.15rem, 5.4vw, 4.8rem); line-height: .98; letter-spacing: -.058em; } .hero-desc { max-width: 650px; color: var(--ink-2); font-size: 1rem; line-height: 1.75; } .hero-ctas { gap: 12px; } .hero-trustline { background: color-mix(in srgb, var(--bg-elev) 76%, transparent); border-color: var(--line-2); color: var(--ink-2); } .hero-stat .n { letter-spacing: -.035em; } .bim-console { border-radius: 22px; box-shadow: 0 28px 70px rgba(0, 0, 0, .34); } .bim-console:hover { transform: translateY(-2px); } .bim-console-head { font-size: .7rem; } .bim-data-tag { font-size: .68rem; } .bim-phase-card > span { font-size: .6rem; } .bim-phase-card > strong { font-size: .84rem; } .bim-selection small { font-size: .56rem; } .bim-selection strong { font-size: .78rem; } .bim-selection span { font-size: .65rem; } .bim-hint { font-size: .6rem; } .bim-timeline > div { font-size: .58rem; } .product-intro { background: radial-gradient(circle at 90% 14%, rgba(40, 184, 220, .055), transparent 26rem), color-mix(in srgb, var(--bg-2) 64%, transparent); } .product-feature-grid { gap: 20px; } .product-feature-card, .hub-card, .test-card, .faq-item, .svc-card, .s-card, .course-card, .price-card, .tier, .addin-feat { border-color: var(--line); background: var(--card); box-shadow: var(--sh-sm); } .product-feature-card, .hub-card, .test-card, .svc-card, .s-card, .course-card, .price-card, .tier, .addin-feat { transition: transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease); } .product-feature-card:hover, .hub-card:hover, .test-card:hover, .svc-card:hover, .s-card:hover, .course-card:hover, .price-card:hover, .tier:hover, .addin-feat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cyan) 34%, var(--line)); box-shadow: var(--sh-md); } .product-feature-card:hover .product-shot img, .card-media:hover img, .photo:hover img { transform: scale(1.015); } .product-feature-copy { padding: 26px; } .product-proof { padding-block: 2px; } .hub-grid { gap: 16px; } .hub-card { min-height: 276px; border-radius: 18px; } .hub-card::after { height: 2px; } .hub-card .hc-ic { border-radius: 14px; transition: background-color .22s var(--ease), color .22s var(--ease); } .hub-card:hover .hc-ic { transform: none; } .hub-card h3 { letter-spacing: -.02em; } .hub-card .hc-go { color: var(--cyan-lt); } .test-card { border-radius: 18px; } .t-verified { color: var(--green-lt); } .faq-list { max-width: 900px; } .faq-item { border-radius: 14px; } .faq-item.open { border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); box-shadow: var(--sh-md); } .faq-q { min-height: 64px; } .faq-q[role="button"] { cursor: pointer; } .faq-q[role="button"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--cyan) 28%, transparent); outline-offset: -3px; } .cta-strip { background: linear-gradient(135deg, color-mix(in srgb, var(--bg-3) 88%, transparent), color-mix(in srgb, var(--bg-elev) 72%, transparent)); } .foot { border-top-color: var(--line-2); background: color-mix(in srgb, var(--bg-2) 84%, var(--bg)); } .page-hero { border-bottom: 1px solid var(--line); background: radial-gradient(circle at 84% 25%, rgba(40, 184, 220, .07), transparent 26rem), linear-gradient(145deg, var(--bg), var(--bg-2)); } .page-hero h1 { letter-spacing: -.052em; } .page-hero-visual { border-radius: 22px; border-color: var(--line-2); box-shadow: var(--sh-lg); } .reveal { transform: translateY(12px); transition: opacity .34s var(--ease), transform .38s var(--ease); } .reveal.left { transform: translateX(-14px); } .reveal.right { transform: translateX(14px); } .reveal.zoom { transform: translateY(8px) scale(.985); } ::view-transition-old(root) { animation: vtOut .26s var(--ease) both; } ::view-transition-new(root) { animation: vtIn .32s var(--ease) both; } @media (max-width: 1100px) { .hero { min-height: auto; } .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr); gap: 34px; } .hero h1 { font-size: clamp(2.9rem, 5.8vw, 4.2rem); } } @media (max-width: 860px) { .hero { padding: 138px 0 70px; } .hero-grid { grid-template-columns: 1fr; } .hero-left { max-width: 760px; } .hero-right { max-width: 640px; margin-inline: auto; width: 100%; } .bim-console { margin-inline: auto; } .section:nth-of-type(even):not(.product-intro) { background: transparent; } } @media (max-width: 620px) { .topbar { min-height: 36px; } .topbar .wrap { min-height: 36px; } .sel-btn, .theme-btn { min-width: 40px; min-height: 40px; } .hero { padding: 126px 0 58px; } .hero h1 { font-size: clamp(2.55rem, 13vw, 3.35rem); line-height: 1; } .hero-desc { font-size: .94rem; } .hero-ctas { display: grid; grid-template-columns: 1fr; margin: 22px 0 0; } .hero-ctas .btn { width: 100%; justify-content: center; } .hero-trustline { margin-top: 12px; } .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 24px; padding-top: 18px; } .hero-stat { min-width: 0; padding-inline: 8px; } .hero-stat:first-child { padding-left: 0; } .hero-stat + .hero-stat { padding-top: 0; border-top: 0; border-left: 1px solid var(--line); } .hero-stat .n { font-size: 1.35rem; } .hero-stat .l { font-size: .64rem; line-height: 1.35; } .product-feature-copy { padding: 21px; } .sec-title { font-size: clamp(1.9rem, 10vw, 2.55rem); } .mobile-panel { width: min(88%, 340px) !important; } } @media (prefers-reduced-motion: reduce) { .aurora, #grid-canvas { display: none !important; } .reveal, .reveal.left, .reveal.right, .reveal.zoom { opacity: 1 !important; transform: none !important; } } /* 35 · FINAL RESPONSIVE & ACCESSIBILITY POLISH */ .addin-kicker { flex-wrap: wrap; } .hero h1 .l { overflow: visible; padding-block: .035em; } .nav-links a, .filter-btn { min-height: 44px; } .filter-btn { display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 620px) { .sel-btn, .theme-btn { min-width: 44px; min-height: 44px; } .topbar-left { min-width: 0; flex: 1 1 auto; overflow: hidden; } .topbar-left .tb-item:first-child { min-width: 0; max-width: 100%; overflow: hidden; } .topbar-left .tb-item:first-child span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* 36 · CONVERSION CHECKOUT · ORDER + PAYMENT + WHATSAPP RECEIPT */ body.checkout-open { overflow: hidden; } .checkout-overlay { display: none; position: fixed; inset: 0; z-index: 9999; padding: 24px; align-items: center; justify-content: center; background: rgba(3, 9, 23, .78); backdrop-filter: blur(12px); } .checkout-overlay.open { display: flex; animation: fadeIn .2s ease-out both; } .checkout-shell { position: relative; width: min(100%, 1020px); max-height: min(92dvh, 900px); overflow: hidden; overflow: clip; border: 1px solid var(--line-2); border-radius: 22px; background: var(--bg-elev); color: var(--ink); box-shadow: 0 32px 90px rgba(0, 0, 0, .42); outline: none; } .checkout-shell:focus-visible { box-shadow: 0 0 0 4px rgba(40, 184, 220, .24), 0 32px 90px rgba(0, 0, 0, .42); } .checkout-close { position: absolute; z-index: 5; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); color: var(--ink-2); font-size: 1.05rem; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .checkout-close:hover { background: var(--glass-2); border-color: var(--line-2); color: var(--ink); } .checkout-head { padding: 26px 78px 21px 30px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 88% 12%, rgba(40, 184, 220, .09), transparent 21rem), color-mix(in srgb, var(--bg-2) 80%, var(--bg-elev)); } .checkout-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--green-lt); font: 700 .7rem/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; } .checkout-head h2 { margin: 0; font: 800 clamp(1.45rem, 3vw, 2rem)/1.08 var(--font-title); letter-spacing: -.035em; } .checkout-head > p { margin: 7px 0 0; color: var(--ink-2); font-size: .9rem; } .checkout-steps { display: flex; align-items: center; gap: 7px; margin-top: 18px; } .checkout-steps > span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .72rem; font-weight: 700; } .checkout-steps > span:not(:last-child)::after { content: ''; width: clamp(18px, 4vw, 42px); height: 1px; margin-left: 1px; background: var(--line-2); } .checkout-steps b { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; font-size: .66rem; } .checkout-steps .active { color: var(--cyan-lt); } .checkout-steps .active b { border-color: var(--cyan); background: rgba(40, 184, 220, .12); } .checkout-body { max-height: calc(min(92dvh, 900px) - 151px); overflow: auto; overscroll-behavior: contain; padding: 24px 30px 30px; scrollbar-width: thin; } .checkout-catalog { min-width: 0; } .catalog-heading { margin-bottom: 13px; } .multi-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(40, 184, 220, .22); border-radius: 99px; background: var(--cyan-soft); color: var(--cyan-lt); font-size: .68rem; font-weight: 750; white-space: nowrap; } .checkout-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .catalog-option { position: relative; min-width: 0; min-height: 92px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 20px; align-items: center; gap: 11px; padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--card) 92%, transparent); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .catalog-option:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cyan) 44%, var(--line)); } .catalog-option:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(40, 184, 220, .13); } .catalog-option.selected { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan-soft) 68%, var(--card)); box-shadow: inset 0 0 0 1px rgba(40, 184, 220, .1); } .catalog-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .catalog-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--glass-2); color: var(--cyan-lt); font-size: 1rem; } .catalog-option.selected .catalog-icon { background: rgba(40, 184, 220, .16); } .catalog-option-copy { min-width: 0; display: flex; flex-direction: column; } .catalog-option-copy strong { color: var(--ink); font: 750 .82rem/1.25 var(--font-title); } .catalog-option-copy small { margin-top: 4px; color: var(--muted); font-size: .65rem; line-height: 1.35; } .catalog-price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; } .catalog-price s { color: var(--muted); font-size: .61rem; } .catalog-price b { margin-top: 2px; color: var(--gold-lt); font: 800 1rem/1 var(--font-title); } .catalog-price em { margin-top: 5px; color: var(--green-lt); font-size: .58rem; font-style: normal; font-weight: 750; } .catalog-check { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: transparent; font-size: .58rem; transition: .18s ease; } .catalog-option.selected .catalog-check { border-color: var(--green); background: var(--green); color: #061912; } .catalog-pack { grid-column: 1 / -1; min-height: 82px; background: linear-gradient(105deg, color-mix(in srgb, var(--gold-soft) 72%, var(--card)), var(--card)); border-color: color-mix(in srgb, var(--gold) 26%, var(--line)); } .catalog-pack .catalog-icon { background: var(--gold-soft); color: var(--gold-lt); } .catalog-pack.selected { border-color: var(--gold); background: linear-gradient(105deg, color-mix(in srgb, var(--gold-soft) 88%, var(--card)), color-mix(in srgb, var(--cyan-soft) 35%, var(--card))); } .checkout-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; margin-top: 11px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--cyan-soft) 70%, var(--card)); } .checkout-order-meta { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: .72rem; font-weight: 700; } .checkout-order-meta > span b { display: inline-grid; min-width: 22px; min-height: 22px; place-items: center; margin-left: 4px; border-radius: 7px; background: var(--cyan-soft); color: var(--cyan-lt); } .checkout-order-id { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: .64rem; } .checkout-order-id b { color: var(--ink-2); font-family: var(--font-mono); } .checkout-savings { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-size: .65rem; } .checkout-savings > span { color: var(--muted); } .checkout-savings s { margin-left: 3px; } .checkout-savings strong { color: var(--green-lt); } .checkout-pricing { min-width: 132px; display: flex; flex-direction: column; align-items: flex-end; padding-left: 18px; border-left: 1px solid var(--line); } .checkout-pricing small { margin-bottom: 4px; color: var(--muted); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .checkout-pricing strong { color: var(--gold-lt); font: 800 1.72rem/1 var(--font-title); letter-spacing: -.035em; } .checkout-pack-note { display: flex; align-items: flex-start; gap: 7px; margin: 9px 2px 0; color: var(--muted); font-size: .67rem; line-height: 1.4; } .checkout-pack-note i { margin-top: 2px; color: var(--cyan-lt); } .checkout-payment, .checkout-confirm { margin-top: 22px; } .checkout-section-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .checkout-section-title > div { display: flex; align-items: center; gap: 11px; } .checkout-section-number { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: var(--gold-soft); color: var(--gold-lt); font: 800 .74rem/1 var(--font-mono); } .checkout-section-title h3 { margin: 0; color: var(--ink); font: 750 1.02rem/1.2 var(--font-title); } .checkout-section-title p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; } .owner-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-2); background: var(--glass); font-size: .71rem; font-weight: 700; white-space: nowrap; } .owner-chip i { color: var(--green-lt); } .payment-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .payment-method { position: relative; min-height: 68px; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .payment-method:hover { border-color: color-mix(in srgb, var(--cyan) 42%, var(--line)); } .payment-method.active { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan-soft) 66%, var(--card)); box-shadow: inset 0 0 0 1px rgba(40, 184, 220, .14); } .payment-method > img { width: 40px; height: 31px; flex: 0 0 auto; object-fit: contain; border-radius: 7px; background: #fff; } .payment-method > span:not(.method-mark) { min-width: 0; display: flex; flex-direction: column; } .payment-method b { font: 750 .8rem/1.2 var(--font-title); } .payment-method small { margin-top: 3px; color: var(--muted); font-size: .65rem; } .payment-method > i { margin-left: auto; color: var(--line-2); } .payment-method.active > i { color: var(--green-lt); } .method-mark { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #fff; font: 900 1.15rem/1 var(--font-title); } .yape-mark { background: linear-gradient(135deg, #6b087f, #8b17a3); } .payment-panels { margin-top: 11px; } .payment-panel { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; min-height: 205px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--bg-2) 74%, var(--card)); animation: checkoutPanelIn .2s ease-out both; } .payment-panel.yape-panel { grid-template-columns: 252px minmax(0, 1fr); gap: 24px; padding: 20px; } .payment-panel[hidden] { display: none !important; } @keyframes checkoutPanelIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .payment-qr { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 9px; } .qr-caption { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: .75rem; font-weight: 800; } .qr-caption i { color: #8b17a3; } .payment-qr img { width: 220px; height: 235px; object-fit: cover; border: 8px solid #fff; border-radius: 17px; box-shadow: 0 16px 34px rgba(36, 10, 48, .2), 0 0 0 1px rgba(139, 23, 163, .14); } .payment-qr a { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; color: var(--cyan-lt); font-size: .7rem; font-weight: 750; transition: background-color .18s ease, color .18s ease; } .payment-qr a:hover { background: var(--cyan-soft); } .bank-visual { height: 120px; display: grid; place-items: center; border-radius: 14px; overflow: hidden; background: #fff; } .bank-visual img { width: 82%; height: 70%; object-fit: contain; } .bcp-visual { background: #064590; } .ibk-visual { background: #00bc54; } .payment-details { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .payment-current-amount { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid rgba(28, 192, 136, .24); border-radius: 12px; background: var(--green-soft); } .payment-current-amount span { color: var(--ink-2); font-size: .72rem; font-weight: 700; } .payment-current-amount strong { color: var(--green-lt); font: 800 1.42rem/1 var(--font-title); letter-spacing: -.025em; white-space: nowrap; } .payment-label { display: block; margin: 10px 0 5px; color: var(--muted); font: 700 .65rem/1.1 var(--font-mono); letter-spacing: .045em; text-transform: uppercase; } .payment-label:first-child { margin-top: 0; } .payment-details > strong { color: var(--ink); font-size: .91rem; } .payment-owner { display: inline-flex; align-items: center; gap: 7px; } .payment-owner i { color: var(--green-lt); font-size: .75rem; } .copy-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .copy-row code { min-height: 44px; display: flex; align-items: center; padding: 9px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: 750 clamp(.74rem, 2vw, .88rem)/1.2 var(--font-mono); letter-spacing: .025em; white-space: nowrap; } .copy-value { min-width: 92px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--glass-2); color: var(--cyan-lt); font-size: .73rem; font-weight: 750; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .copy-value:hover, .copy-value.copied { border-color: var(--cyan); background: var(--cyan-soft); } .payment-help { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; } .payment-help i { margin-top: 2px; color: var(--cyan); } .payment-guide { width: 100%; display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; } .payment-guide li { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: .72rem; line-height: 1.35; } .payment-guide b { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; background: rgba(139, 23, 163, .12); color: #a33db7; font: 800 .62rem/1 var(--font-mono); } .checkout-confirm { padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); } .buyer-field { display: block; margin-top: 2px; } .buyer-field > span { display: block; margin-bottom: 7px; color: var(--ink-2); font-size: .74rem; font-weight: 700; } .buyer-field input { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; } .buyer-field input:focus { border-color: var(--cyan); outline: 3px solid rgba(40, 184, 220, .14); } .receipt-notice { display: flex; align-items: flex-start; gap: 11px; margin: 13px 0; padding: 12px; border-radius: 11px; background: rgba(37, 211, 102, .09); color: var(--ink-2); } .receipt-notice > i { margin-top: 2px; color: #25d366; font-size: 1.2rem; } .receipt-notice p { margin: 0; } .receipt-notice b, .receipt-notice span { display: block; } .receipt-notice b { color: var(--ink); font-size: .78rem; } .receipt-notice span { margin-top: 3px; color: var(--muted); font-size: .7rem; line-height: 1.45; } .checkout-send { width: 100%; justify-content: center; background: #168c49; box-shadow: 0 10px 24px rgba(22, 140, 73, .2); } .checkout-send:hover { background: #12763e; box-shadow: 0 14px 28px rgba(22, 140, 73, .25); } .checkout-send:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; } .checkout-privacy { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 10px 0 0; color: var(--muted); font-size: .67rem; text-align: center; } .checkout-privacy i { color: var(--green-lt); } .copy-toast { position: fixed; z-index: 10002; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 99px; background: #102b22; color: #d8fff0; box-shadow: var(--sh-md); font-size: .76rem; font-weight: 750; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .copy-toast.show { opacity: 1; transform: translate(-50%, 0); } html.light .checkout-shell { background: #fff; } html.light .checkout-pricing strong { color: #87540f; } html.light .checkout-savings strong { color: #056346; } html.light .copy-value { color: #087b9a; } html.light .checkout-kicker { color: #056346; } html.light .catalog-price b { color: #87540f; } html.light .catalog-price em { color: #056346; } html.light .payment-current-amount strong { color: #056346; } html.light .payment-guide b { color: #7b198e; } @media (max-width: 700px) { .checkout-overlay { padding: 0; align-items: flex-end; } .checkout-shell { width: 100%; max-height: 96dvh; border-radius: 20px 20px 0 0; } .checkout-head { padding: 21px 64px 17px 19px; } .checkout-close { top: 14px; right: 14px; } .checkout-body { max-height: calc(96dvh - 139px); padding: 17px 16px calc(24px + env(safe-area-inset-bottom)); } .multi-chip { display: none; } .checkout-catalog-grid { grid-template-columns: 1fr; } .catalog-pack { grid-column: auto; } .checkout-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; } .checkout-order-meta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .checkout-savings { align-items: flex-start; } .checkout-pricing { min-width: 120px; } .owner-chip { display: none; } .payment-methods { gap: 7px; } .payment-method { min-height: 86px; flex-direction: column; align-items: flex-start; gap: 7px; padding: 9px; } .payment-method > img, .method-mark { width: 34px; height: 34px; } .payment-method > i { position: absolute; top: 9px; right: 9px; } .payment-method small { display: none; } .payment-method b { font-size: .7rem; } .payment-panel { grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 13px; } .payment-panel.yape-panel { grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 14px; } .payment-qr img { width: 182px; height: 194px; border-width: 7px; } .payment-current-amount { padding: 10px; } .payment-current-amount span { font-size: .66rem; } .payment-current-amount strong { font-size: 1.18rem; } .bank-visual { height: 100px; } .copy-row code { font-size: .7rem; } .copy-value { min-width: 44px; width: 44px; padding: 0; } .copy-value span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } @media (max-width: 430px) { .checkout-steps > span > span { display: none; } .checkout-steps > span:not(:last-child)::after { width: 28px; } .catalog-option { grid-template-columns: 38px minmax(0, 1fr) auto 18px; gap: 9px; padding: 10px; } .catalog-icon { width: 38px; height: 38px; } .catalog-option-copy small { display: none; } .checkout-summary { gap: 9px; padding: 12px; } .checkout-pricing { min-width: 108px; padding-left: 10px; } .checkout-pricing strong { font-size: 1.5rem; } .payment-panel, .payment-panel.yape-panel { grid-template-columns: 1fr; } .payment-panel.yape-panel { gap: 18px; padding: 16px 13px; } .payment-qr { margin-bottom: 4px; } .payment-qr img { width: min(230px, 78vw); height: auto; aspect-ratio: 1215 / 1295; } .payment-current-amount { padding: 12px; } .payment-current-amount span { font-size: .7rem; } .payment-current-amount strong { font-size: 1.35rem; } .bank-visual { height: 88px; } } @media (prefers-reduced-motion: reduce) { .checkout-overlay.open, .payment-panel, .copy-toast { animation: none !important; transition: none !important; } } /* ============================================================================= 37 · PRODUCT DISCOVERY & CONVERSION SYSTEM · 2026-08-21 Clear global navigation, fast product finder and calmer premium interactions. ============================================================================= */ body { font-size: 16px; } main { min-height: 60vh; } p, li { text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; } /* Desktop product menu */ .nav-products { position: relative; } .nav-products > summary { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 9px; color: var(--ink-2); font-family: var(--font-title); font-size: .79rem; font-weight: 650; letter-spacing: .01em; list-style: none; cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); } .nav-products > summary::-webkit-details-marker { display: none; } .nav-products > summary:hover, .nav-products[open] > summary { color: var(--ink); background: color-mix(in srgb, var(--bg-elev) 74%, transparent); } .nav-products[data-active="true"] > summary { color: var(--gold-lt); background: var(--gold-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent); } .nav-products-caret { margin-left: 1px; font-size: .56rem; transition: transform .2s var(--ease); } .nav-products[open] .nav-products-caret { transform: rotate(180deg); } .nav-products-menu { position: absolute; top: calc(100% + 14px); left: 50%; width: min(700px, calc(100vw - 48px)); padding: 16px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--glass-strong); box-shadow: 0 28px 74px rgba(0, 0, 0, .34); backdrop-filter: blur(24px) saturate(135%); transform: translate(-50%, -7px); transform-origin: top center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s var(--ease), transform .2s var(--ease), visibility .18s; } .nav-products[open] .nav-products-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .nav-products-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 3px 13px; border-bottom: 1px solid var(--line); } .nav-products-head > div { display: flex; flex-direction: column; gap: 3px; } .nav-products-head small { color: var(--cyan-lt); font: 750 .62rem/1.1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } .nav-products-head strong { color: var(--ink); font-size: .88rem; font-weight: 700; } .nav-products-head > span { display: inline-flex; align-items: center; gap: 6px; color: var(--green-lt); font-size: .68rem; font-weight: 700; white-space: nowrap; } .nav-products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-block: 12px; } .nav-product-link { min-width: 0; min-height: 72px; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px !important; border: 1px solid transparent; border-radius: 12px !important; background: transparent; } .nav-product-link::after { display: none !important; } .nav-product-link:hover { border-color: var(--line); background: var(--glass-2) !important; } .nav-product-link[aria-current="page"] { border-color: color-mix(in srgb, var(--cyan) 28%, var(--line)); background: var(--cyan-soft) !important; } .nav-product-link.featured { background: color-mix(in srgb, var(--gold-soft) 58%, transparent); } .nav-product-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; font-size: .95rem; } .nav-product-icon.revit { color: var(--cyan-lt); background: var(--cyan-soft); } .nav-product-icon.cad { color: #78a9ff; background: rgba(75, 126, 226, .12); } .nav-product-icon.pack { color: var(--gold-lt); background: var(--gold-soft); } .nav-product-icon.templates { color: var(--green-lt); background: var(--green-soft); } .nav-product-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .nav-product-copy strong { overflow: hidden; color: var(--ink); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; } .nav-product-copy small { overflow: hidden; color: var(--muted); font: 500 .62rem/1.3 var(--font-body); text-overflow: ellipsis; white-space: nowrap; } .nav-product-price { color: var(--gold-lt); font: 800 .8rem/1 var(--font-title); white-space: nowrap; } .nav-product-all { width: 100%; min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--cyan) 26%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--cyan-soft) 66%, transparent); color: var(--ink); text-align: left; } .nav-product-all > span { color: var(--ink-2); font-size: .7rem; } .nav-product-all > span i { margin-right: 5px; color: var(--cyan-lt); } .nav-product-all > strong { color: var(--cyan-lt); font-size: .73rem; } .nav-product-all:hover { border-color: var(--cyan); background: var(--cyan-soft); } /* Mobile navigation hierarchy */ .mobile-panel { overflow-y: auto; overscroll-behavior: contain; } .mobile-nav-label { margin: 11px 0 1px; color: var(--muted); font: 750 .62rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } .mobile-nav-link { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-family: var(--font-title); font-size: 1rem; font-weight: 650; } .mobile-nav-link[aria-current="page"] { color: var(--gold-lt); } .mobile-nav-product { min-height: 52px; padding-inline: 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--glass); } .mobile-nav-product > i { width: 28px; color: var(--cyan-lt); text-align: center; } .mobile-nav-product > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; } .mobile-nav-product > small { color: var(--gold-lt); font-size: .68rem; font-weight: 750; white-space: nowrap; } .mobile-nav-product > .mobile-product-icon { width: 36px; height: 36px; flex: 0 0 36px; overflow: visible; white-space: normal; } .mobile-nav-product > .mobile-product-name { overflow: visible; line-height: 1.25; text-overflow: clip; white-space: normal; } .mobile-catalog-cta { width: 100%; margin-top: 16px; justify-content: center; } .mobile-advisor-cta { width: 100%; margin-top: 2px; justify-content: center; } .mobile-theme-toggle { flex: 0 0 auto; } /* Home: decision-first product finder */ .quick-shop { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 66%, transparent); } .quick-shop-head { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr); align-items: end; gap: clamp(28px, 5vw, 72px); } .quick-shop-head .sec-title { margin-inline: 0; text-align: left; font-size: clamp(2rem, 3.8vw, 3.25rem); } .quick-shop-head .sec-sub { margin: 0 0 4px; color: var(--ink-2); font-size: .98rem; } .quick-shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; } .quick-product { min-width: 0; min-height: 310px; display: flex; flex-direction: column; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--sh-sm); transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); } .quick-product:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cyan) 38%, var(--line)); box-shadow: var(--sh-md); } .quick-product-featured { border-color: color-mix(in srgb, var(--gold) 38%, var(--line)); background: linear-gradient(155deg, color-mix(in srgb, var(--gold-soft) 60%, var(--card)), var(--card) 58%); } .quick-product-custom { background: linear-gradient(155deg, color-mix(in srgb, var(--cyan-soft) 58%, var(--card)), var(--card) 62%); } .quick-product-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .quick-product-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; font-size: 1.05rem; } .quick-product-icon.pack { color: var(--gold-lt); background: var(--gold-soft); } .quick-product-icon.revit { color: var(--cyan-lt); background: var(--cyan-soft); } .quick-product-icon.cad { color: #78a9ff; background: rgba(75, 126, 226, .12); } .quick-product-icon.custom { color: var(--green-lt); background: var(--green-soft); } .quick-product-badge, .quick-product-meta { color: var(--muted); font: 750 .61rem/1.2 var(--font-mono); letter-spacing: .035em; } .quick-product-badge { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 99px; background: var(--gold-soft); color: var(--gold-lt); } .quick-product h3 { margin: 0 0 8px; color: var(--ink); font: 750 1.16rem/1.18 var(--font-title); letter-spacing: -.02em; } .quick-product p { margin: 0; color: var(--ink-2); font-size: .83rem; line-height: 1.6; } .quick-product-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); } .quick-product-bottom > div:first-child { display: flex; flex-direction: column; gap: 3px; } .quick-product-bottom small { color: var(--muted); font-size: .64rem; font-weight: 700; text-transform: uppercase; } .quick-product-bottom strong { color: var(--gold-lt); font: 800 1.35rem/1 var(--font-title); letter-spacing: -.025em; } .quick-actions { display: flex; align-items: center; gap: 6px; } .quick-actions > a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); background: var(--glass); } .quick-actions > a:hover { color: var(--cyan-lt); border-color: var(--cyan); } .quick-buy { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 10px; background: var(--cta-bg); color: var(--cta-ink); font-size: .72rem; font-weight: 800; white-space: nowrap; } .quick-buy:hover { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--cta-bg) 22%, transparent); } .quick-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -5px; } .quick-tags span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-2); background: var(--glass); font-size: .64rem; font-weight: 650; } .quick-product-custom > .btn { width: 100%; margin-top: auto; } .quick-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; color: var(--muted); } .quick-trust > span { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 650; } .quick-trust > span > i { color: var(--green-lt); } /* Checkout: honest hierarchy, larger QR and readable controls */ .checkout-shell { width: min(100%, 1220px); } .checkout-kicker { font-size: .75rem; } .catalog-option-copy strong { font-size: .86rem; } .catalog-option-copy small, .catalog-price em, .checkout-order-id, .checkout-pack-note { font-size: .7rem; } .checkout-section-title p, .payment-help, .payment-guide li, .buyer-field > span { font-size: .78rem; } .payment-method small, .payment-label, .checkout-privacy { font-size: .7rem; } .payment-qr a { min-height: 44px; } .bank-current-amount { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; } .bank-current-amount .copy-value { min-width: 44px; width: 44px; padding: 0; } .bank-current-amount .copy-value span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .checkout-send { background: #0b6b3d; color: #fff; } .checkout-send:hover { background: #07542f; color: #fff; } .checkout-send:focus-visible { outline-color: #8af0bd; } @media (min-width: 701px) { .payment-panel.yape-panel { grid-template-columns: 300px minmax(0, 1fr); } .payment-qr img { width: 280px; height: auto; aspect-ratio: 600 / 640; } } @media (min-width: 1200px) { .checkout-body { display: grid; grid-template-columns: minmax(560px, 1.08fr) minmax(500px, .92fr); align-items: start; gap: 24px; } .checkout-catalog { grid-row: 1 / span 2; padding-right: 24px; border-right: 1px solid var(--line); } .checkout-payment, .checkout-confirm { margin-top: 0; } .checkout-confirm { grid-column: 2; } .payment-panel.yape-panel { grid-template-columns: 280px minmax(0, 1fr); gap: 20px; } .payment-qr img { width: 270px; height: auto; aspect-ratio: 600 / 640; } } @media (max-width: 1100px) { .quick-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quick-product { min-height: 275px; } } @media (max-width: 1015px) { .nav-products { display: none; } } @media (max-width: 760px) { .quick-shop-head { grid-template-columns: 1fr; align-items: start; gap: 18px; } .quick-shop-head .sec-sub { margin: 0; } .quick-shop-grid { grid-template-columns: 1fr; margin-top: 28px; } .quick-product { min-height: 0; } .quick-trust { justify-content: flex-start; gap: 10px 18px; } } @media (max-width: 430px) { .catalog-option-copy small { display: block; font-size: .67rem; } .catalog-option { grid-template-columns: 38px minmax(0, 1fr) auto 18px; min-height: 102px; } .quick-product { padding: 19px; } .quick-product-bottom { align-items: center; } .quick-buy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .quick-buy { width: 44px; padding: 0; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .nav-products-menu, .quick-product, .quick-buy, .nav-products-caret { transition: none !important; } } /* 38 · ACCESSIBILITY & 320PX SAFETY */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } body { min-width: 0; } main, section, header, footer, .wrap, .hero-grid, .page-hero-grid, .product-feature-grid, .quick-shop-grid, .hub-grid, .stack-grid, .svc-grid, .acad-grid, .price-grid, .test-grid, .auth-grid, .comm-wrap, .comm-left, .comm-right { min-width: 0; } html.light { --muted-2: #4c5c70; --cyan: #066b87; --cyan-lt: #055b73; } html.light .course-rating { color: #775000; } .comm-av { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .38); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); } .brand-txt .b-sub { font-size: .62rem; letter-spacing: 1.7px; } .eyebrow { font-size: .75rem; letter-spacing: .1em; } .bim-selection small { font-size: .62rem; } .bim-selection span { font-size: .66rem; } .bim-hint { max-width: calc(100% - 20px); font-size: .62rem; line-height: 1.35; white-space: normal; text-align: center; } .nav-product-copy small { font-size: .68rem; } .btn-sm { min-height: 44px; } @media (max-width: 620px) { .wrap { width: 100%; padding-inline: 16px; } .btn:not(.nav-catalog-trigger):not(.quick-buy) { height: auto; white-space: normal; text-align: center; line-height: 1.25; } .ph-ctas .btn, .cs-btns .btn { max-width: 100%; } .foot-social a { width: 44px; height: 44px; } .foot-col a, .fb-links a, .breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; } .topbar-left .tb-item:first-child span { max-width: min(40vw, 132px); } } @media (max-width: 360px) { .wrap { padding-inline: 12px; } .brand-txt .b-sub { display: none; } .quick-product-bottom { gap: 6px; } .checkout-head { padding-left: 15px; } .checkout-body { padding-inline: 12px; } .catalog-option { grid-template-columns: 36px minmax(0, 1fr) auto; } .catalog-check { display: none; } .catalog-price b { font-size: .9rem; } .catalog-price em { max-width: 74px; white-space: normal; text-align: right; } } /* 39 · TRUE THREE-STEP CHECKOUT */ .checkout-shell { width: min(100%, 980px); } .checkout-body { max-height: calc(min(92dvh, 900px) - 224px); } .checkout-stage[hidden] { display: none !important; } .checkout-stage.active { animation: checkoutStageIn .22s var(--ease) both; } @keyframes checkoutStageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .checkout-payment, .checkout-confirm { margin-top: 0; } .checkout-confirm { max-width: 720px; margin-inline: auto; } .checkout-steps > span.complete { color: var(--green-lt); } .checkout-steps > span.complete b { border-color: var(--green); background: var(--green-soft); color: var(--green-lt); } .checkout-steps > span.complete b::before { content: "✓"; } .checkout-steps > span.complete b { font-size: 0; } .checkout-steps > span.complete b::before { font-size: .68rem; } .checkout-nav { min-height: 73px; display: grid; grid-template-columns: minmax(110px, 1fr) auto minmax(180px, 1fr); align-items: center; gap: 14px; padding: 12px 30px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 88%, var(--bg-elev)); } .checkout-back, .checkout-next { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 11px; font-size: .78rem; font-weight: 800; transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease); } .checkout-back { justify-self: start; border: 1px solid var(--line); background: var(--glass); color: var(--ink-2); } .checkout-next { justify-self: end; border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); background: var(--cyan); color: #fff; box-shadow: 0 10px 22px rgba(6, 107, 135, .2); } .checkout-back:hover:not(:disabled), .checkout-next:hover:not(:disabled) { transform: translateY(-1px); } .checkout-next:hover:not(:disabled) { background: var(--cyan-lt); } .checkout-back:disabled, .checkout-next:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; } .checkout-nav-total { display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; } .checkout-nav-total span { color: var(--muted); font-size: .62rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; } .checkout-nav-total strong { color: var(--gold-lt); font: 800 1.32rem/1 var(--font-title); } @media (min-width: 1200px) { .checkout-body { display: block; } .checkout-catalog { padding-right: 0; border-right: 0; } } @media (max-width: 700px) { .checkout-body { max-height: calc(96dvh - 209px); } .checkout-nav { min-height: 70px; grid-template-columns: 48px minmax(88px, 1fr) minmax(138px, 1.25fr); gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); } .checkout-back { width: 48px; padding: 0; } .checkout-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .checkout-next { width: 100%; padding-inline: 11px; } .checkout-nav-total strong { font-size: 1.12rem; } } @media (max-width: 390px) { .checkout-nav { grid-template-columns: 44px minmax(76px, .8fr) minmax(125px, 1.2fr); } .checkout-back { width: 44px; min-height: 44px; } .checkout-next { min-height: 44px; font-size: .7rem; } .checkout-nav-total span { font-size: .55rem; } } @media (prefers-reduced-motion: reduce) { .checkout-stage.active { animation: none !important; } } /* ============================================================================= 40 · IMGENYA ENGINEERING AUTHORITY SYSTEM · 2026-08-23 Professional civil-engineering identity, unified technical iconography, restrained motion and high-contrast dark/light surfaces. ============================================================================= */ :root { --bg: #07111f; --bg-2: #091727; --bg-3: #0d1c30; --bg-elev: #11243a; --ink: #f5f8fc; --ink-2: #c2cede; --muted: #93a4b9; --muted-2: #71839a; --line: rgba(185, 205, 226, .12); --line-2: rgba(185, 205, 226, .2); --indigo: #315f8e; --indigo-lt: #6d9bc7; --indigo-deep: #102d4a; --violet: #86a8ca; --gold: #d8a75f; --gold-lt: #edc783; --gold-deep: #b8792d; --cyan: #1699b8; --cyan-lt: #50c9df; --green: #16996c; --green-lt: #4bd0a0; --gold-soft: rgba(216, 167, 95, .1); --cyan-soft: rgba(22, 153, 184, .1); --green-soft: rgba(22, 153, 108, .1); --indigo-soft: rgba(49, 95, 142, .12); --glass: rgba(10, 25, 43, .68); --glass-2: rgba(14, 32, 53, .82); --glass-strong: rgba(7, 18, 32, .93); --glass-brd: rgba(185, 205, 226, .12); --glass-brd-2: rgba(185, 205, 226, .2); --card: rgba(11, 26, 45, .9); --sh-sm: 0 1px 2px rgba(0, 0, 0, .24); --sh-md: 0 10px 26px rgba(0, 0, 0, .24); --sh-lg: 0 24px 60px rgba(0, 0, 0, .32); --grad-gold: linear-gradient(135deg, #edc783 0%, #d8a75f 55%, #b8792d 100%); --grad-cyan: linear-gradient(135deg, #62d4e7 0%, #1699b8 58%, #0c6d88 100%); --grad-indigo: linear-gradient(135deg, #6d9bc7 0%, #315f8e 60%, #102d4a 100%); --r-sm: 8px; --r: 11px; --r-lg: 16px; --r-xl: 20px; --font-title: 'Manrope', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --ease: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.16, 1, .3, 1); } html.light { --bg: #f4f7fa; --bg-2: #edf2f7; --bg-3: #e4ebf2; --bg-elev: #ffffff; --ink: #101827; --ink-2: #3f5066; --muted: #596a80; --muted-2: #75859a; --line: rgba(25, 49, 77, .13); --line-2: rgba(25, 49, 77, .2); --gold: #a76518; --gold-lt: #8d520d; --gold-deep: #794306; --cyan: #08738e; --cyan-lt: #075d75; --green: #087b55; --green-lt: #086546; --indigo: #245982; --indigo-lt: #315f87; --violet: #3f668d; --gold-soft: rgba(167, 101, 24, .09); --cyan-soft: rgba(8, 115, 142, .08); --green-soft: rgba(8, 123, 85, .08); --indigo-soft: rgba(36, 89, 130, .08); --glass: rgba(255, 255, 255, .76); --glass-2: rgba(255, 255, 255, .91); --glass-strong: rgba(255, 255, 255, .97); --glass-brd: rgba(25, 49, 77, .12); --glass-brd-2: rgba(25, 49, 77, .19); --card: #ffffff; --sh-sm: 0 1px 3px rgba(20, 41, 66, .07); --sh-md: 0 10px 28px rgba(20, 41, 66, .09); --sh-lg: 0 24px 58px rgba(20, 41, 66, .12); } body { background: radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 28rem), radial-gradient(circle at 5% 32%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 30rem), var(--bg); font-kerning: normal; } h1, h2, h3, h4, .brand-txt, .btn { font-family: var(--font-title); } h1, h2, h3 { letter-spacing: -.035em; } p, li { color: inherit; } .eng-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; overflow: visible; vertical-align: -.16em; } .brand-icon img, .catalog-icon img, .mobile-product-icon img, .mq-item img { display: block; width: auto; max-width: 76%; max-height: 76%; object-fit: contain; } .eyebrow { min-height: 32px; gap: 8px; padding: 6px 11px; border-color: color-mix(in srgb, currentColor 24%, transparent); border-radius: 9px; font-family: var(--font-title); font-size: .69rem; font-weight: 750; letter-spacing: .075em; line-height: 1.2; text-transform: uppercase; } .eyebrow .eng-icon { width: 16px; height: 16px; } .eyebrow-logo { width: 17px; height: 17px; flex: 0 0 auto; object-fit: contain; } .sec-title { font-size: clamp(2rem, 4.1vw, 3.45rem); line-height: 1.08; letter-spacing: -.05em; } .sec-sub { color: var(--ink-2); line-height: 1.72; } .section { padding-block: clamp(78px, 8vw, 108px); } .section.tight { padding-block: clamp(58px, 6vw, 78px); } /* Original IMGENYA civil-engineering image: atmospheric, not decorative noise. */ .hero-real-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .38; } .hero-real-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.06) brightness(.68); transform: scale(1.015); animation: heroImageSettle 1.1s var(--ease) both; } .hero-real-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 30%, color-mix(in srgb, var(--bg) 52%, transparent) 64%, color-mix(in srgb, var(--bg) 38%, transparent) 100%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 22%, transparent), var(--bg) 100%); } @keyframes heroImageSettle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1.015); } } .hero-code-bg { z-index: 1; opacity: .46; } .hero .wrap, .hero .scroll-hint { z-index: 3; } .hero { min-height: 780px; background: var(--bg); } .hero h1 { max-width: 11ch; font-size: clamp(3.05rem, 5.4vw, 4.8rem); letter-spacing: -.065em; } .hero-desc { color: var(--ink-2); } .hero-trustline .eng-icon { color: var(--green-lt); } .hero-badges .mini-badge { border-color: var(--line-2); background: color-mix(in srgb, var(--glass-strong) 78%, transparent); backdrop-filter: blur(12px); } html.light .hero-real-bg { opacity: .2; } html.light .hero-real-bg img { filter: saturate(.68) contrast(.96) brightness(1.08); } html.light .hero-real-bg::after { background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 90%, transparent) 38%, color-mix(in srgb, var(--bg) 48%, transparent) 100%), linear-gradient(180deg, transparent, var(--bg)); } /* Interactive BIM model is treated as a professional product viewer. */ .bim-console { border-radius: 18px; border-color: rgba(113, 193, 214, .27); background: linear-gradient(155deg, rgba(10, 23, 39, .98), rgba(4, 12, 23, .98)); box-shadow: 0 30px 78px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .08); } .bim-console:hover { transform: translateY(-2px); border-color: rgba(113, 193, 214, .4); box-shadow: 0 34px 86px rgba(0, 0, 0, .4); } .bim-console::before { animation: none; opacity: .45; } .bim-console-head { font-size: .66rem; letter-spacing: .055em; } .bim-console-brand .eng-icon { color: var(--cyan-lt); } .bim-data-tag, .bim-phase-card, .bim-selection, .bim-hint { border-color: rgba(200, 219, 238, .16); background: rgba(6, 17, 30, .86); } .bim-phase-card > span { letter-spacing: .055em; } /* Engineering icon architecture: one grid, one stroke language, real product marks. */ :where(.nav-product-icon, .quick-product-icon, .product-icon, .hc-ic, .catalog-icon, .fi, .ai, .acad-ic, .pc-ic, .svc-ic, .bim-selection-icon) { position: relative; isolation: isolate; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 20%, var(--line)); background: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px), color-mix(in srgb, currentColor 9%, var(--card)); background-size: 8px 8px, 8px 8px, auto; box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 7px 18px rgba(0, 0, 0, .1); } :where(.nav-product-icon, .quick-product-icon, .product-icon, .hc-ic, .catalog-icon, .fi, .ai, .acad-ic, .pc-ic, .svc-ic, .bim-selection-icon) > * { position: relative; z-index: 1; } :where(.nav-product-icon, .quick-product-icon, .product-icon, .hc-ic, .catalog-icon) .eng-icon { width: 52%; height: 52%; } .brand-icon { color: var(--ink); } .brand-icon img { max-width: 72%; max-height: 72%; } /* Product navigation: clearer hierarchy and product-specific identity. */ .nav-products > summary { gap: 7px; border-radius: 10px; font-size: .78rem; } .nav-products > summary > .eng-icon { width: 17px; height: 17px; color: var(--cyan-lt); } .nav-products-menu { width: min(730px, calc(100vw - 42px)); padding: 19px; border-color: var(--line-2); border-radius: 18px; background: color-mix(in srgb, var(--glass-strong) 96%, transparent); box-shadow: 0 30px 80px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .05); } .nav-products-title { min-width: 0; display: flex !important; flex-direction: row !important; align-items: center; gap: 11px; } .nav-products-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; color: var(--cyan-lt); background: var(--cyan-soft); } .nav-products-mark .eng-icon { width: 20px; height: 20px; } .nav-products-head { padding: 0 1px 15px; } .nav-products-head small { font-family: var(--font-title); font-size: .61rem; letter-spacing: .075em; } .nav-products-head strong { font-size: .9rem; letter-spacing: -.012em; } .nav-products-head > span .eng-icon { width: 15px; height: 15px; } .nav-products-grid { gap: 9px; padding-block: 14px; } .nav-product-link { min-height: 78px; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; padding: 11px !important; border-color: var(--line); border-radius: 13px !important; background: color-mix(in srgb, var(--card) 66%, transparent); transition: transform 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease); } .nav-product-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 38%, var(--line)); background: var(--glass-2) !important; box-shadow: var(--sh-sm); } .nav-product-link.featured { border-color: color-mix(in srgb, var(--gold) 25%, var(--line)); background: color-mix(in srgb, var(--gold-soft) 45%, var(--card)); } .nav-product-icon { width: 46px; height: 46px; border-radius: 11px; } .nav-product-copy strong { font-size: .81rem; letter-spacing: -.01em; } .nav-product-copy small { font-size: .65rem; line-height: 1.4; } .nav-product-price { padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); border-radius: 7px; background: var(--gold-soft); font-size: .76rem; } .nav-product-all { min-height: 50px; border-radius: 12px; } .nav-product-all > span { display: inline-flex; align-items: center; gap: 7px; } .nav-product-all .eng-icon { width: 17px; height: 17px; color: var(--cyan-lt); } .nav-products[open] .nav-product-link { animation: navProductIn 280ms var(--ease) both; } .nav-products[open] .nav-product-link:nth-child(2) { animation-delay: 28ms; } .nav-products[open] .nav-product-link:nth-child(3) { animation-delay: 56ms; } .nav-products[open] .nav-product-link:nth-child(4) { animation-delay: 84ms; } @keyframes navProductIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .mobile-product-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; color: var(--cyan-lt); background: var(--glass-2); } .mobile-product-icon img { max-width: 70%; max-height: 70%; } .mobile-product-icon .eng-icon { width: 19px; height: 19px; } /* Product discovery cards: calm, precise and easy to scan. */ .quick-shop { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 78%, transparent), color-mix(in srgb, var(--bg) 88%, transparent)); } .quick-product { position: relative; isolation: isolate; overflow: hidden; min-height: 320px; padding: 22px; border-radius: 16px; background: linear-gradient(155deg, color-mix(in srgb, var(--bg-elev) 76%, var(--card)), var(--card)); box-shadow: var(--sh-sm); } .quick-product::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .18; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(145deg, #000, transparent 58%); } .quick-product:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 34%, var(--line)); box-shadow: var(--sh-md); } .quick-product-featured { border-color: color-mix(in srgb, var(--gold) 36%, var(--line)); background: linear-gradient(155deg, color-mix(in srgb, var(--gold) 9%, var(--bg-elev)), var(--card) 64%); } .quick-product-custom { background: linear-gradient(155deg, color-mix(in srgb, var(--cyan) 8%, var(--bg-elev)), var(--card) 64%); } .quick-product-icon { width: 52px; height: 52px; border-radius: 12px; } .quick-product-badge, .quick-product-meta { font-family: var(--font-title); font-size: .63rem; letter-spacing: .02em; } .quick-product h3 { font-size: 1.13rem; letter-spacing: -.025em; } .quick-product p { color: var(--ink-2); font-size: .84rem; } .quick-product-bottom { border-color: var(--line); } .quick-buy, .btn { transition: transform 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease); } .quick-buy:hover, .btn:hover { transform: translateY(-1px); } .mq-item { gap: 8px; } .mq-item img { width: 22px; height: 22px; max-width: 22px; max-height: 22px; } .mq-code-mark { min-width: 26px; height: 22px; display: inline-grid; place-items: center; padding-inline: 4px; border: 1px solid var(--line-2); border-radius: 6px; font: 600 .58rem var(--font-mono); } .mq-code-mark.py { color: #ffd663; background: rgba(41, 87, 128, .28); } .mq-code-mark.cs { color: #cfb9ff; background: rgba(80, 48, 126, .22); } /* Global card refinement: less template-like, more engineering authority. */ :where(.hub-card, .addin-feat, .auth-card, .acad-card, .tier, .course-card, .catalog-option, .product-feature-card, .real-shot) { border-color: var(--line); background: linear-gradient(155deg, color-mix(in srgb, var(--bg-elev) 68%, var(--card)), var(--card)); box-shadow: var(--sh-sm); } :where(.hub-card, .addin-feat, .auth-card, .acad-card, .tier, .course-card, .catalog-option, .product-feature-card, .real-shot):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 30%, var(--line)); box-shadow: var(--sh-md); } .hub-card { min-height: 278px; padding: 28px; border-radius: 16px; } .hub-card::after { top: 0; bottom: auto; height: 2px; transform: none; opacity: .42; transition: opacity 180ms var(--ease); } .hub-card:hover::after { opacity: 1; } .hub-card .hc-ic { width: 54px; height: 54px; margin-bottom: 0; border-radius: 12px; transition: border-color 180ms var(--ease), background-color 180ms var(--ease); } .hub-card:hover .hc-ic { transform: none; background: color-mix(in srgb, var(--hc, var(--cyan)) 10%, var(--card)); color: var(--hc, var(--cyan)); } .hub-card .hc-ic .eng-icon { width: 28px; height: 28px; } .hub-card .hc-ic.brand-icon img { max-width: 66%; max-height: 66%; } .hub-card h3 { margin-top: 22px; font-size: 1.2rem; } .hub-card p { color: var(--ink-2); } .hub-card .hc-go { margin-top: auto; font-family: var(--font-title); font-size: .73rem; letter-spacing: .035em; } .hub-card .hc-badge { font-family: var(--font-title); font-size: .58rem; letter-spacing: .045em; } .product-feature-card { border-radius: 18px; } .product-feature-card:hover { transform: translateY(-2px); } .product-shot img, .page-hero-visual img { filter: saturate(.92) contrast(1.02); transition: transform 360ms var(--ease), filter 240ms var(--ease); } .product-feature-card:hover .product-shot img, .page-hero-visual:hover img { transform: scale(1.018); filter: saturate(1) contrast(1.03); } .product-feature-copy { padding: 25px; } .product-logo small, .s-cat, .fr-tag { font-family: var(--font-title); letter-spacing: .055em; } .product-icon { width: 48px; height: 48px; border-radius: 11px; } /* Premium page heroes retain real product screenshots with a technical frame. */ .page-hero { background: linear-gradient(120deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg-2) 86%, transparent)), linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: auto, 54px 54px, 54px 54px; } .page-hero::before { opacity: .62; } .page-hero h1 { letter-spacing: -.055em; } .page-hero .lead { color: var(--ink-2); } .page-hero-visual { border-radius: 18px; border-color: var(--line-2); background: var(--bg-elev); box-shadow: var(--sh-lg); } .page-hero-visual::after { opacity: .56; } .page-hero-visual figcaption { font-family: var(--font-title); letter-spacing: .025em; } /* Checkout: product logos, readable pricing and a larger Yape QR. */ .checkout-shell { border-radius: 20px; border-color: var(--line-2); background: var(--bg-2); box-shadow: 0 36px 100px rgba(0, 0, 0, .46); } .checkout-head { background: linear-gradient(130deg, color-mix(in srgb, var(--bg-elev) 88%, var(--bg-2)), var(--bg-2)); } .checkout-kicker, .checkout-section-title h3, .catalog-option-copy strong, .payment-method b { font-family: var(--font-title); } .checkout-kicker { letter-spacing: .06em; } .catalog-option { border-radius: 13px; transition: transform 160ms var(--ease), border-color 160ms var(--ease), background-color 160ms var(--ease); } .catalog-option:hover { transform: translateY(-1px); } .catalog-icon { width: 46px; height: 46px; border-radius: 11px; } .catalog-icon .eng-icon { width: 24px; height: 24px; } .catalog-icon img { max-width: 70%; max-height: 70%; } .payment-method { border-radius: 13px; } .payment-method img, .yape-mark { width: 38px; height: 38px; object-fit: contain; border-radius: 9px; } .yape-mark { display: grid; place-items: center; background: linear-gradient(145deg, #7811a7, #a51dc0); color: #fff; font: 800 1rem var(--font-title); box-shadow: inset 0 1px rgba(255, 255, 255, .18); } .payment-panel { border-radius: 15px; } .payment-qr img { width: min(320px, 100%); border-radius: 16px; box-shadow: 0 14px 36px rgba(0, 0, 0, .24); } .copy-row code { font-family: var(--font-mono); } /* Reduced visual noise and predictable movement. */ .reveal { transform: translateY(12px); transition: opacity 340ms var(--ease), transform 360ms var(--ease); } .reveal.left { transform: translateX(-14px); } .reveal.right { transform: translateX(14px); } .reveal.zoom { transform: scale(.985); } .aurora span { opacity: .2; filter: blur(86px); animation: none !important; } #grid-canvas { opacity: .32; } @media (min-width: 701px) { .payment-panel.yape-panel { grid-template-columns: 340px minmax(0, 1fr); } } @media (max-width: 1015px) { .hero-real-bg { opacity: .24; } .hero-real-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 54%, transparent), var(--bg) 94%); } .hero h1 { max-width: none; } } @media (max-width: 760px) { .section { padding-block: 72px; } .section.tight { padding-block: 54px; } .hero { min-height: auto; } .hero-real-bg { opacity: .19; } .hero-real-bg img { object-position: 68% center; } .quick-product { min-height: 0; } .page-hero { background-size: auto, 36px 36px, 36px 36px; } } @media (max-width: 520px) { .eyebrow { font-size: .63rem; letter-spacing: .055em; } .sec-title { letter-spacing: -.043em; } .hero h1 { font-size: clamp(2.65rem, 14vw, 3.55rem); letter-spacing: -.055em; } .hero-real-bg { opacity: .15; } .payment-qr img { width: min(300px, 100%); } } @media (prefers-reduced-motion: reduce) { .hero-real-bg img, .nav-products[open] .nav-product-link { animation: none !important; } :where(.quick-product, .hub-card, .product-feature-card, .real-shot, .catalog-option, .btn, .quick-buy, .page-hero-visual img, .product-shot img) { transition-duration: .01ms !important; } } /* ============================================================================= 41 · VISUAL CLARITY & ENGINEERING COMMERCE · 2026-08-23 Visible photographic context, expressive technical icons and a checkout whose navigation is always contained inside the viewport. ============================================================================= */ /* The photograph now has one controlled scrim instead of being dimmed twice. */ .hero-real-bg { opacity: 1; } .hero-real-bg img { object-position: 58% center; filter: saturate(.94) contrast(1.08) brightness(.82); } .hero-real-bg::after { background: linear-gradient(90deg, rgba(7, 17, 31, .98) 0%, rgba(7, 17, 31, .92) 27%, rgba(7, 17, 31, .58) 53%, rgba(7, 17, 31, .20) 78%, rgba(7, 17, 31, .42) 100%), linear-gradient(180deg, rgba(7, 17, 31, .12) 0%, rgba(7, 17, 31, .22) 56%, rgba(7, 17, 31, .92) 100%); } .hero-code-bg { opacity: .28; } html.light .hero-real-bg { opacity: 1; } html.light .hero-real-bg img { filter: saturate(.8) contrast(1.01) brightness(1.04); } html.light .hero-real-bg::after { background: linear-gradient(90deg, rgba(244, 247, 250, .98) 0%, rgba(244, 247, 250, .92) 30%, rgba(244, 247, 250, .62) 58%, rgba(244, 247, 250, .32) 82%, rgba(244, 247, 250, .54) 100%), linear-gradient(180deg, rgba(244, 247, 250, .12), rgba(244, 247, 250, .92)); } /* Domain-specific cards use their own accent and a substantial duotone glyph. */ .hub-card { min-height: 292px; padding: 30px; border-color: color-mix(in srgb, var(--hc, var(--cyan)) 16%, var(--line)); background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--hc, var(--cyan)) 12%, transparent), transparent 12rem), linear-gradient(155deg, color-mix(in srgb, var(--bg-elev) 76%, var(--card)), var(--card)); } .hub-card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .32; background: linear-gradient(125deg, transparent 0 64%, color-mix(in srgb, var(--hc, var(--cyan)) 9%, transparent)); } .hub-card::after { inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--hc, var(--cyan)), color-mix(in srgb, var(--hc, var(--cyan)) 26%, transparent) 72%, transparent); opacity: .8; } .hub-card > * { position: relative; z-index: 1; } .hub-card:hover { border-color: color-mix(in srgb, var(--hc, var(--cyan)) 42%, var(--line)); box-shadow: 0 18px 42px color-mix(in srgb, var(--hc, var(--cyan)) 10%, rgba(0, 0, 0, .3)); } .hub-card .hc-ic { width: 64px; height: 64px; border-radius: 15px; color: var(--hc, var(--cyan)); border-color: color-mix(in srgb, var(--hc, var(--cyan)) 34%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--hc, var(--cyan)) 20%, var(--bg-elev)), color-mix(in srgb, var(--hc, var(--cyan)) 7%, var(--card))); background-size: auto; box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 10px 24px color-mix(in srgb, var(--hc, var(--cyan)) 11%, transparent); } .hub-card:hover .hc-ic { transform: translateY(-2px) !important; color: var(--hc, var(--cyan)); border-color: color-mix(in srgb, var(--hc, var(--cyan)) 54%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--hc, var(--cyan)) 25%, var(--bg-elev)), color-mix(in srgb, var(--hc, var(--cyan)) 10%, var(--card))); } .hub-card .hc-ic .eng-icon { width: 34px; height: 34px; } .hub-card .hc-ic.brand-icon img { max-width: 72%; max-height: 72%; } .hub-card h3 { margin-top: 25px; font-size: 1.25rem; } .hub-card p { color: var(--ink-2); font-size: .92rem; line-height: 1.68; } .hub-card .hc-go { color: color-mix(in srgb, var(--hc, var(--cyan)) 72%, #ffffff); font-size: .76rem; } .hub-card .hc-badge { color: color-mix(in srgb, var(--hc, var(--gold)) 72%, #ffffff); border-color: color-mix(in srgb, var(--hc, var(--gold)) 32%, var(--line)); background: color-mix(in srgb, var(--hc, var(--gold)) 10%, var(--card)); } html.light .hub-card .hc-go, html.light .hub-card .hc-badge { color: color-mix(in srgb, var(--hc, var(--cyan)) 58%, #102033); } /* Soften the generic icon tiles used throughout inner pages. */ :where(.fi, .ai, .acad-ic, .pc-ic, .svc-ic) { background: linear-gradient(145deg, color-mix(in srgb, currentColor 14%, var(--bg-elev)), color-mix(in srgb, currentColor 5%, var(--card))); background-size: auto; border-color: color-mix(in srgb, currentColor 25%, var(--line)); box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 9px 22px rgba(0, 0, 0, .12); } /* Checkout layout: header, scrollable stage and footer always share one grid. */ .checkout-overlay { padding: 16px; } .checkout-shell { width: min(100%, 980px); height: min(880px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-color: color-mix(in srgb, var(--cyan) 20%, var(--line-2)); background: color-mix(in srgb, var(--bg-elev) 84%, var(--bg-2)); --checkout-copy: color-mix(in srgb, var(--ink) 76%, var(--ink-2)); --checkout-muted: color-mix(in srgb, var(--ink-2) 78%, var(--muted)); } .checkout-head { min-width: 0; padding: 22px 76px 18px 26px; background: radial-gradient(circle at 86% 0%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 18rem), linear-gradient(135deg, color-mix(in srgb, var(--bg-elev) 92%, var(--bg-2)), color-mix(in srgb, var(--bg-2) 92%, var(--bg-elev))); } .checkout-close { top: 14px; right: 16px; } .checkout-kicker { margin-bottom: 8px; font-size: .76rem; } .checkout-head h2 { font-size: clamp(1.62rem, 3vw, 2.08rem); } .checkout-head > p { margin-top: 7px; color: var(--checkout-copy); font-size: .92rem; line-height: 1.5; } .checkout-steps { margin-top: 15px; } .checkout-steps > span { color: var(--checkout-muted); font-size: .78rem; } .checkout-steps b { width: 26px; height: 26px; font-size: .7rem; } .checkout-body { min-width: 0; min-height: 0; max-height: none !important; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 21px 26px 26px; background: color-mix(in srgb, var(--bg-2) 58%, var(--bg-elev)); } .checkout-body::-webkit-scrollbar { width: 10px; } .checkout-body::-webkit-scrollbar-track { background: color-mix(in srgb, var(--bg) 45%, transparent); } .checkout-body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: color-mix(in srgb, var(--muted) 52%, transparent); background-clip: padding-box; } .checkout-body::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--cyan) 62%, var(--muted)); } .checkout-section-title { margin-bottom: 16px; } .checkout-section-title h3 { font-size: 1.08rem; } .checkout-section-title p { color: var(--checkout-muted); font-size: .84rem; line-height: 1.5; } .checkout-section-number { width: 31px; height: 31px; font-size: .78rem; } .owner-chip { color: var(--checkout-copy); font-size: .76rem; } .multi-chip { font-size: .72rem; } .catalog-option { min-height: 98px; border-color: color-mix(in srgb, var(--ink-2) 14%, var(--line)); background: color-mix(in srgb, var(--bg-elev) 72%, var(--card)); } .catalog-option-copy strong { font-size: .9rem; } .catalog-option-copy small { color: var(--checkout-muted); font-size: .73rem; line-height: 1.45; } .catalog-price s { color: var(--checkout-muted); font-size: .67rem; } .catalog-price b { font-size: 1.06rem; } .catalog-price em { font-size: .65rem; } .checkout-order-meta { color: var(--checkout-copy); font-size: .77rem; } .checkout-order-id { color: var(--checkout-muted); font-size: .7rem; } .checkout-savings { font-size: .71rem; } .checkout-savings > span, .checkout-pricing small, .checkout-pack-note { color: var(--checkout-muted); } .checkout-pricing strong { font-size: 1.82rem; } .checkout-pack-note { font-size: .73rem; } .payment-methods { gap: 11px; } .payment-method { min-height: 74px; padding: 12px 14px; border-color: color-mix(in srgb, var(--ink-2) 15%, var(--line)); background: color-mix(in srgb, var(--bg-elev) 68%, var(--card)); } .payment-method b { font-size: .88rem; } .payment-method small { color: var(--checkout-muted); font-size: .74rem; } .payment-method.active { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan-soft) 62%, var(--bg-elev)); } .payment-panels { margin-top: 13px; } .payment-panel { min-height: 226px; padding: 20px; border-color: color-mix(in srgb, var(--ink-2) 16%, var(--line)); background: radial-gradient(circle at 6% 8%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 15rem), color-mix(in srgb, var(--bg-elev) 72%, var(--bg-2)); } .payment-panel.yape-panel { gap: 26px; padding: 20px; } .qr-caption { color: var(--ink); font-size: .84rem; } .payment-qr { gap: 10px; } .payment-qr img { width: min(300px, 100%); height: auto; aspect-ratio: 600 / 640; border-width: 8px; } .payment-qr a { color: var(--cyan-lt); font-size: .76rem; } .payment-current-amount { margin-bottom: 12px; padding: 13px 15px; } .payment-current-amount span { color: var(--checkout-copy); font-size: .8rem; } .payment-current-amount strong, .checkout-pricing strong, .checkout-nav-total strong, .catalog-price b, .copy-row code { font-variant-numeric: tabular-nums; } .payment-current-amount strong { font-size: 1.62rem; } .payment-label { margin-top: 12px; color: var(--checkout-muted); font-size: .72rem; letter-spacing: .055em; } .payment-details > strong { font-size: .98rem; } .copy-row code { min-height: 48px; color: var(--ink); font-size: .9rem; } .copy-value { min-height: 48px; color: var(--cyan-lt); font-size: .78rem; } .payment-guide { gap: 9px; margin-top: 16px; } .payment-guide li { color: var(--checkout-copy); font-size: .82rem; line-height: 1.48; } .payment-guide b { width: 24px; height: 24px; font-size: .66rem; } .payment-help { color: var(--checkout-muted); font-size: .79rem; line-height: 1.55; } .bank-visual { height: 134px; } .buyer-field > span { color: var(--checkout-copy); font-size: .82rem; } .buyer-field input { min-height: 50px; } .receipt-notice b { font-size: .84rem; } .receipt-notice span { color: var(--checkout-muted); font-size: .76rem; } .checkout-privacy { color: var(--checkout-muted); font-size: .72rem; } .checkout-nav { position: relative; z-index: 4; min-width: 0; min-height: 78px; padding: 13px 26px; border-color: color-mix(in srgb, var(--ink-2) 14%, var(--line)); background: color-mix(in srgb, var(--bg-elev) 92%, var(--bg-2)); box-shadow: 0 -14px 30px rgba(0, 0, 0, .13); } .checkout-back, .checkout-next { min-height: 50px; font-size: .82rem; } .checkout-back { color: var(--checkout-copy); } .checkout-next { border-color: color-mix(in srgb, var(--gold) 64%, transparent); background: var(--grad-gold); color: #17120a; box-shadow: 0 10px 24px rgba(184, 121, 45, .22); } .checkout-next:hover:not(:disabled) { background: var(--grad-gold); color: #17120a; box-shadow: 0 13px 28px rgba(184, 121, 45, .29); } .checkout-nav-total span { color: var(--checkout-muted); font-size: .66rem; } .checkout-nav-total strong { font-size: 1.42rem; } @media (min-width: 701px) { .payment-panel.yape-panel { grid-template-columns: 310px minmax(0, 1fr); } } @media (max-width: 1015px) { .hero-real-bg { opacity: 1; } .hero-real-bg img { object-position: 66% center; } .hero-real-bg::after { background: linear-gradient(90deg, rgba(7, 17, 31, .96), rgba(7, 17, 31, .73) 58%, rgba(7, 17, 31, .34)), linear-gradient(180deg, rgba(7, 17, 31, .18), rgba(7, 17, 31, .57) 55%, rgba(7, 17, 31, .96)); } html.light .hero-real-bg::after { background: linear-gradient(90deg, rgba(244, 247, 250, .97), rgba(244, 247, 250, .78) 58%, rgba(244, 247, 250, .46)), linear-gradient(180deg, rgba(244, 247, 250, .16), rgba(244, 247, 250, .64) 58%, rgba(244, 247, 250, .97)); } } @media (max-width: 760px) { .hero-real-bg { opacity: 1; } .hero-real-bg img { object-position: 64% top; filter: saturate(.9) contrast(1.05) brightness(.78); } .hero-real-bg::after { background: linear-gradient(90deg, rgba(7, 17, 31, .96), rgba(7, 17, 31, .72) 68%, rgba(7, 17, 31, .48)), linear-gradient(180deg, rgba(7, 17, 31, .22), rgba(7, 17, 31, .72) 52%, rgba(7, 17, 31, .98)); } html.light .hero-real-bg img { filter: saturate(.74) contrast(.98) brightness(1.04); } html.light .hero-real-bg::after { background: linear-gradient(90deg, rgba(244, 247, 250, .97), rgba(244, 247, 250, .8) 68%, rgba(244, 247, 250, .6)), linear-gradient(180deg, rgba(244, 247, 250, .28), rgba(244, 247, 250, .76) 54%, rgba(244, 247, 250, .98)); } .hub-card { min-height: 260px; } } @media (max-width: 700px) { .checkout-overlay { padding: 0; } .checkout-shell { height: 96dvh; max-height: 96dvh; border-radius: 20px 20px 0 0; } .checkout-head { padding: 19px 62px 15px 18px; } .checkout-kicker { font-size: .68rem; } .checkout-head h2 { font-size: 1.55rem; } .checkout-head > p { font-size: .84rem; } .checkout-steps { margin-top: 13px; } .checkout-body { padding: 18px 16px 22px; } .checkout-nav { min-height: 76px; padding: 11px 14px calc(11px + env(safe-area-inset-bottom)); } .payment-panel.yape-panel { grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 16px; } .payment-qr img { width: min(205px, 100%); } .payment-guide li { font-size: .78rem; } } @media (max-width: 560px) { .payment-panel, .payment-panel.yape-panel { grid-template-columns: 1fr; } .payment-panel.yape-panel { gap: 20px; padding: 17px 14px; } .payment-qr img { width: min(300px, 78vw); } .payment-details { width: 100%; } } @media (max-width: 430px) { .checkout-head > p { display: none; } .checkout-head { padding-bottom: 13px; } .checkout-steps > span > span { display: none; } .checkout-steps > span { font-size: .67rem; } .checkout-steps > span:not(:last-child)::after { width: 18px; } .checkout-nav { grid-template-columns: 44px minmax(78px, .8fr) minmax(124px, 1.3fr); gap: 7px; } .checkout-next { padding-inline: 9px; font-size: .72rem; } .checkout-nav-total strong { font-size: 1.12rem; } .catalog-option-copy small { font-size: .7rem; } } @media (prefers-reduced-motion: reduce) { .hub-card:hover .hc-ic { transform: none !important; } } /* ============================================================================= 42 · AUDITED CONVERSION CLARITY & TRUE MOBILE CONTAINMENT · 2026-08-25 Preserve the engineering brand while fixing measured abandonment points. ============================================================================= */ .hero-grid > *, .page-hero-grid > *, .hero-left, .hero-right, .quick-product, .catalog-option-copy, .payment-details { min-width: 0; max-width: 100%; } .hero { padding-top: clamp(146px, 14vh, 160px); padding-bottom: 72px; } .hero-grid { gap: clamp(34px, 4.2vw, 58px); } .hero-badges { margin-bottom: 17px; } .hero h1 { margin-bottom: 18px; font-size: clamp(3rem, 5.05vw, 4.45rem); } .hero-desc { margin-bottom: 0; } .hero-ctas { align-items: center; gap: 11px; margin: 23px 0 5px; } .hero-ctas .btn { padding-inline: 19px; font-size: .91rem; } .hero-catalog-cta { box-shadow: 0 12px 28px color-mix(in srgb, var(--gold) 24%, transparent); } .hero-secondary-link { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); font-family: var(--font-title); font-size: .84rem; font-weight: 700; transition: color .2s var(--ease), gap .2s var(--ease); } .hero-secondary-link > i:first-child { color: var(--cyan-lt); } .hero-secondary-link > i:last-child { font-size: .72rem; } .hero-secondary-link:hover { gap: 11px; color: var(--ink); } .hero-trustline { margin-top: 10px; } .hero-stats { margin-top: 24px; padding-top: 19px; } .hero-stat .l { color: var(--ink-2); line-height: 1.45; } .hero-right { min-height: 0; } .bim-console { min-height: 0; } .bim-viewport { height: clamp(380px, 48svh, 448px); } .nav-products-title > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .nav-products-title small, .nav-products-title strong { display: block; } .nav-products-title strong { line-height: 1.35; } .nav-product-copy small { font-size: .75rem; } .quick-product { gap: 16px; } .quick-product h3 { line-height: 1.24; } .quick-product p { color: var(--ink-2); } .quick-buy { gap: 8px; } .catalog-featured { border-color: color-mix(in srgb, var(--cyan) 31%, var(--line)); background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 10rem), color-mix(in srgb, var(--bg-elev) 78%, var(--card)); } .catalog-featured[data-product-id="membretes"] { border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 10rem), color-mix(in srgb, var(--bg-elev) 78%, var(--card)); } .catalog-featured .catalog-option-copy strong { font-size: .93rem; } .catalog-featured .catalog-price b { font-size: 1.13rem; } .catalog-option-copy small { font-size: .76rem; } .catalog-price em { color: var(--green-lt); font-size: .7rem; font-weight: 800; } .payment-current-amount-mobile { display: none; } :where(.hero-secondary-link, .quick-buy, .payment-method):focus-visible { outline: 3px solid color-mix(in srgb, var(--cyan-lt) 68%, transparent); outline-offset: 3px; } html.light .catalog-featured { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 10rem), var(--bg-elev); } html.light .catalog-featured[data-product-id="membretes"] { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 10rem), var(--bg-elev); } html.light :is(.hero-stat:not(.c) .n, .stat:not(.cyan):not(.green) .num, .tier.featured .tier-price .amt, .exp-band .eb-num, .sup-price, .page-hero .ph-stats .n, .price-card.feat-pop .pc-new) { background: none !important; color: var(--gold-lt) !important; -webkit-text-fill-color: var(--gold-lt) !important; } html.light :is(.hero-stat.c .n, .stat.cyan .num) { background: none !important; color: var(--cyan-lt) !important; -webkit-text-fill-color: var(--cyan-lt) !important; } html.light .stat.green .num { background: none !important; color: var(--green-lt) !important; -webkit-text-fill-color: var(--green-lt) !important; } @media (max-width: 1100px) and (min-width: 861px) { .hero-grid { gap: 30px; } .hero h1 { font-size: clamp(2.8rem, 5.25vw, 3.75rem); } .hero-ctas .btn { padding-inline: 14px; font-size: .8rem; } } @media (max-width: 860px) { .hero { padding-top: 132px; } .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-left, .hero-right { width: 100%; } .hero-secondary-link { justify-content: center; } } @media (max-width: 620px) { nav#nav { background: color-mix(in srgb, var(--glass-strong) 87%, transparent); backdrop-filter: blur(16px) saturate(140%); } .hero { padding: 126px 0 52px; } .hero-grid { gap: 32px; } .hero-badges { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 7px; margin-bottom: 15px; } .hero-badges .mini-badge { min-width: 0; min-height: 42px; justify-content: center; gap: 5px; padding: 6px 7px; font-size: .66rem; line-height: 1.28; text-align: left; white-space: normal; } .hero-badges .mini-badge > span { min-width: 0; } .hero-left > .eyebrow { max-width: 100%; font-size: .63rem; } .hero h1 { width: 100%; max-width: 100%; margin-bottom: 16px; font-size: clamp(2.25rem, 11.1vw, 3rem); line-height: 1.035; letter-spacing: -.065em; } .hero h1 .l { max-width: 100%; } .hero-desc { width: 100%; font-size: .93rem; line-height: 1.7; } .hero-ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin: 18px 0 3px; } .hero-ctas .btn { min-height: 50px; padding-inline: 13px; font-size: .89rem; } .hero-secondary-link { width: 100%; font-size: .81rem; } .hero-trustline { min-height: 46px; margin-top: 7px; font-size: .74rem; line-height: 1.45; } .hero-stats { margin-top: 18px; padding-top: 16px; } .hero-right { margin: 0 auto; } .bim-console { width: 100%; } .bim-viewport { height: clamp(318px, 90vw, 390px); } .page-hero-grid > * { width: min(100%, 100%); } .page-hero h1 { font-size: clamp(2.25rem, 9.4vw, 3.1rem); } } @media (max-width: 560px) { .payment-panel.yape-panel { gap: 11px; padding: 12px 11px; } .payment-current-amount-mobile { min-height: 50px; display: flex; margin: 0; padding: 10px 11px; } .payment-current-amount-mobile span { font-size: .74rem; } .payment-current-amount-mobile strong { font-size: 1.4rem; } .yape-details > .payment-current-amount { display: none; } .payment-qr { gap: 7px; } .payment-qr img { width: min(280px, 73vw); } .payment-methods { gap: 8px; } .payment-method { min-height: 92px; padding: 9px 7px; } } @media (max-width: 430px) { .catalog-option { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; padding-inline: 10px; } .catalog-check { display: none; } .quick-product { padding: 18px; } .quick-product-bottom { gap: 8px; } .quick-actions { gap: 6px; } .quick-buy { width: auto; min-width: 118px; min-height: 46px; justify-content: center; padding: 0 9px; font-size: .69rem; } .quick-buy span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; } .catalog-option-copy small { font-size: .75rem; line-height: 1.42; } .catalog-price em { font-size: .65rem; } .checkout-section-title p { font-size: .76rem; } } @media (max-width: 380px) { .nav-inner { gap: 8px; } .nav-inner .brand { gap: 6px; } .nav-inner .brand-logo { width: 36px; height: 36px; } .nav-inner .brand-txt .b-name { font-size: .93rem; } .nav-cta { gap: 7px; } .nav-cta > .nav-catalog-trigger { display: inline-flex; gap: 5px; padding-inline: 9px; font-size: .69rem; } .nav-catalog-trigger .eng-icon { width: 14px; height: 14px; } .topbar-left .tb-item:first-child span { max-width: 86px; } .hero-badges .mini-badge { gap: 4px; padding-inline: 5px; font-size: .6rem; } .quick-buy { min-width: 108px; font-size: .66rem; } } @media (prefers-reduced-motion: reduce) { .hero-secondary-link, .catalog-featured, .quick-buy { transition: none !important; } } /* ============================================================================= 43 · IMAGE-LED PRODUCT STORY & EDITORIAL BENTO · 2026-08-25 Real project imagery carries the story; HTML remains responsible for copy, prices, controls and accessible interaction states. ============================================================================= */ /* Product discovery now proves what each offer is before asking for a click. */ .quick-product-media { position: relative; height: 108px; flex: 0 0 auto; margin: -22px -22px 2px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-3); } .quick-product-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--bg-elev) 86%, transparent)); } .quick-product-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 46%; filter: saturate(.88) contrast(1.04); transition: transform 320ms var(--ease), filter 220ms var(--ease); } .quick-product-media.product-ui img { object-position: top center; filter: saturate(.82) contrast(1.03) brightness(.92); } .quick-product:hover .quick-product-media img { transform: scale(1.025); filter: saturate(.98) contrast(1.05); } /* Real software screenshots become wide editorial stories instead of two equally weighted catalogue tiles. */ .product-intro { overflow: hidden; background: radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 30rem), color-mix(in srgb, var(--bg-2) 58%, transparent); } .product-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; width: min(100%, 1180px); margin-inline: auto; } .product-feature-card { min-height: 408px; display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(330px, .72fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; } .product-feature-card .product-shot { min-height: 408px; aspect-ratio: auto; border-right: 1px solid var(--line); } .product-feature-card .product-shot img { object-position: top center; } .product-feature-card .product-feature-copy { justify-content: center; padding: clamp(30px, 4vw, 48px); } .product-feature-card .product-feature-copy > p { min-height: 0; font-size: .96rem; } .product-feature-card .product-logo h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); } .product-feature-card .btn { min-height: 48px; } .product-feature-card.product-cad .product-shot { order: 2; border-right: 0; border-left: 1px solid var(--line); } .product-feature-card.product-cad .product-feature-copy { order: 1; } /* The areas index uses the same real imagery as its destination pages. */ .hub-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; gap: 18px; } .hub-card { grid-column: span 4; min-height: 382px; padding: 0 26px 26px; } .hub-card:nth-child(1) { grid-column: span 7; } .hub-card:nth-child(2) { grid-column: span 5; } .hub-card:nth-child(6), .hub-card:nth-child(7) { grid-column: span 6; } .hub-card-media { position: relative; width: calc(100% + 52px); height: 132px; flex: 0 0 132px; display: block; margin: 0 -26px; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--hc, var(--cyan)) 22%, var(--line)); background: color-mix(in srgb, var(--hc, var(--cyan)) 7%, var(--bg-3)); } .hub-card-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 28%, color-mix(in srgb, var(--card) 92%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--hc, var(--cyan)) 14%, transparent), transparent 62%); } .hub-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 45%; filter: saturate(.82) contrast(1.04); transition: transform 340ms var(--ease), filter 220ms var(--ease); } .hub-card-media.product-ui img { object-position: top center; } .hub-card-media.contain img { object-fit: contain; padding: 18px; } .hub-card:hover .hub-card-media img { transform: scale(1.022); filter: saturate(.96) contrast(1.05); } .hub-card .hc-ic { position: relative; z-index: 3; flex: 0 0 auto; margin-top: -28px; border: 1px solid color-mix(in srgb, var(--hc, var(--cyan)) 44%, var(--line)); background: color-mix(in srgb, var(--bg-elev) 92%, var(--hc, var(--cyan)) 8%); } .hub-card h3 { margin-top: 17px; } .hub-card .hc-badge { top: 14px; z-index: 4; backdrop-filter: blur(10px); } /* Supersede the legacy seventh-card callout now that the bento has a paired final row. The stronger selector intentionally resets its old grid layout. */ @media (min-width: 1016px) { .hub-grid > .hub-card:last-child:nth-child(3n + 1) { grid-column: span 6; min-height: 382px; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 26px 26px; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) .hc-ic { width: 64px; height: 64px; margin-top: -28px; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) h3 { margin-top: 17px; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) p { max-width: none; margin-bottom: 16px; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) .hc-go { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: transparent; } } @media (min-width: 901px) and (max-width: 1015px) { .hub-grid > .hub-card:last-child:nth-child(3n + 1) { grid-column: span 1; min-height: 382px; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 26px 26px; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) .hc-ic { width: 64px; height: 64px; margin-top: -28px; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) h3 { margin-top: 17px; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) p { max-width: none; margin-bottom: 16px; } .hub-grid > .hub-card:last-child:nth-child(3n + 1) .hc-go { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: transparent; } } /* Product-page tabs stay available as a compact local navigation rail. */ .mk-tabs { position: sticky; top: 112px; z-index: 12; flex-wrap: nowrap; gap: 5px; margin-bottom: 14px; padding: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; border: 1px solid var(--line-2); border-radius: 14px; background: color-mix(in srgb, var(--glass-strong) 92%, transparent); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); backdrop-filter: blur(16px) saturate(135%); } .mk-tabs::-webkit-scrollbar { display: none; } .mk-tab { min-height: 44px; flex: 0 0 auto; padding: 10px 15px; border: 1px solid transparent; border-radius: 10px; } .mk-tab.active { border-color: color-mix(in srgb, var(--gold) 26%, var(--line)); background: var(--gold-soft); } .mk-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--cyan-lt) 58%, transparent); outline-offset: 2px; } .theme-btn:hover, .theme-btn:focus-visible, .theme-btn:active { transform: none !important; } /* Programmatic focus announces checkout steps without drawing a heavy box around a non-interactive heading. */ .checkout-section-title h3:focus, .checkout-section-title h3:focus-visible { outline: 0; box-shadow: inset 0 -2px color-mix(in srgb, var(--cyan) 62%, transparent); } html.light .quick-product-media::after, html.light .hub-card-media::after { background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--card) 94%, transparent)); } html.light .quick-product-media.product-ui img, html.light .hub-card-media.product-ui img { filter: saturate(.9) contrast(1.01) brightness(1.02); } @media (max-width: 1015px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-card, .hub-card:nth-child(1), .hub-card:nth-child(2), .hub-card:nth-child(6), .hub-card:nth-child(7) { grid-column: span 1; } .mk-tabs { top: 118px; } } @media (max-width: 760px) { .product-feature-card { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; } .product-feature-card .product-shot, .product-feature-card.product-cad .product-shot { order: 1; min-height: 0; aspect-ratio: 16 / 9; border: 0; border-bottom: 1px solid var(--line); } .product-feature-card .product-feature-copy, .product-feature-card.product-cad .product-feature-copy { order: 2; padding: 26px; } .product-feature-card .product-logo h3 { font-size: 1.45rem; } .hub-grid { grid-template-columns: minmax(0, 1fr); } .hub-card, .hub-card:nth-child(1), .hub-card:nth-child(2), .hub-card:nth-child(6), .hub-card:nth-child(7) { grid-column: 1; } .mk-tabs { position: relative; top: auto; border-radius: 12px; } } @media (max-width: 430px) { .quick-product-media { height: 118px; margin: -18px -18px 0; } .hub-card { min-height: 360px; padding-inline: 22px; } .hub-card-media { width: calc(100% + 44px); margin-inline: -22px; } .product-feature-card .product-feature-copy, .product-feature-card.product-cad .product-feature-copy { padding: 23px 20px 24px; } } @media (prefers-reduced-motion: reduce) { .quick-product-media img, .hub-card-media img { transition: none !important; transform: none !important; } } /* ============================================================================= 44 · EDITORIAL BIM + COMMERCE MEGA MENU · 2026-09-01 Hybrid of the selected editorial direction and the category-first menu. ============================================================================= */ /* A calmer, denser header keeps the catalog discoverable without covering the engineering proof beneath it. */ nav#nav { padding: 8px 0; border-bottom: 1px solid rgba(148, 177, 207, .14); background: color-mix(in srgb, #07111f 94%, transparent); backdrop-filter: blur(18px) saturate(132%); box-shadow: 0 10px 30px rgba(1, 8, 18, .16); } nav#nav.scrolled { padding: 6px 0; background: color-mix(in srgb, #07111f 97%, transparent); box-shadow: 0 14px 34px rgba(1, 8, 18, .22); } .nav-inner { min-height: 70px; gap: clamp(12px, 2vw, 24px); } .nav-inner > .brand { flex: 0 0 auto; } .nav-inner .brand-logo { width: 44px; height: 44px; box-shadow: none; } .nav-inner .brand-txt .b-name { color: #f6f8fb; font-size: 1.28rem; } .nav-inner .brand-txt .b-sub { color: #91a2b8; font-size: .5rem; letter-spacing: 2.15px; } .nav-links { flex: 0 0 auto; gap: 2px; } .nav-links > a, .nav-products > summary { min-height: 44px; padding-inline: 12px; border-radius: 8px; color: #c3cfdd; font-size: .8rem; font-weight: 700; background: transparent; box-shadow: inset 0 -2px transparent; transition: color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease); } .nav-links > a:hover, .nav-products > summary:hover, .nav-products[open] > summary { color: #fff; background: rgba(255, 255, 255, .055); box-shadow: inset 0 -2px #42c6df; } .nav-links > a[aria-current="page"], .nav-products[data-active="true"] > summary { color: #fff; background: transparent; box-shadow: inset 0 -2px #42c6df; } .nav-products > summary > .eng-icon { color: #56cfe8; } .nav-products-caret { font-size: .58rem; } .nav-cta { min-width: 0; margin-left: auto; gap: 8px; } .nav-search { width: clamp(190px, 16vw, 252px); height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; overflow: hidden; border: 1px solid rgba(163, 190, 218, .18); border-radius: 10px; background: rgba(8, 25, 43, .78); transition: width 220ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease); } .nav-search:focus-within { width: clamp(220px, 18vw, 286px); border-color: rgba(80, 201, 223, .66); background: #0b2137; box-shadow: 0 0 0 3px rgba(80, 201, 223, .13); } .nav-search input { min-width: 0; width: 100%; height: 100%; padding: 0 4px 0 13px; border: 0; outline: 0; background: transparent; color: #f5f8fc; font: 600 .72rem/1 var(--font-body); } .nav-search input::placeholder { color: #8fa1b7; opacity: 1; } .nav-search button, .nav-cart-trigger { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(163, 190, 218, .18); border-radius: 10px; color: #dbe6f2; background: rgba(8, 25, 43, .78); transition: color 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease), transform 180ms var(--ease); } .nav-search button { border: 0; border-radius: 0; background: transparent; } .nav-search button:hover, .nav-cart-trigger:hover { color: #fff; border-color: rgba(80, 201, 223, .55); background: rgba(80, 201, 223, .11); } .nav-search button:active, .nav-cart-trigger:active { transform: scale(.96); } .nav-catalog-trigger { min-height: 44px; padding-inline: 16px; border: 1px solid rgba(255, 220, 163, .32); border-radius: 10px; background: linear-gradient(135deg, #edbb69, #d89436); color: #181006; box-shadow: 0 8px 18px rgba(177, 103, 21, .22); } html.light nav#nav, html.light nav#nav.scrolled { border-bottom-color: rgba(17, 39, 67, .12); background: color-mix(in srgb, #fff 96%, transparent); box-shadow: 0 10px 26px rgba(15, 30, 48, .08); } html.light .nav-inner .brand-txt .b-name { color: #102038; } html.light .nav-inner .brand-txt .b-sub { color: #607187; } html.light :is(.nav-links > a, .nav-products > summary) { color: #34485f; } html.light :is(.nav-links > a:hover, .nav-products > summary:hover, .nav-products[open] > summary, .nav-links > a[aria-current="page"], .nav-products[data-active="true"] > summary) { color: #0c2038; background: rgba(16, 47, 79, .045); } html.light .nav-search { border-color: rgba(17, 55, 91, .16); background: #f2f6fa; } html.light .nav-search:focus-within { border-color: #087c99; background: #fff; box-shadow: 0 0 0 3px rgba(8, 124, 153, .12); } html.light .nav-search input { color: #102038; } html.light .nav-search input::placeholder { color: #64758a; } html.light :is(.nav-search button, .nav-cart-trigger) { border-color: rgba(17, 55, 91, .15); color: #173551; background: #f2f6fa; } /* Three-column catalog menu: deliberately light in both themes, matching the selected reference and giving dense product information maximum contrast. */ .nav-products-menu { --mega-bg: #f8fafc; --mega-surface: #ffffff; --mega-ink: #0d2139; --mega-ink-soft: #43566d; --mega-muted: #6b7c91; --mega-line: #dde5ed; position: fixed; top: 120px; left: 50%; width: min(1080px, calc(100vw - 48px)); max-height: calc(100dvh - 140px); display: grid; grid-template-columns: minmax(220px, .86fr) minmax(430px, 1.75fr) minmax(220px, .92fr); gap: 0; padding: 0; overflow: auto; border: 1px solid rgba(133, 154, 177, .34); border-radius: 15px; background: var(--mega-bg); box-shadow: 0 26px 70px rgba(1, 12, 26, .3), 0 2px 8px rgba(1, 12, 26, .1); backdrop-filter: none; color: var(--mega-ink); transform: translate(-50%, -8px) scale(.992); transform-origin: 50% 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms var(--ease), transform 220ms var(--ease), visibility 180ms; } .nav-products[open] .nav-products-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); } .nav-products-menu a::after { display: none !important; } .nav-mega-column { min-width: 0; padding: 21px 20px 19px; } .nav-mega-column + .nav-mega-column { border-left: 1px solid var(--mega-line); } .nav-mega-heading { margin-bottom: 12px; color: #304862; font: 800 .64rem/1.2 var(--font-title); letter-spacing: .085em; text-transform: uppercase; } .nav-category-link { min-height: 44px; display: grid !important; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 3px; padding: 5px 7px !important; border: 1px solid transparent; border-radius: 9px !important; color: var(--mega-ink-soft) !important; background: transparent !important; font-size: .74rem !important; transition: color 170ms var(--ease), border-color 170ms var(--ease), background-color 170ms var(--ease), transform 170ms var(--ease); } .nav-category-link > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #dce6ef; border-radius: 8px; color: #17688a; background: #edf6fa; } .nav-category-link b { min-width: 0; font-weight: 700; line-height: 1.3; } .nav-category-link:hover, .nav-category-link:focus-visible { color: #0d3857 !important; border-color: #c9dce9; background: #eef6fa !important; transform: translateX(2px); } .nav-category-all { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; margin-top: 7px; padding: 8px 7px; color: #1f5e7c; font-size: .72rem; font-weight: 800; } .nav-category-all:hover { color: #074f73; } .nav-mega-products { background: var(--mega-surface); } .nav-mega-products .nav-products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; } .nav-mega-products .nav-product-link { min-height: 88px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 11px !important; border: 1px solid var(--mega-line); border-radius: 11px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15, 36, 59, .035); transform: none; } .nav-mega-products .nav-product-link:hover, .nav-mega-products .nav-product-link:focus-visible { border-color: #96bed1; background: #f6fbfd !important; box-shadow: 0 8px 18px rgba(19, 67, 94, .08); transform: translateY(-2px); } .nav-mega-products .nav-product-link.featured { border-color: #e2c18e; background: #fffaf2 !important; } .nav-mega-products .nav-product-icon { width: 44px; height: 44px; border: 1px solid #dfe7ef; border-radius: 9px; box-shadow: none; } .nav-mega-products .nav-product-copy strong { overflow: visible; color: var(--mega-ink); font-size: .8rem; line-height: 1.28; text-overflow: clip; white-space: normal; } .nav-mega-products .nav-product-copy small { color: var(--mega-muted); font-size: .67rem; line-height: 1.4; white-space: normal; } .nav-mega-products .nav-product-price { align-self: center; padding: 4px 6px; border: 1px solid #ead8bb; border-radius: 7px; color: #9a570b; background: #fff7eb; font-size: .72rem; } .nav-menu-catalog { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; margin-top: 9px; padding: 7px 3px; color: #17688a; font-size: .73rem; font-weight: 800; } .nav-menu-catalog:hover { gap: 12px; color: #074f73; } .nav-menu-empty { min-height: 88px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px; border: 1px dashed #c9d6e2; border-radius: 10px; color: var(--mega-muted); font-size: .74rem; text-align: center; } .nav-order-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 11px; align-items: start; padding: 13px; border: 1px solid var(--mega-line); border-radius: 11px; background: #fff; } .nav-order-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #cfe0ea; border-radius: 9px; color: #17688a; background: #edf6fa; } .nav-order-icon .eng-icon { width: 22px; height: 22px; } .nav-order-card strong { display: block; color: var(--mega-ink); font-size: .78rem; line-height: 1.35; } .nav-order-card p { margin-top: 3px; color: var(--mega-muted); font-size: .68rem; line-height: 1.45; } .nav-mega-order .nav-product-all { min-height: 44px; display: flex; grid-template-columns: none; justify-content: center; gap: 9px; margin-top: 10px; padding: 9px 12px; border: 1px solid #79abc3; border-radius: 9px; color: #124e6c; background: #fff; font-size: .73rem; font-weight: 800; text-align: center; } .nav-mega-order .nav-product-all > span { color: inherit; font-size: inherit; } .nav-mega-order .nav-product-all:hover { border-color: #17688a; color: #fff; background: #17688a; } .nav-quick-links { margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--mega-line); } .nav-quick-links .nav-mega-heading { margin-bottom: 7px; } .nav-quick-links a { min-height: 31px; display: flex !important; align-items: center; justify-content: space-between; padding: 4px 1px !important; color: var(--mega-ink-soft) !important; background: transparent !important; font-size: .69rem !important; font-weight: 650 !important; } .nav-quick-links a:hover { color: #17688a !important; } .nav-quick-links a i { color: #16845f; } .nav-products[open] :is(.nav-category-link, .nav-product-link, .nav-order-card) { animation: navMegaItemIn 300ms var(--ease) both; } .nav-products[open] .nav-category-link:nth-child(3), .nav-products[open] .nav-product-link:nth-child(2) { animation-delay: 30ms; } .nav-products[open] .nav-category-link:nth-child(4), .nav-products[open] .nav-product-link:nth-child(3) { animation-delay: 60ms; } .nav-products[open] .nav-category-link:nth-child(5), .nav-products[open] .nav-product-link:nth-child(4) { animation-delay: 90ms; } @keyframes navMegaItemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Button hierarchy from the selected concept: one copper action, one quiet secondary action and visible press/focus feedback. */ .btn, .quick-buy, .checkout-next, .checkout-back { border-radius: 10px; transition: transform 180ms var(--ease), box-shadow 200ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease); } .btn-gold { border: 1px solid rgba(255, 222, 171, .3); background: linear-gradient(135deg, #efbd6c, #d89539); color: #181006; box-shadow: 0 9px 22px rgba(177, 103, 21, .22); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(177, 103, 21, .3); } .btn:active, .quick-buy:active, .checkout-next:active, .checkout-back:active { transform: scale(.985); } :where(.btn, .quick-buy, .nav-search input, .nav-search button, .nav-cart-trigger, .nav-category-link, .nav-product-link, .nav-product-all, .nav-menu-catalog):focus-visible { outline: 3px solid rgba(80, 201, 223, .48); outline-offset: 3px; } /* Editorial hero proportions: the existing live BIM model remains the proof. */ .hero { min-height: 780px; padding-top: 152px; padding-bottom: 72px; } .hero-grid { grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr); gap: clamp(38px, 4.5vw, 66px); } .hero-left { max-width: 610px; } .hero h1 { max-width: 10.5ch; font-size: clamp(3.25rem, 5.2vw, 4.65rem); line-height: 1; } .hero-desc { max-width: 580px; font-size: 1.02rem; } .hero-ctas .btn { min-height: 52px; } .hero-right { align-items: center; } .bim-console { width: min(100%, 650px); border-radius: 17px; } .bim-viewport { height: clamp(400px, 49svh, 470px); } .quick-shop { background: color-mix(in srgb, var(--bg-2) 76%, var(--bg)); } .quick-product { border-radius: 15px; } @media (max-width: 1280px) { .nav-search { display: none; } .nav-products-menu { width: min(980px, calc(100vw - 36px)); grid-template-columns: minmax(205px, .8fr) minmax(410px, 1.65fr) minmax(205px, .84fr); } } @media (max-width: 1120px) { .nav-inner .brand-txt .b-sub { display: none; } .nav-cart-trigger { display: none; } .nav-products-menu { width: min(920px, calc(100vw - 28px)); } .nav-mega-column { padding-inline: 16px; } .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: 30px; } } @media (max-width: 1015px) { nav#nav, nav#nav.scrolled { padding-block: 5px; } .nav-inner { min-height: 66px; } .nav-search, .nav-cart-trigger { display: none; } .hero { padding-top: 132px; } } @media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-left { max-width: 680px; } .bim-console { width: min(100%, 680px); } } @media (max-width: 620px) { .nav-inner .brand-logo { width: 40px; height: 40px; } .nav-inner .brand-txt .b-name { font-size: 1.04rem; } .nav-catalog-trigger { min-height: 44px; padding-inline: 11px; } .hero { padding-top: 124px; } .hero h1 { font-size: clamp(2.45rem, 12.3vw, 3.25rem); } .bim-console { border-radius: 14px; } } @media (max-width: 380px) { .nav-catalog-trigger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .nav-catalog-trigger { width: 44px; padding: 0; } } @media (prefers-reduced-motion: reduce) { .nav-products-menu, .nav-products[open] :is(.nav-category-link, .nav-product-link, .nav-order-card), .nav-search, .btn, .quick-buy { animation: none !important; transition-duration: .01ms !important; } } /* ============================================================================= 45 · BIMND-INSPIRED EDITORIAL COMMERCE · 2026-09-01 A light, architectural header above a cinematic BIM hero, followed by a clean catalog surface. Existing navigation, checkout and 3D controls remain. ============================================================================= */ /* Light architectural chrome: the page starts with immediate legibility while the dark BIM scene keeps IMGENYA's established technical identity. */ .topbar { border-bottom: 1px solid #e3e8ee; background: #f8fafc; color: #405269; } .topbar :is(.tb-item, .tb-link) { color: #405269; } .topbar .tb-link:hover { color: #9a570b; } .topbar .sel-btn { border-color: transparent; color: #21364f; background: transparent; } .topbar .sel-btn:hover, .topbar .selector.open .sel-btn { border-color: #d8e1ea; color: #0d2139; background: #fff; } .topbar .theme-btn { border-color: #d9e2eb; color: #95570f; background: #fff; } .topbar .sel-menu { border-color: #d9e2eb; background: #fff; color: #0d2139; box-shadow: 0 18px 42px rgba(15, 36, 59, .14); } .topbar .sel-opt { color: #43566d; } .topbar .sel-opt:hover { color: #0d2139; background: #f1f5f8; } nav#nav, nav#nav.scrolled, html.light nav#nav, html.light nav#nav.scrolled { padding-block: 7px; border-bottom: 1px solid #dfe6ed; background: rgba(255, 255, 255, .98); box-shadow: 0 8px 26px rgba(13, 33, 57, .08); backdrop-filter: blur(16px) saturate(125%); } .nav-inner { min-height: 68px; } .nav-inner .brand-logo { width: 46px; height: 46px; } .nav-inner .brand-txt .b-name, html.light .nav-inner .brand-txt .b-name { color: #102038; } .nav-inner .brand-txt .b-sub, html.light .nav-inner .brand-txt .b-sub { color: #68798d; } .nav-links > a, .nav-products > summary, html.light :is(.nav-links > a, .nav-products > summary) { color: #243950; background: transparent; box-shadow: inset 0 -2px transparent; } .nav-links > a:hover, .nav-products > summary:hover, .nav-products[open] > summary, .nav-links > a[aria-current="page"], .nav-products[data-active="true"] > summary, html.light :is(.nav-links > a:hover, .nav-products > summary:hover, .nav-products[open] > summary, .nav-links > a[aria-current="page"], .nav-products[data-active="true"] > summary) { color: #9a570b; background: #fbf5ec; box-shadow: inset 0 -2px #c87716; } .nav-products > summary > .eng-icon { color: #9a570b; } .nav-search, html.light .nav-search { border-color: #dce4ec; background: #f4f7fa; } .nav-search input, html.light .nav-search input { color: #102038; } .nav-search input::placeholder, html.light .nav-search input::placeholder { color: #6b7c91; } .nav-search button, .nav-cart-trigger, html.light :is(.nav-search button, .nav-cart-trigger) { border-color: #dce4ec; color: #173551; background: #f4f7fa; } .nav-catalog-trigger { box-shadow: 0 9px 22px rgba(169, 93, 12, .2); } /* The product menu follows the reference composition: category rail, one real product demonstration and a compact price list. */ .nav-products-menu { --mega-bg: #f7f9fb; --mega-surface: #fff; --mega-ink: #0d2139; --mega-ink-soft: #41546b; --mega-muted: #6b7c91; --mega-line: #dce4ec; top: 77px; left: 61%; width: min(930px, calc(100vw - 48px)); max-height: calc(100dvh - 137px); display: block; overflow: auto; border: 1px solid #d8e1e9; border-radius: 12px; background: var(--mega-bg); box-shadow: 0 30px 82px rgba(4, 20, 38, .27), 0 2px 8px rgba(4, 20, 38, .08); } .nav-mega-topline { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 20px; border-bottom: 1px solid var(--mega-line); color: #52657b; background: #fbfcfd; font: 800 .64rem/1 var(--font-title); letter-spacing: .075em; text-transform: uppercase; } .nav-mega-topline > span { display: inline-flex; align-items: center; gap: 8px; } .nav-mega-topline > span:first-child i { color: #a96416; } .nav-mega-support { color: #117354; letter-spacing: 0; text-transform: none; } .nav-mega-layout { display: grid; grid-template-columns: minmax(190px, .74fr) minmax(380px, 1.48fr) minmax(260px, 1fr); min-height: 335px; } .nav-mega-column { padding: 20px 18px; } .nav-mega-column + .nav-mega-column { border-left: 1px solid var(--mega-line); } .nav-mega-heading { color: #607288; font-size: .62rem; letter-spacing: .09em; } .nav-category-link { min-height: 44px; grid-template-columns: 38px minmax(0, 1fr); margin-bottom: 4px; padding: 5px 8px !important; border-radius: 9px !important; color: #43566d !important; font-size: .73rem !important; } .nav-category-link > span { width: 36px; height: 36px; border-color: #d8e2eb; color: #186f91; background: #f0f7fa; } .nav-category-link > span img { width: 22px; height: 23px; object-fit: contain; } .nav-category-link.active { border-color: #ead9c4; color: #8d520d !important; background: #fbf3e9 !important; } .nav-category-link.active > span { border-color: #ebd4b7; color: #9f6018; background: #fff8ef; } .nav-category-link:hover, .nav-category-link:focus-visible { border-color: #c6d8e6; color: #0f5576 !important; background: #eef6fa !important; } .nav-mega-featured { background: var(--mega-surface); } .nav-featured-card { min-height: 285px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) auto !important; gap: 0 !important; padding: 0 !important; overflow: hidden; border: 1px solid #cbd7e2 !important; border-radius: 11px !important; background: #fff !important; box-shadow: 0 7px 20px rgba(20, 52, 78, .07) !important; } .nav-featured-card:hover, .nav-featured-card:focus-visible { border-color: #86afc3 !important; box-shadow: 0 13px 28px rgba(20, 52, 78, .12) !important; transform: translateY(-2px) !important; } .nav-featured-head { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; border-bottom: 1px solid var(--mega-line); } .nav-featured-head .nav-product-icon { width: 42px; height: 42px; border-color: #d8e2eb; box-shadow: none; } .nav-featured-head .nav-product-copy strong { color: var(--mega-ink); font-size: .84rem; } .nav-featured-head .nav-product-copy small { color: var(--mega-muted); font-size: .67rem; } .nav-featured-head .nav-product-price { align-self: center; } .nav-featured-visual { position: relative; min-height: 170px; display: block; overflow: hidden; background: #e9eef3; } .nav-featured-visual::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(13, 33, 57, .04); pointer-events: none; } .nav-featured-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(.86) contrast(1.02); transition: transform 360ms var(--ease), filter 220ms var(--ease); } .nav-featured-card:hover .nav-featured-visual img { transform: scale(1.015); filter: saturate(.96) contrast(1.03); } .nav-featured-action { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-top: 1px solid var(--mega-line); color: #155f80; font-size: .72rem; font-weight: 800; } .nav-featured-card:hover .nav-featured-action i { transform: translateX(3px); } .nav-featured-action i { transition: transform 180ms var(--ease); } .nav-mega-more { background: #fafbfc; } .nav-mega-more .nav-products-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; } .nav-mega-more .nav-product-link { min-height: 68px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; padding: 10px 2px !important; border: 0; border-bottom: 1px solid var(--mega-line); border-radius: 0 !important; background: transparent !important; box-shadow: none; } .nav-mega-more .nav-product-link:last-child { border-bottom: 0; } .nav-mega-more .nav-product-link:hover, .nav-mega-more .nav-product-link:focus-visible { padding-left: 7px !important; border-color: var(--mega-line); background: #f1f7fa !important; transform: none; } .nav-mega-more .nav-product-icon { width: 42px; height: 42px; border-color: #dae3eb; border-radius: 9px; box-shadow: none; } .nav-product-icon.utilities { color: #667085; background: #eef1f5; } .nav-mega-more .nav-product-copy strong { overflow: visible; color: var(--mega-ink); font-size: .76rem; line-height: 1.25; white-space: normal; } .nav-mega-more .nav-product-copy small { overflow: visible; color: var(--mega-muted); font-size: .63rem; line-height: 1.35; white-space: normal; } .nav-mega-more .nav-product-price, .nav-featured-head .nav-product-price { padding: 5px 7px; border-color: #ead8bb; color: #99570d; background: #fff7ec; font-size: .7rem; } .nav-menu-empty { margin: 0 18px 14px; color: var(--mega-muted); } .nav-mega-footer { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 20px; border-top: 1px solid var(--mega-line); background: #fff; } .nav-mega-footer :is(.nav-product-all, .nav-menu-catalog) { min-height: 42px; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 8px 6px; border: 0; color: #155f80; background: transparent; font-size: .72rem; font-weight: 800; } .nav-mega-footer .nav-product-all .eng-icon { width: 18px; height: 18px; } .nav-mega-footer .nav-product-all > span { color: inherit; font-size: inherit; } .nav-mega-footer .nav-menu-catalog { margin-left: auto; } .nav-mega-footer :is(.nav-product-all, .nav-menu-catalog):hover { color: #9a570b; background: transparent; } /* Cinematic first screen: the existing real construction photograph and live BIM viewer share one architectural composition instead of competing cards. */ .hero { min-height: 680px; padding: 112px 0 0; background: #06111f; } .hero-real-bg { opacity: .56; } .hero-real-bg img { object-position: 60% center; filter: saturate(.78) contrast(1.08) brightness(.6); } .hero-real-bg::after { background: linear-gradient(90deg, #06111f 0%, rgba(6, 17, 31, .96) 27%, rgba(6, 17, 31, .63) 56%, rgba(6, 17, 31, .25) 100%), linear-gradient(180deg, rgba(6, 17, 31, .2), rgba(6, 17, 31, .86) 100%); } html.light .hero-real-bg { opacity: .56; } html.light .hero-real-bg img { filter: saturate(.78) contrast(1.08) brightness(.6); } html.light .hero-real-bg::after { background: linear-gradient(90deg, #06111f 0%, rgba(6, 17, 31, .96) 27%, rgba(6, 17, 31, .63) 56%, rgba(6, 17, 31, .25) 100%), linear-gradient(180deg, rgba(6, 17, 31, .2), rgba(6, 17, 31, .86) 100%); } .hero-code-bg { opacity: .24; } .hero-grid { min-height: 490px; grid-template-columns: minmax(390px, .78fr) minmax(520px, 1.22fr); gap: clamp(34px, 4vw, 62px); align-items: center; } .hero-left { max-width: 530px; padding-bottom: 10px; } .hero .eyebrow { border-color: rgba(216, 167, 95, .34); color: #e5b568; background: rgba(8, 24, 42, .62); } .hero h1 { max-width: 10.5ch; margin-bottom: 24px; color: #f7f9fc; font-size: clamp(2.85rem, 3.75vw, 3.5rem); line-height: .97; letter-spacing: -.068em; } .hero h1 .t1, .hero h1 .t2 { color: #f7f9fc !important; -webkit-text-fill-color: #f7f9fc !important; } .hero h1 .t3 { color: #dda451 !important; background: linear-gradient(135deg, #f0c47c, #c87818) !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } .hero-desc { max-width: 520px; margin-bottom: 26px; color: #c3cede; font-size: 1rem; line-height: 1.72; } .hero-desc b { color: #f4f7fb; } html.light .hero .hero-desc { color: #c3cede; } html.light .hero .hero-desc b { color: #f4f7fb; } .hero-ctas { margin-bottom: 17px; } .hero-ctas .btn { min-height: 52px; border-radius: 9px; } .hero-demo-cta { border-color: rgba(219, 230, 241, .42); color: #f4f7fb; background: rgba(6, 17, 31, .52); } .hero-demo-cta:hover { border-color: #d8a75f; background: rgba(6, 17, 31, .78); } .hero .hero-trustline, html.light .hero .hero-trustline { border-color: rgba(169, 195, 218, .24); color: #c3cede; background: rgba(7, 21, 37, .82); } .hero-trustline .eng-icon { color: #54d0a5; } .hero-right { min-height: 485px; align-items: center; } .bim-console { width: min(100%, 670px); border-color: rgba(101, 188, 214, .32); background: rgba(5, 15, 28, .91); box-shadow: 0 32px 80px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .08); } .bim-viewport { height: clamp(350px, 39svh, 390px); } .hero-assurance { position: relative; z-index: 4; margin-top: 12px; border-top: 1px solid rgba(188, 208, 228, .16); background: rgba(5, 17, 31, .88); backdrop-filter: blur(13px); } .hero-assurance-grid { min-height: 82px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; } .hero-assurance-item { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 13px; padding: 13px 26px; color: #f3f6fa; } .hero-assurance-item:first-child { padding-left: 0; } .hero-assurance-item + .hero-assurance-item { border-left: 1px solid rgba(188, 208, 228, .18); } .hero-assurance-item > span { width: 40px; height: 40px; display: grid; place-items: center; color: #e9b668; font-size: 1.1rem; } .hero-assurance-item strong { display: block; color: #f4f7fb; font-size: .78rem; line-height: 1.3; } .hero-assurance-item small { display: block; margin-top: 3px; color: #9fb0c3; font-size: .66rem; line-height: 1.4; } .hero .scroll-hint { display: none; } .hero + .marquee { display: none; } @media (min-width: 1201px) { .hero > .wrap { padding-inline: 0; } } /* Catalog becomes an intentionally light editorial surface in both themes. */ .quick-shop, html.light .quick-shop { border-color: #dfe6ed; background: #f5f7fa; color: #0d2139; } .quick-shop.section.tight { padding-top: 28px; } .quick-shop-head.reveal { opacity: 1 !important; transform: none !important; } .quick-shop .eyebrow { border-color: #e2c89e; color: #9a570b; background: #fff9f0; } .quick-shop-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 34px; } .quick-shop-head > div { max-width: 820px; } .quick-shop-head .sec-title { color: #102038; font-size: clamp(2.1rem, 3.5vw, 3.15rem); } .quick-shop-head .sec-title .grad { color: #102038; background: none; -webkit-text-fill-color: #102038; } .quick-shop-head .sec-sub { max-width: 720px; margin-top: 14px; color: #52657b; font-size: .94rem; } .quick-shop-catalog { min-height: 46px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 3px; color: #155f80; font-size: .76rem; font-weight: 800; } .quick-shop-catalog:hover { gap: 14px; color: #9a570b; } .quick-shop-grid { gap: 18px; margin-top: 35px; } .quick-shop .quick-product { min-height: 365px; gap: 16px; border-color: #d6dfe8; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(20, 47, 73, .07); } .quick-shop .quick-product:hover { border-color: #8fb5c8; box-shadow: 0 16px 32px rgba(20, 47, 73, .11); } .quick-shop .quick-product-featured { border-color: #dbc099; background: #fff; } .quick-shop .quick-product-custom { background: #fff; } .quick-shop .quick-product-media { height: 142px; border-color: #dfe6ed; background: #e8edf2; } .quick-shop .quick-product-media::after { background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, .32)); } .quick-shop .quick-product-media img { filter: saturate(.85) contrast(1.02); } .quick-shop .quick-product-media.product-ui img { filter: saturate(.86) contrast(1.02) brightness(.98); } .quick-shop .quick-product-icon { border-color: #d8e2eb; box-shadow: none; } .quick-shop .quick-product-badge { color: #8c500d; background: #fff4e2; } .quick-shop .quick-product-meta { color: #68798d; } .quick-shop .quick-product h3 { color: #102038; } .quick-shop .quick-product p { color: #52657b; } .quick-shop .quick-product-bottom { border-color: #dfe6ed; } .quick-shop .quick-product-bottom small { color: #718196; } .quick-shop .quick-product-bottom strong { color: #94540d; } .quick-shop .quick-actions > a { border-color: #d7e0e8; color: #355069; background: #f5f8fa; } .quick-shop .quick-buy { background: #0d6b86; color: #fff; } .quick-shop .quick-tags span { border-color: #d7e0e8; color: #4c6077; background: #f5f8fa; } .quick-shop .quick-product-custom > .btn { border-color: #cbd9e4; color: #173c58; background: #f6f9fb; } .quick-shop .quick-trust { color: #617287; } .quick-shop .quick-trust > span > i { color: #117354; } @media (max-width: 1280px) { .nav-products-menu { width: min(930px, calc(100vw - 34px)); } .nav-mega-layout { grid-template-columns: minmax(185px, .72fr) minmax(375px, 1.46fr) minmax(255px, 1fr); } .nav-mega-column { padding-inline: 15px; } .hero-grid { grid-template-columns: minmax(360px, .78fr) minmax(480px, 1.22fr); } } @media (max-width: 1200px) { .nav-products-menu { left: 50%; } } @media (max-width: 1120px) { .hero-grid { grid-template-columns: minmax(340px, .82fr) minmax(430px, 1.18fr); gap: 28px; } .hero h1 { font-size: clamp(3.15rem, 5.3vw, 4.2rem); } .hero-assurance-item { padding-inline: 18px; } } @media (max-width: 1015px) { nav#nav, nav#nav.scrolled, html.light nav#nav, html.light nav#nav.scrolled { padding-block: 5px; } .hero { padding-top: 130px; } .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-left { max-width: 700px; } .hero-right { width: 100%; max-width: 720px; margin-inline: auto; } .hero-assurance { margin-top: 38px; } .quick-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .topbar { min-height: 36px; } .hero { min-height: 0; padding-top: 120px; } .hero-grid { min-height: 0; } .hero-left { text-align: left; } .hero h1 { max-width: 10ch; font-size: clamp(2.75rem, 13vw, 3.65rem); } .hero-desc { font-size: .94rem; } .hero-ctas { display: grid; grid-template-columns: minmax(0, 1fr); } .hero-ctas .btn { width: 100%; } .hero-trustline { align-items: flex-start; line-height: 1.45; } .hero-right { min-height: 0; margin-top: 22px; } .bim-viewport { height: 360px; } .hero-assurance { margin-top: 30px; } .hero-assurance-grid { grid-template-columns: minmax(0, 1fr); padding-block: 8px; } .hero-assurance-item, .hero-assurance-item:first-child { padding: 12px 4px; } .hero-assurance-item + .hero-assurance-item { border-top: 1px solid rgba(188, 208, 228, .16); border-left: 0; } .quick-shop-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; } .quick-shop-catalog { justify-self: start; } .quick-shop-grid { grid-template-columns: minmax(0, 1fr); } .quick-shop .quick-product { min-height: 0; } .quick-shop .quick-product-media { height: 150px; } } @media (max-width: 430px) { .hero h1 { font-size: clamp(2.55rem, 12.5vw, 3.15rem); } .hero .eyebrow { font-size: .62rem; } .hero-assurance-item { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; } .quick-shop .quick-product-media { height: 132px; } } @media (prefers-reduced-motion: reduce) { .nav-featured-visual img, .nav-featured-action i, .quick-shop-catalog { transition: none !important; } } /* ============================================================================= 46 · PROFESSIONAL CHECKOUT & TECHNICAL ICON SYSTEM · 2026-09-01 A compact, verifiable purchase flow with one consistent BIM icon language. ============================================================================= */ .addin-feat .fi .eng-icon, .price-card .pc-ic .eng-icon { width: 29px; height: 29px; } .price-card .pc-ic > img { width: 31px; height: 31px; object-fit: contain; } .hero-assurance-item .eng-icon { width: 25px; height: 25px; } .quick-trust > span { display: inline-flex; align-items: center; gap: 7px; } .quick-trust .eng-icon { width: 17px; height: 17px; flex: 0 0 auto; color: #117354; } .checkout-kicker .eng-icon { width: 16px; height: 16px; } /* Trust appears before asking for a payment decision. */ .checkout-confidence { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 20px; margin-top: 15px; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--ink-2) 13%, var(--line)); } .checkout-confidence > span { display: inline-flex; align-items: center; gap: 7px; color: var(--checkout-copy); font-size: .72rem; font-weight: 750; } .checkout-confidence .eng-icon { width: 17px; height: 17px; color: var(--green-lt); } .checkout-shell[data-checkout-stage="2"] .checkout-confidence, .checkout-shell[data-checkout-stage="3"] .checkout-confidence { display: none; } .checkout-shell[data-checkout-stage="2"] .checkout-head, .checkout-shell[data-checkout-stage="3"] .checkout-head { padding-block: 18px 15px; } /* Order context remains visible while switching payment methods. */ .checkout-order-brief { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 13px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--line)); border-radius: 14px; background: linear-gradient(105deg, color-mix(in srgb, var(--cyan-soft) 42%, var(--bg-elev)), color-mix(in srgb, var(--bg-elev) 78%, var(--card))); } .checkout-order-brief-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--cyan-soft) 76%, var(--bg-elev)); color: var(--cyan-lt); } .checkout-order-brief-icon .eng-icon { width: 23px; height: 23px; } .checkout-order-brief > div { min-width: 0; } .checkout-order-brief small { display: block; color: var(--checkout-muted); font-size: .65rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; } .checkout-order-brief > div > strong { display: block; margin-top: 3px; overflow: hidden; color: var(--ink); font: 760 .84rem/1.3 var(--font-title); text-overflow: ellipsis; white-space: nowrap; } .checkout-order-brief-total { padding-left: 17px; border-left: 1px solid color-mix(in srgb, var(--ink-2) 14%, var(--line)); text-align: right; } .checkout-order-brief-total small { letter-spacing: 0; text-transform: none; } .checkout-order-brief-total strong { display: block; margin-top: 3px; color: var(--gold-lt); font: 820 1.2rem/1 var(--font-title); font-variant-numeric: tabular-nums; } .payment-method { cursor: pointer; transition: transform 170ms var(--ease), border-color 170ms var(--ease), background-color 170ms var(--ease), box-shadow 170ms var(--ease); } .payment-method:hover { transform: translateY(-1px); } .payment-method.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 24%, transparent), 0 9px 22px rgba(0, 0, 0, .08); } .method-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; margin-top: 4px; } .method-subline small { margin: 0; } .method-subline em { padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius: 99px; background: var(--green-soft); color: var(--green-lt); font: 760 .55rem/1 var(--font-mono); font-style: normal; letter-spacing: .035em; text-transform: uppercase; } .yape-mark .eng-icon { width: 22px; height: 22px; } .qr-caption .eng-icon { width: 18px; height: 18px; color: #a43fba; } .payment-security-note { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; margin-top: 13px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--green) 23%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--green-soft) 54%, var(--bg-elev)); } .payment-security-note > .eng-icon { width: 25px; height: 25px; margin-inline: auto; color: var(--green-lt); } .payment-security-note p { margin: 0; } .payment-security-note strong, .payment-security-note span { display: block; } .payment-security-note strong { color: var(--ink); font: 760 .78rem/1.3 var(--font-title); } .payment-security-note span { margin-top: 3px; color: var(--checkout-muted); font-size: .7rem; line-height: 1.45; } /* Final confirmation: compact purchase summary plus one unambiguous action. */ .checkout-confirm { padding: 0; border: 0; background: transparent; } .checkout-confirm-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(285px, .8fr); gap: 16px; align-items: stretch; } .confirm-order-card, .checkout-confirm-action { border: 1px solid color-mix(in srgb, var(--ink-2) 15%, var(--line)); border-radius: 17px; background: color-mix(in srgb, var(--bg-elev) 74%, var(--card)); box-shadow: 0 14px 34px rgba(0, 0, 0, .09); } .confirm-order-card { position: relative; min-height: 352px; display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: center; gap: 16px; overflow: hidden; padding: 20px; background: radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 16rem), linear-gradient(135deg, color-mix(in srgb, var(--bg-elev) 88%, var(--bg-2)), color-mix(in srgb, var(--bg-2) 70%, var(--card))); } .confirm-order-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .38; background-image: linear-gradient(color-mix(in srgb, var(--cyan) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cyan) 10%, transparent) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%); mask-image: linear-gradient(90deg, #000, transparent 55%); } .confirm-order-card picture, .confirm-order-copy { position: relative; z-index: 1; } .confirm-order-card picture { width: 176px; height: 220px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--cyan) 22%, var(--line)); border-radius: 16px; background: radial-gradient(circle, color-mix(in srgb, var(--cyan-soft) 70%, transparent), transparent 68%); } .confirm-order-card picture img { width: 164px; height: 164px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .24)); } .confirm-order-copy { min-width: 0; } .confirm-order-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--green-lt); font: 760 .65rem/1.3 var(--font-mono); letter-spacing: .045em; text-transform: uppercase; } .confirm-order-kicker .eng-icon { width: 17px; height: 17px; } .confirm-order-copy > strong { display: block; margin-top: 8px; color: var(--ink); font: 820 1.18rem/1.15 var(--font-title); letter-spacing: -.02em; } #checkoutConfirmItems { display: grid; gap: 6px; margin: 15px 0; padding: 0; list-style: none; } #checkoutConfirmItems li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 38px; padding: 5px 7px 5px 5px; border: 1px solid color-mix(in srgb, var(--ink-2) 11%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--bg) 46%, transparent); color: var(--checkout-copy); font-size: .71rem; } #checkoutConfirmItems li > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #checkoutConfirmItems li > b { color: var(--ink); font-size: .7rem; font-variant-numeric: tabular-nums; } .confirm-item-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--cyan-soft); color: var(--cyan-lt); } .confirm-item-icon .eng-icon { width: 16px; height: 16px; } .confirm-item-icon img { width: 18px; height: 18px; object-fit: contain; } .confirm-items-empty { grid-template-columns: 1fr !important; color: var(--checkout-muted) !important; } .confirm-order-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, var(--ink-2) 13%, var(--line)); } .confirm-order-facts > span { min-width: 0; padding-top: 12px; } .confirm-order-facts > span + span { padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--ink-2) 13%, var(--line)); } .confirm-order-facts small, .confirm-order-facts b { display: block; } .confirm-order-facts small { color: var(--checkout-muted); font-size: .62rem; font-weight: 700; } .confirm-order-facts b { margin-top: 4px; overflow: hidden; color: var(--ink); font: 790 .78rem/1.25 var(--font-title); text-overflow: ellipsis; white-space: nowrap; } .confirm-order-facts .payment-amount-value { color: var(--gold-lt); font-size: 1rem; } .checkout-confirm-action { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 22px; } .checkout-confirm-action .buyer-field { margin: 0; } .checkout-confirm-action .buyer-field input { background: color-mix(in srgb, var(--bg) 68%, var(--bg-elev)); } .checkout-confirm-action .receipt-notice { margin: 15px 0; border: 1px solid rgba(37, 211, 102, .18); } .checkout-confirm-action .checkout-send { min-height: 54px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; font-size: .8rem; } .checkout-confirm-action .checkout-send:hover { transform: translateY(-1px); } .checkout-confirm-action .checkout-privacy { align-items: flex-start; line-height: 1.45; text-align: left; } .checkout-confirm-action .checkout-privacy .eng-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--green-lt); } html.light .checkout-order-brief, html.light .confirm-order-card, html.light .checkout-confirm-action { box-shadow: 0 14px 32px rgba(23, 53, 77, .08); } html.light .checkout-order-brief-total strong, html.light .confirm-order-facts .payment-amount-value { color: #8b530d; } html.light .method-subline em, html.light .confirm-order-kicker { color: #056346; } html.light .payment-security-note { border-color: rgba(5, 99, 70, .2); } @media (max-width: 800px) { .checkout-confirm-layout { grid-template-columns: minmax(0, 1fr); } .confirm-order-card { min-height: 0; grid-template-columns: 132px minmax(0, 1fr); } .confirm-order-card picture { width: 132px; height: 164px; } .confirm-order-card picture img { width: 124px; height: 124px; } } @media (max-width: 700px) { .checkout-confidence { display: none; } .checkout-order-brief { grid-template-columns: 39px minmax(0, 1fr) auto; padding: 10px 11px; } .checkout-order-brief-icon { width: 38px; height: 38px; } .checkout-order-brief-total { padding-left: 10px; } .checkout-order-brief-total strong { font-size: 1rem; } .method-subline em { display: none; } .payment-security-note { margin-top: 10px; } .checkout-confirm-action { padding: 18px; } .checkout-confirm-action .buyer-field { order: 1; } .checkout-confirm-action .checkout-send { order: 2; margin-top: 14px; } .checkout-confirm-action .receipt-notice { order: 3; margin: 12px 0 0; } .checkout-confirm-action .checkout-privacy { order: 4; } } @media (max-width: 520px) { .checkout-order-brief { grid-template-columns: 38px minmax(0, 1fr); } .checkout-order-brief-total { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 9px 0 0; border-top: 1px solid color-mix(in srgb, var(--ink-2) 13%, var(--line)); border-left: 0; text-align: left; } .checkout-order-brief-total strong { margin: 0; } .payment-security-note { grid-template-columns: 30px minmax(0, 1fr); padding: 10px; } .payment-security-note > .eng-icon { width: 22px; height: 22px; } .confirm-order-card { grid-template-columns: 94px minmax(0, 1fr); gap: 12px; padding: 13px; } .confirm-order-card picture { width: 94px; height: 128px; border-radius: 13px; } .confirm-order-card picture img { width: 88px; height: 88px; } #checkoutConfirmItems { margin-block: 11px; } #checkoutConfirmItems li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 7px; font-size: .67rem; } .confirm-item-icon { width: 25px; height: 25px; } .confirm-order-facts { grid-template-columns: minmax(0, 1fr); } .confirm-order-facts > span + span { margin-top: 8px; padding: 8px 0 0; border-top: 1px solid color-mix(in srgb, var(--ink-2) 13%, var(--line)); border-left: 0; } .checkout-confirm-action { padding: 15px; } } @media (max-width: 375px) { .checkout-order-brief-icon { display: none; } .checkout-order-brief { grid-template-columns: minmax(0, 1fr); } .payment-method { min-height: 82px; } .payment-method b { font-size: .66rem; } .confirm-order-card { grid-template-columns: 1fr; } .confirm-order-card picture { display: none; } } @media (prefers-reduced-motion: reduce) { .payment-method, .checkout-confirm-action .checkout-send { transition: none !important; transform: none !important; } } /* Pricing cascade anchors: keep the decision cards above legacy tier defaults. */ .addin-pricing>.pricing-tier{padding:36px 32px;background:linear-gradient(155deg,color-mix(in srgb,var(--card) 96%,var(--cyan) 4%),var(--card));border-color:color-mix(in srgb,var(--line) 86%,var(--cyan) 14%)} .addin-pricing>.pricing-tier.current-offer{background:linear-gradient(155deg,rgba(224,168,94,.10),rgba(11,25,42,.96) 38%,rgba(7,20,35,.98))!important;border-color:rgba(224,168,94,.62)!important} html.light .addin-pricing>.pricing-tier{background:linear-gradient(155deg,#fff,#f6f9fc);border-color:#cfdae6} html.light .addin-pricing>.pricing-tier.current-offer{background:linear-gradient(155deg,#fffaf1,#fff 42%,#f7fafc)!important;border-color:rgba(168,104,20,.42)!important} @media (max-width:900px){.addin-pricing>.pricing-tier{padding:34px 27px}} @media (max-width:560px){.addin-pricing>.pricing-tier{padding:32px 18px 22px}}