/* ============================================================ front-light.css — Light Mode Override + Toggle Pill Aplica-se quando tem a classe "lm" ============================================================ */ /* ── TOGGLE PILL (sempre visível, dark e light) ── */ .nav-right { display: flex; align-items: center; gap: .6rem; } #theme-toggle { background: none; border: none; padding: 0; cursor: pointer; outline: none; display: flex; align-items: center; } .tt-track { width: 52px; height: 28px; border-radius: 14px; background: #1e1e2e; border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; padding: 3px; position: relative; transition: background .35s, border-color .35s; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); } .tt-thumb { width: 20px; height: 20px; border-radius: 50%; background: #2c2c3e; display: flex; align-items: center; justify-content: center; font-size: .72rem; transition: transform .35s cubic-bezier(.4,0,.2,1), background .35s; position: relative; box-shadow: 0 1px 4px rgba(0,0,0,.4); flex-shrink: 0; } /* No dark: mostra lua, esconde sol */ .tt-thumb #theme-icon-moon { color: #c8f564; display: flex; } .tt-thumb #theme-icon-sun { color: #f0b464; display: none; } /* No light: thumb desliza, mostra sol */ html.lm .tt-track { background: #e2e8f0; border-color: rgba(0,0,0,.12); box-shadow: inset 0 1px 3px rgba(0,0,0,.15); } html.lm .tt-thumb { transform: translateX(24px); background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.18); } html.lm .tt-thumb #theme-icon-moon { display: none; } html.lm .tt-thumb #theme-icon-sun { display: flex; } /* ── VARIÁVEIS LIGHT ── */ html.lm { --bg: #f0f0f5; --sf: #ffffff; --sf2: #e8e8ef; --bd: rgba(0,0,0,.11); --tx: #111118; --mu: #5a5a70; --ac: #4a8c00; --ac2: #3040cc; --ac3: #d63030; --ac4: #b07010; --gl: rgba(74,140,0,.10); } html.lm body { background: var(--bg); color: var(--tx); } html.lm body::before { opacity: .10; } html.lm ::-webkit-scrollbar-track { background: var(--bg); } html.lm ::-webkit-scrollbar-thumb { background: var(--ac); } /* ── NAV ── */ html.lm nav { background: rgba(248,248,252,.94); border-bottom-color: var(--bd); box-shadow: 0 2px 16px rgba(0,0,0,.08); } html.lm .nl { background: rgba(255,255,255,.9); border-color: var(--bd); box-shadow: 0 2px 10px rgba(0,0,0,.07); } html.lm .nl a { color: var(--mu); } html.lm .nl a:hover { color: var(--tx); background: rgba(74,140,0,.08); } html.lm .nl a i { color: var(--mu); } html.lm .nl a:hover i { color: var(--ac); } html.lm .logo { color: var(--tx); } html.lm .logo-s { color: var(--mu); } html.lm .bg2 span { background: var(--tx); } html.lm .mm { background: rgba(240,240,245,.98); } html.lm .mm a { color: var(--mu); } html.lm .mm a:hover { color: var(--ac); } /* ── HERO ── */ html.lm .hg { background-image: linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px); } html.lm .ob1 { background: radial-gradient(circle,rgba(48,64,204,.10) 0%,transparent 70%); } html.lm .ob2 { background: radial-gradient(circle,rgba(74,140,0,.07) 0%,transparent 70%); } html.lm .ht .ol { -webkit-text-stroke-color: rgba(0,0,0,.10); } html.lm .ht .aw { color: var(--ac); } html.lm .ht .aw::after { color: var(--ac); } html.lm .bdt { background: var(--ac); } html.lm .slin { background: linear-gradient(to bottom, var(--ac), transparent); } /* ── MARQUEE ── */ html.lm .mw { background: var(--sf); border-color: var(--bd); box-shadow: 0 1px 6px rgba(0,0,0,.06); } /* ── SECTIONS ── */ html.lm #sobre { background: var(--sf); } html.lm #oque { background: var(--bg); } html.lm #trabalhos { background: var(--sf); } html.lm #testemunhos { background: var(--bg); } html.lm #contact { background: var(--sf); border-top-color: var(--bd); } /* ── SOBRE ── */ html.lm .sv { background: var(--sf2); border-color: var(--bd); box-shadow: 0 4px 18px rgba(0,0,0,.08); } html.lm .vcard { background: rgba(248,248,252,.94); border-color: var(--bd); } html.lm .sr2 { border-top-color: var(--bd); } html.lm .sn3 { color: var(--tx) !important; } html.lm .stxt p { color: var(--mu); } /* ── BOTÕES ── */ html.lm .ba { background: var(--ac); border-color: var(--ac); color: #fff !important; box-shadow: 0 3px 10px rgba(74,140,0,.25); } html.lm .ba:hover { background: #fff; color: var(--ac) !important; border-color: var(--ac); box-shadow: none; } html.lm .bo { color: var(--mu); border-color: var(--bd); } html.lm .bo:hover { color: var(--tx); border-color: rgba(0,0,0,.22); } html.lm .btn-ver-todos { border-color: var(--bd); color: var(--mu); } html.lm .btn-ver-todos:hover { border-color: var(--ac); color: var(--ac); } html.lm .scb { border-color: rgba(74,140,0,.3); color: var(--ac); } html.lm .scb:hover { background: var(--ac); color: #fff; } html.lm #btn-sobre { border-color: rgba(176,112,16,.3); color: var(--ac4); } html.lm #btn-sobre i { color: var(--ac4); } html.lm #btn-sobre:hover { background: rgba(176,112,16,.08); border-color: rgba(176,112,16,.5); } /* ── SERVIÇOS ── */ html.lm .sc { background: var(--sf); border-color: var(--bd); box-shadow: 0 2px 12px rgba(0,0,0,.06); } html.lm .sc:hover { border-color: rgba(74,140,0,.28); box-shadow: 0 6px 24px rgba(74,140,0,.12); } html.lm .tg { color: var(--ac); border-color: rgba(74,140,0,.2); } html.lm a.tg:hover { background: var(--ac); color: #fff; border-color: var(--ac); } /* ── TRABALHOS ── */ html.lm .wi { border-color: var(--bd); background: var(--sf2); box-shadow: 0 2px 10px rgba(0,0,0,.07); } html.lm .wi:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); } html.lm .wdet { border-color: rgba(0,0,0,.2); color: var(--tx); } html.lm .wdet:hover { border-color: var(--ac); color: var(--ac); } /* Page hero (páginas secundárias) */ html.lm .page-hero, html.lm .svc-hero, html.lm .work-hero { background: var(--sf); border-bottom-color: var(--bd); box-shadow: 0 2px 10px rgba(0,0,0,.06); } /* Paginação */ html.lm .pag a, html.lm .pag-wrap a { border-color: var(--bd); color: var(--mu); } html.lm .pag a:hover, html.lm .pag a.ativa, html.lm .pag-wrap a:hover, html.lm .pag-wrap a.ativa { background: var(--ac); border-color: var(--ac); color: #fff; } /* Share */ html.lm .share-btn { border-color: var(--bd); background: var(--sf2); } html.lm .share-email { color: var(--ac); border-color: rgba(74,140,0,.3); background: rgba(74,140,0,.05); } html.lm .share-email:hover { background: var(--ac); color: #fff !important; border-color: var(--ac); } html.lm .share-email:hover i { color: #fff !important; } /* ── TESTEMUNHOS ── */ html.lm .cw { background: var(--sf); border-color: var(--bd); box-shadow: 0 4px 16px rgba(0,0,0,.08); } html.lm .cit img { background: var(--sf2); } html.lm .ccc { background: var(--sf2); border-top-color: var(--bd); } html.lm .cb2 { border-color: var(--bd); color: var(--mu); } html.lm .cb2:hover { border-color: var(--ac); color: var(--ac); } html.lm .fbl { color: var(--mu); border-color: var(--bd); } html.lm .fbl:hover { color: var(--ac); border-color: rgba(74,140,0,.28); } /* ── CONTACTO ── */ html.lm .ctcrd { border-bottom-color: var(--bd); } html.lm .cic { border-color: var(--bd); color: var(--mu); } html.lm .ctcrd:hover .cic { border-color: rgba(74,140,0,.28); color: var(--ac); } html.lm .ccl { color: var(--tx); } html.lm .ccv { color: var(--tx); } html.lm .ctcrd:hover .ccv { color: var(--ac); } html.lm .fg label { color: var(--mu); } html.lm .fg input, html.lm .fg textarea { background: var(--bg); border-color: var(--bd); color: var(--tx); box-shadow: inset 0 1px 3px rgba(0,0,0,.06); } html.lm .fg input:focus, html.lm .fg textarea:focus { border-color: var(--ac); box-shadow: inset 0 1px 3px rgba(0,0,0,.06), 0 0 0 3px rgba(74,140,0,.10); } html.lm .fg.iv input, html.lm .fg.iv textarea { border-color: var(--ac3) !important; box-shadow: inset 0 1px 3px rgba(214,48,48,.08); } html.lm .fg.iv label { color: var(--ac3); } html.lm .chr label { color: var(--mu); } html.lm .chr a { color: var(--ac); } html.lm .bsub { background: var(--ac); color: #fff !important; -webkit-text-fill-color: #fff; box-shadow: 0 4px 14px rgba(74,140,0,.28); } html.lm .bsub:hover { background: #3a7000; box-shadow: 0 6px 18px rgba(74,140,0,.35); } html.lm .pl2 a { color: var(--mu); } html.lm .pl2 a:hover { color: var(--ac); } /* ── FLUTUANTES ── */ html.lm .flt a { border-color: var(--bd); background: var(--sf); box-shadow: 0 2px 10px rgba(0,0,0,.10); } html.lm .flt a.tp { color: var(--ac); border-color: rgba(74,140,0,.2); } html.lm .flt a.tp:hover { background: rgba(74,140,0,.08); } /* ── MODAIS ── */ html.lm .mb { background: var(--sf); border-color: var(--bd); box-shadow: 0 20px 60px rgba(0,0,0,.18); } html.lm .mhd { border-bottom-color: var(--bd); } html.lm .mcl { color: var(--mu); } html.lm .mcl:hover { color: var(--tx); } html.lm .mbd p, html.lm .mbd ul { color: var(--mu); } html.lm .mft { border-top-color: var(--bd); } html.lm .amcd { background: var(--bg); border-color: var(--bd); box-shadow: 0 2px 8px rgba(0,0,0,.06); } html.lm .amcd h6 { color: var(--tx); } html.lm .amcd p { color: var(--mu); } html.lm .ski { color: var(--mu); border-bottom-color: var(--bd); } html.lm #m-sobre .mht, html.lm #m-sobre .mht i { color: var(--ac4); } /* ── FOOTER ── */ html.lm .site-footer { background: var(--sf); border-top-color: var(--bd); box-shadow: 0 -2px 12px rgba(0,0,0,.06); } html.lm .sf-logo-white { color: var(--tx); } html.lm .sf-copy-white { color: var(--tx); } html.lm .sf-social-center .sf-social-btn { background: var(--sf2); border-color: var(--bd); color: var(--mu); box-shadow: 0 1px 5px rgba(0,0,0,.07); } html.lm .sf-social-center .sf-social-btn:hover { border-color: var(--ac); color: var(--ac); } html.lm .sf-visitas { background: var(--sf2); border-color: var(--bd); } /* ── PÁGINAS SECUNDÁRIAS ── */ html.lm .btn-row a:first-child { background: var(--ac); color: #fff; box-shadow: 0 3px 10px rgba(74,140,0,.25); } html.lm .btn-row a:first-child:hover { background: #3a7000; } html.lm .btn-row a:last-child { color: var(--mu); border-color: var(--bd); } html.lm .btn-row a:last-child:hover { color: var(--ac); border-color: rgba(74,140,0,.3); } html.lm .feat { background: var(--sf2); border-color: var(--bd); box-shadow: 0 2px 8px rgba(0,0,0,.06); } html.lm .feat:hover { border-color: rgba(74,140,0,.25); box-shadow: 0 4px 14px rgba(74,140,0,.10); } html.lm .feat-title { color: var(--tx); } html.lm .pstep { background: var(--sf2); border-color: var(--bd); box-shadow: 0 1px 6px rgba(0,0,0,.05); } html.lm .pstep:hover { border-color: rgba(74,140,0,.2); } html.lm .pstep-num { color: rgba(74,140,0,.3); } html.lm .pstep-text h4 { color: var(--tx); } html.lm .pstep-text p { color: var(--mu); } html.lm .info-card, html.lm .work-info-card { background: var(--sf); border-color: var(--bd); border-top-color: var(--ac); box-shadow: 0 3px 14px rgba(0,0,0,.08); } html.lm .btn-cta { background: var(--ac); color: #fff; box-shadow: 0 3px 10px rgba(74,140,0,.25); } html.lm .btn-cta:hover { background: #3a7000; } html.lm .btn-cta-out { color: var(--mu); border-color: var(--bd); } html.lm .btn-cta-out:hover { color: var(--ac); border-color: rgba(74,140,0,.3); } html.lm .btn-visit { background: var(--ac); color: #fff; box-shadow: 0 3px 10px rgba(74,140,0,.25); } html.lm .btn-visit:hover { background: #3a7000; } html.lm .btn-contact { color: var(--mu); border-color: var(--bd); } html.lm .btn-contact:hover { color: var(--ac); border-color: rgba(74,140,0,.3); } html.lm .outro-titulo { color: var(--tx); } html.lm .outro-item { border-bottom-color: var(--bd); } html.lm .bottom-cta { background: var(--sf); border-top-color: var(--bd); box-shadow: 0 -2px 12px rgba(0,0,0,.05); } html.lm .gallery-main { background: var(--sf); border-color: var(--bd); box-shadow: 0 4px 16px rgba(0,0,0,.10); } html.lm .gallery-main-count { background: rgba(248,248,252,.9); color: var(--ac); border-color: rgba(74,140,0,.2); } html.lm .gallery-thumb { border-color: var(--bd); } html.lm .gallery-thumb:hover, html.lm .gallery-thumb.active { border-color: var(--ac); } html.lm .fb { border-color: var(--bd); color: var(--mu); } html.lm .fb:hover, html.lm .fb.ac { background: var(--ac); border-color: var(--ac); color: #fff; } html.lm .rel-section { background: var(--sf); border-top-color: var(--bd); } html.lm .rel-item { border-color: var(--bd); background: var(--bg); } html.lm .rel-item:hover { border-color: rgba(74,140,0,.28); } html.lm .rel-nome { color: var(--tx); } html.lm .info-label { color: var(--mu); } html.lm .info-value { color: var(--tx); } html.lm .info-value a { color: var(--ac); } /* ── TOGGLE NO MENU MOBILE ── */ .mm-theme-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); } html.lm .mm-theme-row { border-top-color: rgba(0,0,0,.08); } .mm-theme-label { font-family: 'DM Mono', monospace; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); } html.lm .mm-theme-label { color: rgba(0,0,0,.35); } #theme-toggle-mm { background: none; border: none; padding: 0; cursor: pointer; }