/* ============================================================ THEME — every color and font of THIS site lives here. To re-skin a site you edit only this file (plus _logo.php, favicon.svg and BRAND_FONTS_URL in app/brand.php). Loaded BEFORE site.css / admin.css, which only consume var(). Theme deste site: dark tech premium (grafite + laranja), igual à home custom (guilhermestumm.com.br). ============================================================ */ :root{ /* --- ground (public site) --- */ --bg:#0D1117; /* page background */ --bg-2:#12171F; /* alternate section background */ --panel:#161C25; /* cards */ --panel-2:#1B2330; /* raised cards */ --bar-bg:rgba(13,17,23,.85);/* sticky top bar (translucent --bg) */ --field-bg:#0D1117; /* form inputs */ --fade:rgba(13,17,23,.92); /* photo→background fade (mobile hero) */ /* --- accent (brand color) --- */ --accent:#FF7A1A; --accent-2:#FF8E3D; /* lighter companion (gradients, hovers) */ --accent-dim:rgba(255,122,26,.28); --accent-faint:rgba(255,122,26,.12); --accent-contrast:#14100B; /* text ON accent buttons */ --grad-accent:linear-gradient(100deg,var(--accent) 10%,var(--accent-2) 55%,var(--accent) 90%); --glow-strong:rgba(255,122,26,.11); /* hero/page-head radial glows */ --glow-soft:rgba(255,142,61,.14); /* --- text --- */ --heading:#E9ECF1; /* h1/h2/h3 */ --text:#E9ECF1; --text2:#97A1B0; /* secondary text */ --text-soft:#C7CDD6; /* long-form article body */ /* --- lines & placeholders --- */ --line:rgba(255,255,255,.07); /* hairlines, card borders */ --line-strong:rgba(255,255,255,.12); /* inputs, table cells */ --ph-1:#232B36; --ph-2:#171D26; --ph-3:#0F141B; /* image placeholder (default) */ --ph-cool-1:#212A38; --ph-cool-2:#151B25; --ph-cool-3:#0D1218; --ph-warm-1:#2E2418; --ph-warm-2:#1B1610; --ph-warm-3:#100D0A; /* --- semantic (keep readable on your ground) --- */ --wa:#25D366; /* WhatsApp green */ --err:#E5484D; --okc:#46A758; --ok:#46A758; --ok-text:#9BD8A8; /* success text ON your ground */ --err-text:#F2A9AC; /* error text ON your ground */ /* --- type & layout --- */ --font-display:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif; --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace; /* números/detalhes */ --maxw:1180px; } /* --- admin area overrides (body has class="admin") --- */ body.admin{ --bg:#12171F; --panel:#1B2330; --panel-2:#222C3A; --bar-bg:rgba(13,17,23,.92); --field-bg:#0D1117; --accent-dim:rgba(255,122,26,.30); } /* ============================================================ Component overrides deste site (vencem site.css/admin.css que carregam depois). Prefixados com `body` de propósito. ============================================================ */ body h1, body h2, body h3, body .brand-name{ font-family:var(--font-display);letter-spacing:-.01em; } body .btn{border-radius:12px} body .btn-accent{font-weight:600} body .card, body .panel{border-radius:16px} /* wordmark: "Stumm" em laranja */ body .brand-name{font-weight:700;font-size:20px;letter-spacing:.005em} body .brand-name small, body .brand-name .brand-hl{color:var(--accent);font-size:inherit;font-weight:700} body .brand-name small{margin-left:.28em} /* ============================================================ Animations (toggled in Admin -> Homepage -> Animations; each prints an anim-* class on ; fx.js strips them all under prefers-reduced-motion) ============================================================ */ /* -- brush-stroke divider: the previous section's ground drips into the next -- */ body.anim-divider .stats, body.anim-divider .about, body.anim-divider .process, body.anim-divider .contact{position:relative} body.anim-divider .stats::before, body.anim-divider .about::before, body.anim-divider .process::before, body.anim-divider .contact::before{ content:"";position:absolute;top:-1px;left:0;right:0;height:36px; background:var(--bg); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27350%27%20height%3D%2738%27%3E%3Cpath%20d%3D%27M0%200H350V5h-44q-1.2%2011%20-4.0%2011q-2.8%200%20-4.0%20-11h-50q-1.5%2026%20-5.0%2026q-3.5%200%20-5.0%20-26h-63q-1.3%2017%20-4.5%2017q-3.1%200%20-4.5%20-17h-36q-1.8%2030%20-6.0%2030q-4.2%200%20-6.0%20-30h-58q-1.2%2013%20-4.0%2013q-2.8%200%20-4.0%20-13h-42q-1.5%2022%20-5.0%2022q-3.5%200%20-5.0%20-22Z%27/%3E%3C/svg%3E") repeat-x top/auto 34px; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27350%27%20height%3D%2738%27%3E%3Cpath%20d%3D%27M0%200H350V5h-44q-1.2%2011%20-4.0%2011q-2.8%200%20-4.0%20-11h-50q-1.5%2026%20-5.0%2026q-3.5%200%20-5.0%20-26h-63q-1.3%2017%20-4.5%2017q-3.1%200%20-4.5%20-17h-36q-1.8%2030%20-6.0%2030q-4.2%200%20-6.0%20-30h-58q-1.2%2013%20-4.0%2013q-2.8%200%20-4.0%20-13h-42q-1.5%2022%20-5.0%2022q-3.5%200%20-5.0%20-22Z%27/%3E%3C/svg%3E") repeat-x top/auto 34px; pointer-events:none;z-index:2} /* -- stagger: grid cards reveal in cascade -- */ body.anim-stagger :is(.cards,.proj-grid,.steps) > .rv:nth-child(2){transition-delay:.09s} body.anim-stagger :is(.cards,.proj-grid,.steps) > .rv:nth-child(3){transition-delay:.18s} body.anim-stagger :is(.cards,.proj-grid,.steps) > .rv:nth-child(4){transition-delay:.27s} body.anim-stagger :is(.cards,.proj-grid,.steps) > .rv:nth-child(5){transition-delay:.36s} body.anim-stagger :is(.cards,.proj-grid,.steps) > .rv:nth-child(6){transition-delay:.45s} /* -- Ken Burns: slow drift on real photos -- */ body.anim-kenburns .ph.has-img img{animation:wl-ken 22s ease-in-out infinite alternate} @keyframes wl-ken{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.4%,1.4%)}} /* -- slogan marquee strip -- */ .marquee{overflow:hidden;padding:20px 0;background:var(--bg); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .marquee-track{display:flex;align-items:center;gap:30px;white-space:nowrap;width:max-content} body.anim-marquee .marquee-track{animation:wl-marquee 32s linear infinite} .marquee-track span{font-family:var(--font-slogan,var(--font-display));font-size:21px;letter-spacing:.05em; color:transparent;-webkit-text-stroke:1.1px var(--text2)} .marquee-track i{color:var(--accent);font-style:normal;font-size:21px} @keyframes wl-marquee{to{transform:translateX(-50%)}} /* -- sheen sweep on primary buttons -- */ body.anim-sheen .btn-accent{position:relative;overflow:hidden} body.anim-sheen .btn-accent::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg);transition:left .55s ease;pointer-events:none} body.anim-sheen .btn-accent:hover::after{left:135%} /* -- spotlight parallax hook (fx.js writes --spot-y on scroll; no-op on flat backgrounds) -- */ body.anim-parallax .stats, body.anim-parallax .about, body.anim-parallax .process, body.anim-parallax .contact{ background-position:50% var(--spot-y,0px), 0 0}