/* OrbitSwap - tema Mac OS 9 "Platinum" (publicado 18/09). Estrutura comum (base-*) + tema-os9. Carregado DEPOIS do style.css e do cinematic-bat.css: empata em especificidade e ganha pela ordem. Nenhum script foi tocado; todas as animacoes do site continuam. */ /* ===== base-vars.css ===== */ /* RETRO BASE - variaveis (PROTOTIPO LOCAL, nunca vai ao servidor). Valores padrao = Windows 98. Cada tema so troca o que precisa. */ :root { --face:#c0c0c0; --hi:#fff; --lt:#dfdfdf; --sh:#808080; --dk:#0a0a0a; --ink:#000; --ink2:#222; --ink3:#444; --accent:#000080; --brand-ink:#8a2e00; --raised: inset -1px -1px var(--dk), inset 1px 1px var(--lt), inset -2px -2px var(--sh), inset 2px 2px var(--hi); --sunken: inset -1px -1px var(--hi), inset 1px 1px var(--sh), inset -2px -2px var(--lt), inset 2px 2px var(--dk); --pressed: inset -1px -1px var(--hi), inset 1px 1px var(--dk), inset -2px -2px var(--lt), inset 2px 2px var(--sh); --win-bg: var(--face); --tile-bg: var(--win-bg); --win-shadow: var(--raised); --win-drop: 0 30px 60px -28px rgba(0,0,0,.95); --win-radius: 0px; --win-pad-top: 41px; --title-bg: linear-gradient(90deg,#000080,#1084d0); --title-bg-main: var(--title-bg); --title-fg:#fff; --title-fg-main: var(--title-fg); --title-font: 600 13px/22px var(--f-ui); --title-ls: .4px; --title-h:22px; --title-top:3px; --title-left:3px; --title-right:3px; --title-radius:0; --title-pad: 0 60px 0 6px; --title-justify: flex-start; --title-transform: none; --title-shadow: none; --title-box: none; --tb-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='14' shape-rendering='crispEdges'%3E%3Cdefs%3E%3Cg id='k'%3E%3Crect width='16' height='14' fill='%230a0a0a'/%3E%3Crect width='15' height='13' fill='%23dfdfdf'/%3E%3Crect x='1' y='1' width='14' height='12' fill='%23808080'/%3E%3Crect x='1' y='1' width='13' height='11' fill='%23fff'/%3E%3Crect x='2' y='2' width='12' height='10' fill='%23c0c0c0'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23k'/%3E%3Cuse href='%23k' x='16'/%3E%3Cuse href='%23k' x='36'/%3E%3Crect x='4' y='9' width='6' height='2'/%3E%3Crect x='20' y='2' width='9' height='9'/%3E%3Crect x='21' y='4' width='7' height='6' fill='%23c0c0c0'/%3E%3Cpath d='M41 3l7 7M48 3l-7 7' stroke='%23000' stroke-width='1.6' shape-rendering='auto'/%3E%3C/svg%3E") no-repeat right 3px center; --tb-b: none; --t-widget:"OrbitSwap.exe \2014 Exchange"; --t-step:"STEP"; --t-adv1:"anonymity.exe"; --t-adv2:"no-limits.exe"; --t-adv3:"incognito.exe"; --t-api:"C:\\ORBIT\\API.EXE"; --t-mail:"New Message \2014 OrbitMail"; --t-tor:"Tor Mirror \2014 OrbitSwap.onion"; --grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M11 1L1 11M11 5L5 11M11 9L9 11' stroke='%23fff'/%3E%3Cpath d='M12 1L1 12M12 5L5 12M12 9L9 12' stroke='%23808080'/%3E%3C/svg%3E") no-repeat; --scan: rgba(255,255,255,.35); --spot: rgba(255,255,255,.3); --field-bg:#fff; --field-fg:#000; --field-fg2: var(--field-fg); --field-shadow: var(--sunken); --field-radius:0px; --field-font: 400 30px/1 var(--f-px); --lcd-glow: none; --ro-bg: var(--lt); --ro-fg: var(--accent); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='36' shape-rendering='crispEdges'%3E%3Crect width='16' height='36' fill='%230a0a0a'/%3E%3Crect width='15' height='35' fill='%23dfdfdf'/%3E%3Crect x='1' y='1' width='14' height='34' fill='%23808080'/%3E%3Crect x='1' y='1' width='13' height='33' fill='%23fff'/%3E%3Crect x='2' y='2' width='12' height='32' fill='%23c0c0c0'/%3E%3Cpath d='M4 16h7v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1z'/%3E%3C/svg%3E"); --select-bg: var(--field-bg); --select-fg: var(--field-fg); --option-bg:#fff; --option-fg:#000; --btn-bg: var(--face); --btn-fg:#000; --btn-shadow: var(--raised); --btn-press: var(--pressed); --btn-radius:0px; --btn-font: 700 calc(13px * var(--ui-k))/1.1 var(--f-ui); --btn-ls:1.5px; --btn-tshadow:none; --btn-hover-fg: var(--accent); --btn-hover-bg: var(--btn-bg); --primary-bg: var(--btn-bg); --primary-fg: var(--btn-fg); --primary-ring: 0 0 0 1px #000; --primary-shadow: var(--btn-shadow); --primary-press: var(--btn-press); --primary-tshadow:none; --primary-radius: var(--btn-radius); --primary-glow: 0 12px 22px -12px rgba(255,123,58,.9); --group-border: 1px solid var(--sh); --group-shadow: 1px 1px 0 var(--hi), inset 1px 1px 0 var(--hi); --group-radius:0px; --focus-c: var(--accent); --legend-bg: var(--face); --legend-fg:#000; --legend-radius:0px; --lcd-bg:#fff; --lcd-fg:#000; --lcd-fg2: var(--accent); --lcd-shadow: var(--sunken); --lcd-font: 400 calc(20px * var(--px-k))/1 var(--f-px); --tip-bg:#ffffe1; --tip-fg:#000; --tip-border:1px solid #000; --tip-radius:0px; --tip-shadow: 3px 3px 0 rgba(0,0,0,.55); --bar-bg: var(--face); --bar-fg2:#333; --bar-shadow: inset 0 1px var(--hi), inset 0 -1px var(--dk), inset 0 -2px var(--sh); --logo-bg: var(--face); --logo-shadow: var(--raised); --logo-press: var(--pressed); --logo-radius:0px; --logo-mark-radius:2px; --logo-fg:#000; --logo-accent: var(--accent); --nav-gap:4px; --nav-fg:#000; --nav-bg: var(--face); --nav-shadow: var(--raised); --nav-radius:0px; --nav-hover-fg: var(--accent); --nav-hover-bg: var(--nav-bg); --nav-press: var(--pressed); --tabs-line: 1px solid var(--sh); --tabs-line-shadow: 0 1px 0 var(--hi); --tab-bg: var(--face); --tab-radius: 3px 3px 0 0; --tab-shadow: inset 1px 1px var(--hi), inset -1px 0 var(--dk), inset -2px 0 var(--sh); --toggle-on-bg: repeating-conic-gradient(#c0c0c0 0% 25%, #fff 0% 50%) 0 0 / 2px 2px; --toggle-on-fg: var(--accent); --ph: var(--sh); --check-radius:0px; --win-link:#0000ee; --check-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v3h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-3h1v1h1v1h1v-1h1v-1h1v-1h1z'/%3E%3C/svg%3E"); --status-bg: var(--face); --status-shadow: inset 0 1px var(--sh), inset 0 2px var(--hi); --brand-bar:#FF7B3A; --swap-radius: var(--btn-radius); --well-bg: radial-gradient(circle at 50% 40%, #0d1a3a, #000 70%); --well-shadow: var(--sunken); --well-radius:0px; --ring: rgba(0,0,128,.45); --icon-filter: none; --pair-hover-border: rgba(255,255,255,.7); --pair-radius:0px; --pair-bg: var(--face); --pair-shadow: var(--raised); --pair-fg: var(--accent); --page-ink:#fff; --page-muted:#9a9aa3; --page-muted2:#c7cedb; --sel-bg:#000080; --sel-fg:#fff; --hover-tint: rgba(0,0,128,.08); --faq-open-bg: var(--title-bg); --faq-open-fg: var(--title-fg); --win-h-font: var(--f-px); --win-h-weight:400; --win-h-size: clamp(2.4rem, 4vw, 3.4rem); --win-h-shadow: 2px 2px 0 var(--hi); --con-bg:#000; --con-fg:#c0c0c0; --con-val:#ffff55; --con-glow:none; --con-prompt:"\A\A C:\\ORBIT>_"; --hero-font: var(--f-px); --hero-weight:400; --hero-style: normal; --hero-size: clamp(3.6rem, 9vw, 7.6rem); --hero-lh:.86; --hero-ls:3px; --hero-color:#fff; --hero-shadow: 3px 3px 0 #1084d0, 6px 6px 0 #000080; --hero2-bg: linear-gradient(180deg,#ffe08a 0%,#FF7B3A 55%,#b33a00 100%); --hero2-filter: drop-shadow(3px 3px 0 #000080) drop-shadow(2px 2px 0 #000); --hero-sub:#c9ced8; --sec-font: var(--f-px); --sec-weight:400; --sec-size: clamp(2.8rem, 5.6vw, 4.4rem); --sec-ls:3px; --sec-color:#fff; --sec-shadow: 2px 2px 0 #1084d0, 4px 4px 0 #000080; --sec-accent:#FF7B3A; --sec-accent-shadow: 2px 2px 0 #7a2800, 4px 4px 0 #000; --cursor:"_"; --link:#9fc5ff; --link-hover:#fff; --foot-bg: rgba(4,4,6,.86); --foot-top: 2px solid var(--face); --foot-shadow: inset 0 1px var(--hi); --accent-on-btn: var(--accent); --menu-bg: var(--face); --menu-fg: var(--ink); --shine: rgba(255,255,255,.55); --progress: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px); --sb-thumb:#c0c0c0; --sb-track:#dfdfdf; --f-ui: 'Pixelify Sans', Tahoma, Verdana, sans-serif; --f-sys: Tahoma, Verdana, 'Segoe UI', sans-serif; --f-px: 'VT323', 'Courier New', monospace; --ui-k:1; --sys-k:1; --px-k:1; --f-display: var(--hero-font); --f-tech: var(--f-ui); --f-body: var(--f-sys); --f-mono: var(--f-px); --radius:0px; --radius-sm:0px; } /* ===== base-rules1.css ===== */ /* RETRO BASE - regras 1/2: escopo, titulos, header, botoes, hero, widget */ .site-header, .hero-stat, .widget, .step, .adv-card, .api-card, .contact-card, .faq-item, .partner-card, .tor-card { --text: var(--ink); --muted: var(--ink2); --dim: var(--ink3); --steel: var(--ink3); --holo: var(--accent); --holo-bright: var(--accent); --blue: var(--accent); --line: var(--sh); --line-2: var(--sh); --line-holo: var(--sh); --space-2: var(--field-bg); --panel: var(--face); --brand-bright: var(--brand-ink); color: var(--ink); } :is(.site-header, .hero-stat, .widget, .step, .adv-card, .api-card, .contact-card, .faq-item, .partner-card, .tor-card) .text-bat { text-shadow: none; } ::selection { background: var(--sel-bg); color: var(--sel-fg); } :focus-visible { outline: 1px dotted #fff; outline-offset: 2px; border-radius: 0; } html { scrollbar-color: var(--sb-thumb) var(--sb-track); } .scroll-progress { height: 5px; background: var(--progress); box-shadow: none; } /* ---------- barra de titulo ---------- */ .widget > .corner.tl, .step .step-icon, .adv-card::after, .api-card::after, .contact-card::after, .tor-card::before { position: absolute; top: var(--title-top); left: var(--title-left); right: var(--title-right); width: auto; height: var(--title-h); margin: 0; display: flex; align-items: center; justify-content: var(--title-justify); gap: 6px; padding: var(--title-pad); border: 0; border-radius: var(--title-radius); background: var(--tb-a), var(--tb-b), var(--title-bg); box-shadow: var(--title-box); color: var(--title-fg); font: var(--title-font); letter-spacing: var(--title-ls); text-align: left; text-transform: var(--title-transform); text-shadow: var(--title-shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; filter: none; z-index: 2; pointer-events: none; } .widget > .corner.tl { background: var(--tb-a), var(--tb-b), var(--title-bg-main); color: var(--title-fg-main); } /* ---------- header ---------- */ .site-header, .site-header.scrolled { background: var(--bar-bg); border-bottom: 0; padding: 5px 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--bar-shadow); } .site-header.scrolled { padding: 3px 0; box-shadow: var(--bar-shadow), 0 8px 18px -10px rgba(0,0,0,.9); } .header-inner { gap: 10px; } .site-header .logo { background: var(--logo-bg); box-shadow: var(--logo-shadow); border-radius: var(--logo-radius); padding: 3px 10px 3px 4px; gap: 8px; } .site-header .logo:active { box-shadow: var(--logo-press); } .site-header .logo .logo-mark.orbit-glow { width: 34px; height: 34px; border: 0; border-radius: var(--logo-mark-radius); } .logo-text { font: 700 calc(17px * var(--ui-k))/1 var(--f-ui); letter-spacing: 1px; color: var(--logo-fg); } .logo-accent { color: var(--logo-accent); text-shadow: none; } .logo-tagline { font: calc(9px * var(--sys-k))/1 var(--f-sys); letter-spacing: 1px; color: var(--bar-fg2); margin-top: 3px; } .nav { gap: var(--nav-gap); font: 600 calc(12px * var(--ui-k))/1 var(--f-ui); letter-spacing: 1px; } .nav a { color: var(--nav-fg); background: var(--nav-bg); box-shadow: var(--nav-shadow); border-radius: var(--nav-radius); padding: 8px 12px; } .nav a:hover { color: var(--nav-hover-fg); background: var(--nav-hover-bg); } .nav a:active { box-shadow: var(--nav-press); } .nav a::after { background: var(--accent); box-shadow: none; left: 4px; bottom: 4px; max-width: calc(100% - 8px); height: 1px; } .site-header .btn { padding: 8px 14px; font-size: calc(12px * var(--ui-k)); } .nav-toggle { width: 40px; height: 36px; border: 0; border-radius: var(--btn-radius); background: var(--btn-bg); box-shadow: var(--btn-shadow); } .nav-toggle span { background: var(--btn-fg); border-radius: 0; } .nav-open .nav-toggle { box-shadow: var(--btn-press); } /* ---------- botoes ---------- */ .btn { border: 0; border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-fg); font: var(--btn-font); letter-spacing: var(--btn-ls); text-shadow: var(--btn-tshadow); box-shadow: var(--btn-shadow); } .btn-primary, .btn-ghost { border-color: transparent; } .btn-ghost { background: var(--btn-bg); color: var(--btn-fg); } .btn-primary { background: var(--primary-bg); color: var(--primary-fg); border-radius: var(--primary-radius); text-shadow: var(--primary-tshadow); box-shadow: var(--primary-ring), var(--primary-shadow); } .btn-primary:hover { box-shadow: var(--primary-ring), var(--primary-shadow), var(--primary-glow); } .btn-ghost:hover { color: var(--btn-hover-fg); background: var(--btn-hover-bg); box-shadow: var(--btn-shadow), 0 10px 20px -12px rgba(0,0,0,.9); } .btn:active { box-shadow: var(--btn-press); transform: translate(1px, 1px); } .btn-primary:active { box-shadow: var(--primary-ring), var(--primary-press); transform: translate(1px, 1px); } .btn-primary:disabled { opacity: 1; color: var(--sh); text-shadow: 1px 1px 0 var(--hi); } .btn::after { background: linear-gradient(110deg, transparent 30%, var(--shine) 50%, transparent 70%); } .btn-block { padding: 13px 20px; font-size: calc(15px * var(--ui-k)); } /* ---------- hero ---------- */ .hero-eyebrow { font: calc(12px * var(--sys-k))/1.2 var(--f-sys); letter-spacing: 1px; color: var(--tip-fg); background: var(--tip-bg); border: var(--tip-border); border-radius: var(--tip-radius); padding: 5px 10px; box-shadow: var(--tip-shadow); } .hero-stack { font-family: var(--hero-font); font-weight: var(--hero-weight); font-style: var(--hero-style); font-size: var(--hero-size); line-height: var(--hero-lh); letter-spacing: var(--hero-ls); color: var(--hero-color); text-shadow: var(--hero-shadow); } .hero-stack span { margin: 2px 0; } .hero-stack span:nth-child(2) { background: var(--hero2-bg); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: var(--hero2-filter); } .hero-sub { font: calc(16px * var(--sys-k))/1.6 var(--f-sys); color: var(--hero-sub); } .hero-stats { gap: 10px; } .hero-stat { background: var(--tile-bg); box-shadow: var(--win-shadow); border-radius: var(--win-radius); padding: 6px 12px 8px; min-width: 100px; } .hero-stat b { font: 400 calc(34px * var(--px-k))/1 var(--f-px); color: var(--accent); } .hero-stat b small { font-size: .62em; } .hero-stat span { font: calc(11px * var(--sys-k))/1.2 var(--f-sys); letter-spacing: 1px; color: var(--ink2); } /* ---------- widget ---------- */ .widget { --wp: 22px; background: var(--win-bg); border: 0; border-radius: var(--win-radius); padding: var(--win-pad-top) var(--wp) var(--wp); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--win-shadow), var(--win-drop); } .widget::before { display: none; } .widget::after { background: linear-gradient(180deg, var(--scan), transparent); } .widget > .corner { opacity: 1; border: 0; } .widget > .corner.tl::before { content: var(--t-widget); } .widget > .corner.tr, .widget > .corner.bl { display: none; } .widget > .corner.br { right: 4px; bottom: 4px; top: auto; left: auto; width: 12px; height: 12px; background: var(--grip); z-index: 2; } .widget-head { margin-bottom: 12px; } .widget-tabs { gap: 2px; margin-bottom: 0; padding-left: 2px; border-bottom: var(--tabs-line); box-shadow: var(--tabs-line-shadow); } .widget-tab { font: 600 calc(15px * var(--ui-k))/1 var(--f-ui); letter-spacing: 1px; color: var(--ink); background: var(--tab-bg); padding: 7px 12px 5px; box-shadow: var(--tab-shadow); border-radius: var(--tab-radius); } .widget-tab.active::after { display: none; } .widget-step { font: 400 calc(20px * var(--px-k))/1 var(--f-px); color: var(--lcd-fg2); background: var(--lcd-bg); box-shadow: var(--lcd-shadow); border-radius: var(--field-radius); padding: 3px 8px; margin-bottom: 3px; align-self: center; text-shadow: var(--lcd-glow); } .widget-step::before { content: "STEP "; opacity: .7; } .widget-instruction { margin-top: 10px; font: calc(12.5px * var(--sys-k))/1.5 var(--f-sys); color: var(--ink2); } .swap { gap: 16px; } .field { position: relative; background: transparent; border: var(--group-border); border-radius: var(--group-radius); box-shadow: var(--group-shadow); padding: 14px 10px 10px; margin-top: 6px; } .field:focus-within { border-color: var(--focus-c); box-shadow: var(--group-shadow); } .field .field-label { position: absolute; top: -8px; left: 8px; margin: 0; padding: 0 4px; background: var(--legend-bg); border-radius: var(--legend-radius); font: 700 calc(11px * var(--sys-k))/16px var(--f-sys); letter-spacing: .5px; color: var(--legend-fg); } .field-row { gap: 6px; } .field input { background: var(--field-bg); box-shadow: var(--field-shadow); border-radius: var(--field-radius); height: 40px; padding: 2px 8px 0; font: var(--field-font); color: var(--field-fg); letter-spacing: 1px; text-shadow: var(--lcd-glow); } .field input[readonly] { background: var(--ro-bg); color: var(--ro-fg); } .field select, .field select:hover { -webkit-appearance: none; appearance: none; height: 40px; border: 0; border-radius: var(--field-radius); padding: 0 24px 0 6px; background: var(--select-arrow) no-repeat right 2px center, var(--select-bg); box-shadow: var(--field-shadow); font: 600 calc(13px * var(--sys-k))/1 var(--f-sys); letter-spacing: 0; color: var(--select-fg); } .field select option { background: var(--option-bg); color: var(--option-fg); } .amount-range { margin: 0 4px; font: 400 calc(17px * var(--px-k))/1.1 var(--f-px); color: var(--ink3); } .swap-btn { width: 38px; height: 38px; border: 0; border-radius: var(--swap-radius); background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-shadow); } /* no site o botao fica no centro e cobre o "Max 10 BTC"; aqui vai para a direita da linha de limites. O giro no hover continua. */ .swap-btn { left: auto; right: 10px; transform: translateY(-50%); } .swap-btn:hover { transform: translateY(-50%) rotate(180deg) scale(1.08); } .amount-range { max-width: calc(100% - 60px); } .swap-btn:hover { box-shadow: var(--btn-shadow), 0 0 0 1px var(--ink); } .swap-btn:active { box-shadow: var(--btn-press); } .rate-row { margin: 14px 0 16px; } .rate-line { position: relative; background: var(--lcd-bg); border-left: 4px solid var(--brand-bar); border-radius: var(--field-radius); box-shadow: var(--lcd-shadow); padding: 5px 10px 4px; font: var(--lcd-font); color: var(--lcd-fg); text-shadow: var(--lcd-glow); } .rate-toggle-inline { gap: 4px; } .rate-toggle-inline .rate-tab { background: var(--btn-bg); box-shadow: var(--btn-shadow); border-radius: var(--btn-radius); padding: 6px 10px; font: 700 calc(11px * var(--sys-k))/1 var(--f-sys); letter-spacing: .5px; color: var(--btn-fg); } .rate-toggle-inline .rate-tab:hover { color: var(--btn-hover-fg); } .rate-toggle-inline .rate-tab.active { background: var(--toggle-on-bg); box-shadow: var(--btn-press); color: var(--toggle-on-fg); text-shadow: none; } .rate-divider { color: var(--sh); } .wallet-field { margin: 20px 0 14px; } .wallet-field input { height: 34px; padding: 2px 8px 0; font: 400 calc(21px * var(--px-k))/1 var(--f-px); letter-spacing: .5px; } .wallet-field input::placeholder { font: calc(12px * var(--sys-k)) var(--f-sys); color: var(--ph); letter-spacing: 0; text-shadow: none; } .terms { font: calc(12.5px * var(--sys-k))/1.45 var(--f-sys); color: var(--ink); } .terms input[type="checkbox"], .terms input[type="checkbox"]:checked { width: 13px; height: 13px; margin-top: 2px; border: 0; border-radius: var(--check-radius); background: var(--field-bg); box-shadow: var(--field-shadow); } .terms input[type="checkbox"]:checked { background: var(--check-img) no-repeat center, var(--field-bg); } .terms input[type="checkbox"]:checked::after { content: none; } .terms a { color: var(--win-link); text-decoration: underline; } .widget-foot { margin: 16px calc(3px - var(--wp)) calc(3px - var(--wp)); padding: 4px 22px 4px 8px; justify-content: flex-start; text-align: left; background: var(--status-bg); box-shadow: var(--status-shadow); border-radius: 0 0 var(--win-radius) var(--win-radius); font: calc(11px * var(--sys-k))/1.3 var(--f-sys); letter-spacing: 0; color: var(--ink); } /* ===== base-rules2.css ===== */ /* RETRO BASE - regras 2/2: secoes, cards, API, FAQ, contato, rodape, responsivo */ .section-title { font-family: var(--sec-font); font-weight: var(--sec-weight); font-style: var(--hero-style); font-size: var(--sec-size); line-height: 1; letter-spacing: var(--sec-ls); color: var(--sec-color); text-shadow: var(--sec-shadow); } .section-title::after { content: var(--cursor); margin-left: 4px; color: var(--sec-accent); text-shadow: none; animation: r-pisca 1.06s steps(1) infinite; } @keyframes r-pisca { 50% { opacity: 0; } } .section-title .text-bat { color: var(--sec-accent); text-shadow: var(--sec-accent-shadow); } .section-sub { font: calc(15px * var(--sys-k))/1.5 var(--f-sys); color: var(--page-muted); } .eyebrow { font: 400 calc(19px * var(--px-k))/1 var(--f-px); letter-spacing: 2px; } /* ---------- etapas ---------- */ .step { background: var(--win-bg); border: 0; border-radius: var(--win-radius); box-shadow: var(--win-shadow); padding: var(--win-pad-top) 16px 18px; } .step::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--spot), transparent 45%); } .step:hover { border-color: transparent; box-shadow: var(--win-shadow), 0 22px 36px -18px rgba(0,0,0,.95); } .step .step-icon::before { content: var(--t-step); position: static; inset: auto; background: none; filter: none; opacity: 1; z-index: auto; } .step .step-number { font: var(--title-font); color: var(--title-fg); text-shadow: none; } .step h3 { margin: 0 0 6px; font: 700 calc(16px * var(--ui-k))/1.25 var(--f-ui); letter-spacing: .3px; color: var(--ink); } .step p { font: calc(13px * var(--sys-k))/1.5 var(--f-sys); color: var(--ink2); } /* ---------- vantagens ---------- */ .adv-card { background: var(--win-bg); border: 0; border-radius: var(--win-radius); box-shadow: var(--win-shadow); padding: calc(var(--win-pad-top) + 3px) 22px 26px; } .adv-card::before { background: radial-gradient(500px circle at var(--mx,50%) var(--my,50%), var(--spot), transparent 40%); } .adv-card:hover { border-color: transparent; box-shadow: var(--win-shadow), 0 24px 40px -18px rgba(0,0,0,.95); } .adv-card:nth-child(1)::after { content: var(--t-adv1); } .adv-card:nth-child(2)::after { content: var(--t-adv2); } .adv-card:nth-child(3)::after { content: var(--t-adv3); } .adv-icon { border: 0; border-radius: var(--well-radius); background: var(--well-bg); box-shadow: var(--well-shadow); } .adv-icon::after { border-color: var(--ring); } .adv-icon svg { filter: var(--icon-filter); } .adv-card h3 { font: 700 calc(18px * var(--ui-k))/1.25 var(--f-ui); color: var(--ink); } .adv-card p { font: calc(13px * var(--sys-k))/1.55 var(--f-sys); color: var(--ink2); } /* ---------- pares ---------- */ .pair-card { background: transparent; border: 1px dotted transparent; border-radius: 0; padding: 14px 8px; gap: 6px; } .pair-card:hover { border-color: var(--pair-hover-border); box-shadow: none; } .pair-icon { border: 0; border-radius: var(--pair-radius); background: var(--pair-bg); box-shadow: var(--pair-shadow); font: 400 calc(34px * var(--px-k))/1 var(--f-px); color: var(--pair-fg); } .pair-symbol, .pair-name { padding: 1px 4px; } .pair-symbol { font: 700 calc(15px * var(--ui-k))/1.2 var(--f-ui); letter-spacing: 1px; color: var(--page-ink); } .pair-name { font: calc(11px * var(--sys-k))/1.2 var(--f-sys); letter-spacing: .5px; color: var(--page-muted2); } .pair-card:hover .pair-symbol, .pair-card:hover .pair-name { background: var(--sel-bg); color: var(--sel-fg); } /* ---------- parceiros ---------- */ .partner-card { background: var(--btn-bg); border: 0; border-radius: var(--btn-radius); box-shadow: var(--btn-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 22px; } .partner-card:hover { border-color: transparent; box-shadow: var(--btn-shadow), 0 14px 26px -14px rgba(0,0,0,.9); } .partner-card::before, .partner-card::after { border-color: var(--sh); } .pc-energy { background: linear-gradient(110deg, transparent 36%, var(--shine) 50%, transparent 64%); } .pc-icon { color: var(--accent-on-btn); filter: none; } .pc-name { font: 700 calc(15px * var(--ui-k))/1 var(--f-ui); color: var(--btn-fg); } /* ---------- API ---------- */ .api-card, .contact-card { background: var(--win-bg); border: 0; border-radius: var(--win-radius); box-shadow: var(--win-shadow), var(--win-drop); padding: calc(var(--win-pad-top) + 11px) 36px 36px; } .api-card::before, .contact-card::before { background: radial-gradient(circle, var(--spot) 0%, transparent 60%); } .api-card::after { content: var(--t-api); } .contact-card::after { content: var(--t-mail); } .api-info h2, .contact-text h2 { font-family: var(--win-h-font); font-weight: var(--win-h-weight); font-style: var(--hero-style); font-size: var(--win-h-size); line-height: .98; color: var(--ink); text-shadow: var(--win-h-shadow); } .api-info p { font: calc(14px * var(--sys-k))/1.6 var(--f-sys); color: var(--ink2); } .api-snippet { --text: var(--con-fg); --holo: var(--con-val); background: var(--con-bg); border: 0; border-radius: var(--field-radius); box-shadow: var(--field-shadow); padding: 16px 18px; font: 400 calc(20px * var(--px-k))/1.35 var(--f-px); color: var(--con-fg); text-shadow: var(--con-glow); } .api-snippet::after { content: var(--con-prompt); color: var(--con-fg); } .api-method { border-radius: 0; color: #000; font-weight: 400; } /* ---------- FAQ ---------- */ .faq-list { gap: 6px; } .faq-item { background: var(--win-bg); border: 0; border-radius: var(--win-radius); box-shadow: var(--win-shadow); } .faq-item[open] { border-color: transparent; box-shadow: var(--win-shadow), 0 12px 26px -16px rgba(0,0,0,.9); } .faq-item summary { margin: 3px; padding: 7px 10px; gap: 10px; border-radius: var(--title-radius); font: 600 calc(14px * var(--ui-k))/1.3 var(--f-ui); letter-spacing: .3px; color: var(--ink); } .faq-item summary:hover { background: var(--hover-tint); } .faq-item[open] summary { background: var(--faq-open-bg); color: var(--faq-open-fg); } .faq-num { min-width: 48px; font: 400 calc(19px * var(--px-k))/1 var(--f-px); color: var(--accent); } .faq-item[open] .faq-num { color: var(--faq-open-fg); } .faq-toggle { width: 11px; height: 11px; background: var(--field-bg); border: 1px solid var(--sh); } .faq-toggle::before { width: 7px; height: 1px; background: var(--field-fg); } .faq-toggle::after { width: 1px; height: 7px; background: var(--field-fg); } .faq-a { margin: 0 6px 6px; padding: 10px 12px; background: var(--field-bg); box-shadow: var(--field-shadow); border-radius: var(--field-radius); font: calc(13.5px * var(--sys-k))/1.6 var(--f-sys); color: var(--field-fg2); } /* ---------- contato ---------- */ .contact-text p { font: calc(15px * var(--sys-k))/1.5 var(--f-sys); color: var(--ink2); } .contact-form, .contact-form:focus-within { background: transparent; border: var(--group-border); border-radius: var(--group-radius); box-shadow: var(--group-shadow); padding: 12px; } .contact-form:focus-within { border-color: var(--focus-c); } .contact-form .field-label { font: 700 calc(11px * var(--sys-k))/1 var(--f-sys); letter-spacing: .5px; color: var(--ink); } .contact-form textarea { background: var(--field-bg); box-shadow: var(--field-shadow); border-radius: var(--field-radius); padding: 6px 8px; font: calc(14px * var(--sys-k))/1.5 var(--f-sys); color: var(--field-fg2); } .contact-form textarea::placeholder { color: var(--ph); } /* ---------- rodape ---------- */ .site-footer { background: var(--foot-bg); border-top: var(--foot-top); box-shadow: var(--foot-shadow); } .footer-nav { gap: 10px 22px; font: calc(12px * var(--sys-k))/1.4 var(--f-sys); letter-spacing: 1px; } .footer-nav a { color: var(--link); text-decoration: underline; } .footer-nav a:hover { color: var(--link-hover); } .footer-social a { border: 0; border-radius: var(--btn-radius); background: var(--btn-bg); box-shadow: var(--btn-shadow); } .footer-social a:hover { border-color: transparent; background: var(--btn-bg); box-shadow: var(--btn-shadow), 0 10px 20px -10px rgba(0,0,0,.9); } .footer-social a svg path { fill: var(--accent-on-btn); } .footer-contact { font: calc(12px * var(--sys-k))/1.4 var(--f-sys); letter-spacing: 1px; color: var(--page-muted); } .footer-contact a { color: var(--link); text-decoration: underline; } .footer-copy { font: 400 calc(17px * var(--px-k))/1 var(--f-px); letter-spacing: 2px; border-top-color: #2a2a33; } .tor-card { position: relative; background: var(--win-bg); border: 0; border-radius: var(--win-radius); box-shadow: var(--win-shadow); padding: calc(var(--win-pad-top) + 3px) 22px 22px; } .tor-card::before { content: var(--t-tor); } .tor-card-icon { border: 0; border-radius: var(--well-radius); background: var(--well-bg); box-shadow: var(--well-shadow); color: #FF7B3A; } .tor-card-title { font: 700 calc(17px * var(--ui-k))/1.2 var(--f-ui); color: var(--ink); } .tor-card-badge { font: calc(11px * var(--sys-k))/1.2 var(--f-sys); border-radius: var(--tip-radius); color: var(--tip-fg); background: var(--tip-bg); border: var(--tip-border); } .tor-card-sub { font: calc(13px * var(--sys-k))/1.5 var(--f-sys); color: var(--ink2); } .tor-card-addr { background: var(--field-bg); border: 0; border-radius: var(--field-radius); box-shadow: var(--field-shadow); font: 400 calc(21px * var(--px-k))/1.35 var(--f-px); color: var(--ro-fg); text-shadow: var(--lcd-glow); } .tor-card-btn, .tor-card-btn:hover { border: 0; border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-fg); font: var(--btn-font); box-shadow: var(--btn-shadow); } .tor-card-btn:hover { color: var(--btn-hover-fg); } .tor-card-btn:active, .tor-card-btn.is-copied { background: var(--toggle-on-bg); box-shadow: var(--btn-press); color: var(--toggle-on-fg); } /* ---------- responsivo ---------- */ .hero-grid > * { min-width: 0; } /* Mesmo mecanismo dentro do widget: .swap e grid, e a opcao de moeda mais comprida segurava a coluna - no celular o grupo "You send" passava da borda direita e cortava o