/* ──────────────────────────────────────────────────────────
Hey! Burgers — site Linktree + Trabalhe Conosco
Style sheet
────────────────────────────────────────────────────────── */
/* ─── Fonts ─────────────────────────────────────────────── */
@font-face{
font-family:"Graphik";font-style:normal;font-weight:400;
src:url("fonts/Graphik-Regular.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik";font-style:normal;font-weight:500;
src:url("fonts/Graphik-Medium.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik";font-style:normal;font-weight:700;
src:url("fonts/Graphik-Bold.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik";font-style:normal;font-weight:800;
src:url("fonts/Graphik-Black.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik";font-style:normal;font-weight:900;
src:url("fonts/Graphik-Super.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik Condensed";font-style:normal;font-weight:700;
src:url("fonts/GraphikCondensed-Bold.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik Condensed";font-style:normal;font-weight:800;
src:url("fonts/GraphikCondensed-Black.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik Condensed";font-style:normal;font-weight:900;
src:url("fonts/GraphikCondensed-Super.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik XXXX";font-style:normal;font-weight:700;
src:url("fonts/GraphikXXXXCondensed-Bold.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik XXXX";font-style:italic;font-weight:700;
src:url("fonts/GraphikXXXXCondensed-BoldItalic.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik XXXX";font-style:normal;font-weight:800;
src:url("fonts/GraphikXXXXCondensed-Black.otf") format("opentype");font-display:swap;
}
@font-face{
font-family:"Graphik XXXX";font-style:normal;font-weight:900;
src:url("fonts/GraphikXXXXCondensed-Super.otf") format("opentype");font-display:swap;
}
/* ─── Tokens ────────────────────────────────────────────── */
:root{
/* brand colors */
--hey-red: #D71920;
--hey-red-deep: #A30F15;
--hey-black: #0E0E0E;
--hey-cream: #F2E9D6;
--hey-cream-deep: #E2D5B6;
--hey-yellow: #FFC72C;
/* theme — overridden by tweaks */
--bg: var(--hey-red);
--bg-deep: var(--hey-red-deep);
--ink: var(--hey-cream);
--ink-muted: color-mix(in srgb, var(--ink) 70%, transparent);
--ink-faint: color-mix(in srgb, var(--ink) 45%, transparent);
--accent: var(--hey-cream);
--line: color-mix(in srgb, var(--ink) 22%, transparent);
--line-strong: color-mix(in srgb, var(--ink) 50%, transparent);
/* type */
--ff-body: "Graphik", system-ui, sans-serif;
--ff-condensed: "Graphik Condensed", "Graphik", system-ui, sans-serif;
--ff-display: "Graphik XXXX", "Graphik Condensed", "Graphik", system-ui, sans-serif;
--display-stack: var(--ff-display); /* swappable via tweak */
/* motion */
--ease: cubic-bezier(.2,.8,.2,1);
}
/* theme variants triggered by data-bg on */
html[data-bg="red"]{
--bg: var(--hey-red);
--bg-deep: var(--hey-red-deep);
--ink: var(--hey-cream);
--accent: var(--hey-cream);
}
html[data-bg="black"]{
--bg: var(--hey-black);
--bg-deep: #000;
--ink: var(--hey-cream);
--accent: var(--hey-red);
}
html[data-bg="cream"]{
--bg: var(--hey-cream);
--bg-deep: var(--hey-cream-deep);
--ink: var(--hey-black);
--accent: var(--hey-red);
}
/* typography variants */
html[data-type="regular"] { --display-stack: var(--ff-body); }
html[data-type="condensed"] { --display-stack: var(--ff-condensed); }
html[data-type="xxxx"] { --display-stack: var(--ff-display); }
/* ─── Base ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{
background:var(--bg);
color:var(--ink);
font-family:var(--ff-body);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body{
min-height:100dvh;
overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
input,select,textarea{font:inherit;color:inherit;}
/* film-grain overlay over everything */
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
opacity:.18;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* ─── Page loader ───────────────────────────────────────── */
.page-loader{
position:fixed;inset:0;z-index:1000;
background:var(--hey-red);
display:flex;align-items:center;justify-content:center;
animation:loaderOut .5s var(--ease) 1.4s both;
pointer-events:none;
}
.page-loader-logo{
width:300px;color:var(--hey-cream);
}
@keyframes loaderOut{
from{opacity:1;}
to{opacity:0;}
}
/* ─── App shell ─────────────────────────────────────────── */
.app{
position:relative;
min-height:100dvh;
display:flex;
flex-direction:column;
}
.app>main{
flex:1;
display:flex;
flex-direction:column;
}
/* Top header — site-wide */
.header{
position:sticky;top:0;z-index:50;
display:flex;align-items:center;
gap:14px;
padding:14px 22px;
background:var(--hey-cream);
color:var(--hey-black);
border-bottom:1px solid color-mix(in srgb, var(--hey-black) 12%, transparent);
box-shadow:0 6px 20px rgba(0,0,0,.10);
}
.header-logo{
flex:0 0 auto; width:148px; color:var(--hey-red); cursor:pointer;
display:block;
}
.header-logo svg{display:block;width:100%;height:auto;}
.header-logo svg path{fill:currentColor;}
.header-nav{
display:flex;gap:6px;align-items:center;flex:0 0 auto;
}
.header-spacer{flex:1;}
.header-nav button{
position:relative;
padding:9px 16px;border-radius:999px;
font-family:var(--ff-body);font-weight:600;font-size:13px;letter-spacing:.04em;
color:var(--hey-black);
transition:background .2s var(--ease),color .2s var(--ease);
}
.header-nav button:hover{background:color-mix(in srgb, var(--hey-black) 8%, transparent);}
.header-nav-evento{
position:relative;
padding:9px 16px;border-radius:999px;
font-family:var(--ff-body);font-weight:700;font-size:13px;letter-spacing:.04em;
color:var(--hey-cream);
background:var(--hey-red);
transition:background .2s var(--ease),transform .2s var(--ease);
white-space:nowrap;
}
.header-nav-evento:hover{background:var(--hey-red-deep);transform:translateY(-1px);}
.header-socials{
display:flex;gap:4px;flex-shrink:0;align-items:center;
}
.header-socials a{
width:42px;height:42px;display:grid;place-items:center;
border-radius:50%;
transition:transform .2s var(--ease);
}
.header-socials a:hover{transform:translateY(-2px) scale(1.06);}
.header-socials img{
width:40px;height:40px;object-fit:contain;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
/* Tablet: tighter spacing */
@media (max-width:860px){
.header{padding:12px 18px;gap:10px;}
.header-logo{width:124px;}
.header-nav button{padding:7px 12px;font-size:12px;}
.header-nav-evento{padding:7px 12px;font-size:12px;}
.header-socials a{width:38px;height:38px;}
.header-socials img{width:36px;height:36px;}
}
/* Mobile: two rows — logo+socials on top, nav full width below */
@media (max-width:640px){
.header{flex-wrap:wrap;row-gap:10px;padding:12px 16px;}
.header-logo{order:1;width:108px;}
.header-spacer{display:none;}
.header-socials{order:2;margin-left:auto;}
.header-socials a{width:34px;height:34px;}
.header-socials img{width:32px;height:32px;}
.header-nav{order:3;flex-basis:100%;justify-content:flex-start;gap:4px;
padding-top:8px;border-top:1px solid color-mix(in srgb, var(--hey-black) 10%, transparent);}
.header-nav button{padding:7px 12px;font-size:12px;}
.header-nav-evento{padding:7px 12px;font-size:12px;}
}
@media (max-width:380px){
.header-logo{width:92px;}
.header-socials a{width:30px;height:30px;}
.header-socials img{width:28px;height:28px;}
}
/* ─── Logo ──────────────────────────────────────────────── */
.logo{
display:block;color:inherit;
}
.logo svg{display:block;width:100%;height:auto;}
.logo svg path{fill:currentColor;}
/* ─── Home: Linktree-style ──────────────────────────────── */
.home{
flex:1;
display:flex;flex-direction:column;
padding:8px 0 32px;
}
.home-hero{
position:relative;
padding:36px 24px 32px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:18px;
text-align:center;
}
/* Horizontal faixa banner — sits OVER the first card divider */
.banner{
position:relative;
width:100%;
margin:0 0 -44px; /* overlap downward onto first card */
overflow:hidden;
padding:0;
z-index:5;
pointer-events:none;
}
.banner-strip{
display:block;
width:100%;
height:88px;
background:url("assets/faixa-tile.png") 0 center / auto 88px repeat-x;
filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
animation:bSlide 32s linear infinite;
}
@keyframes bSlide{
from{background-position-x:0;}
to{background-position-x:-2293px;}
}
html[data-bg="cream"] .banner-strip{ mix-blend-mode:multiply; filter:none; }
@media (max-width:640px){
.banner{margin-bottom:-32px;}
.banner-strip{height:64px;background-size:auto 64px;}
@keyframes bSlide{ from{background-position-x:0;} to{background-position-x:-1668px;} }
}
.home-logo{
width:480px;max-width:88%;
margin:0;
}
.home-logo img{
display:block;width:100%;height:auto;
}
@media (max-width:640px){
.home-hero{padding:28px 20px 24px;gap:14px;}
.home-logo{width:360px;max-width:88%;}
}
@media (max-width:380px){
.home-logo{width:280px;max-width:90%;}
}
/* Link buttons — full-bleed burger photo + sticker icon, edge-to-edge */
.links{
list-style:none;padding:0;
margin:0;
width:100%;max-width:none;
display:flex;flex-direction:column;gap:0;
position:relative;
}
.link{
position:relative;
display:flex;align-items:flex-end;gap:0;
padding:28px 26px;
min-height:240px;
border-radius:0;
overflow:hidden;
isolation:isolate;
color:var(--hey-cream);
border:0;
border-top:1px solid var(--hey-cream);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.link:first-child{border-top:1px solid var(--hey-cream);}
.link:last-child{border-bottom:1px solid var(--hey-cream);}
.link-photo{
position:absolute;inset:0;z-index:-2;
width:100%;height:100%;
object-fit:cover;object-position:center;
transform:scale(1.04);
transition:transform 1.4s var(--ease);
}
.link-overlay{
position:absolute;inset:0;z-index:-1;
background:
linear-gradient(180deg,
rgba(8,8,8,.05) 0%,
rgba(8,8,8,.18) 38%,
rgba(8,8,8,.78) 100%);
}
.link-sticker{
position:absolute;top:22px;right:22px;
width:88px;height:88px;
object-fit:contain;
filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
transform:rotate(-6deg);
transition:transform .35s var(--ease);
z-index:1;
}
.link:hover .link-sticker{ transform:rotate(3deg) scale(1.08); }
.link:hover .link-photo{ transform:scale(1.10); }
.link:hover{ transform:none; }
.link:active{ transform:none; }
.link-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.link-title{
display:block;
font-family:var(--display-stack);
font-weight:800;
font-size:clamp(36px,9vw,72px);
line-height:.92;letter-spacing:-.005em;
word-spacing:.18em;
text-transform:uppercase;
color:var(--hey-cream);
max-width:16ch;
}
.link-sub{
display:block;
font-family:var(--ff-body);
font-size:14px;font-weight:500;
color:color-mix(in srgb, var(--hey-cream) 78%, transparent);
letter-spacing:.04em;
}
.link-arrow{
position:absolute;bottom:28px;right:28px;
color:var(--hey-cream);
transition:transform .25s var(--ease);
opacity:.85;
}
.link:hover .link-arrow{transform:translateX(8px);opacity:1;}
.link-arrow svg{width:28px;height:28px;}
@media (min-width:780px){
.link{min-height:300px;padding:36px 40px;}
.link-sticker{width:104px;height:104px;top:30px;right:30px;}
.link-arrow{bottom:34px;right:36px;}
.link-arrow svg{width:32px;height:32px;}
}
/* Button-style variants — applied over the photo button */
html[data-btn="filled"] .link-overlay{
background:linear-gradient(180deg,
rgba(8,8,8,.10) 0%,
rgba(8,8,8,.30) 40%,
rgba(8,8,8,.88) 100%);
}
html[data-btn="outline"] .link{
border-top:2px solid var(--hey-cream);
}
html[data-btn="outline"] .link:first-child{border-top:2px solid var(--hey-cream);}
html[data-btn="outline"] .link:last-child{border-bottom:2px solid var(--hey-cream);}
html[data-btn="outline"] .link-overlay{
background:linear-gradient(180deg,
rgba(8,8,8,0) 0%,
rgba(8,8,8,.15) 45%,
rgba(8,8,8,.65) 100%);
}
html[data-btn="brutal"] .link{
border-top:4px solid var(--hey-cream);
}
html[data-btn="brutal"] .link:first-child{border-top:4px solid var(--hey-cream);}
html[data-btn="brutal"] .link:last-child{border-bottom:4px solid var(--hey-cream);}
html[data-btn="brutal"] .link-overlay{
background:linear-gradient(180deg,
rgba(8,8,8,.08) 0%,
rgba(8,8,8,.28) 40%,
rgba(8,8,8,.82) 100%);
}
/* Layout variants — only affect the .links grid; hero stays row-then-stack */
html[data-layout="grid"] .links{
grid-template-columns:1fr 1fr;display:grid;gap:0;
}
html[data-layout="grid"] .link{min-height:280px;}
html[data-layout="grid"] .link-title{font-size:clamp(28px,5vw,42px);}
html[data-layout="grid"] .link:nth-child(odd){
border-right:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
@media (max-width:560px){
html[data-layout="grid"] .links{grid-template-columns:1fr;}
html[data-layout="grid"] .link:nth-child(odd){border-right:0;}
}
/* footer / form retains its centered padded layout regardless of layout tweak */
html[data-layout="asymmetric"] .home-footer,
html[data-layout="grid"] .home-footer{ max-width:520px; margin-left:auto;margin-right:auto; }
/* Footer container needs padding restored since .home now has 0 horizontal padding */
.home-footer{ padding-left:20px;padding-right:20px; }
/* ─── Accent gambiarra: display font has no accents ───────────── */
/* Wrap the base letter in and the accent
character renders over it from the body font (Graphik regular). */
.acc{
position:relative;
display:inline-block;
}
.acc::after{
position:absolute;
font-family:var(--ff-body);
font-weight:900;
pointer-events:none;
line-height:1;
color:inherit;
}
.acc-acute::after{
content:"\B4";
top:-0.42em;left:50%;
transform:translateX(-58%);
font-size:.55em;
}
.acc-grave::after{
content:"`";
top:-0.42em;left:50%;
transform:translateX(-58%);
font-size:.55em;
}
.acc-tilde::after{
content:"~";
top:-0.50em;left:50%;
transform:translateX(-50%);
font-size:.55em;
}
.acc-circ::after{
content:"^";
top:-0.46em;left:50%;
transform:translateX(-50%);
font-size:.55em;
}
.acc-cedilla::after{
content:"\B8";
bottom:-0.30em;left:50%;
transform:translateX(-50%);
font-size:.55em;
}
/* Footer */
.home-footer{
margin:36px auto 0;
text-align:center;
padding:18px 12px 0;
border-top:1px solid var(--line);
width:100%;max-width:440px;
}
.home-footer-ctas{
display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.jobs-cta{
display:inline-flex;align-items:center;gap:8px;
padding:14px 22px;
border-radius:999px;
background:var(--accent);
color:var(--bg);
font-weight:700;font-size:14px;
letter-spacing:.04em;
transition:transform .2s var(--ease), background .2s var(--ease);
outline:none;
-webkit-tap-highlight-color:transparent;
}
.jobs-cta:hover{transform:translateY(-1px);}
.jobs-cta:focus,.jobs-cta:focus-visible,.jobs-cta:active{outline:none;box-shadow:none;}
.jobs-cta svg{width:14px;height:14px;}
.home-foot-meta{
margin-top:18px;
font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-muted);
}
.home-foot-dev{
margin-top:10px;
font-size:12px;letter-spacing:.04em;
color:var(--ink-muted);
}
.home-foot-dev a{
text-decoration:underline;
text-underline-offset:3px;
color:var(--ink-muted);
transition:color .2s var(--ease);
}
.home-foot-dev a:hover{color:var(--ink);}
/* ─── Trabalhe Conosco screen ───────────────────────────── */
.jobs{
flex:1;
position:relative;
}
.jobs-hero{
position:relative;
padding:48px 24px 64px;
border-bottom:1px solid var(--line);
overflow:hidden;
}
.jobs-hero::before{
content:"";position:absolute;inset:0;
background:url("assets/burger-03.webp") center/cover no-repeat;
opacity:.18;
mix-blend-mode:luminosity;
}
.jobs-hero-inner{
position:relative;max-width:920px;margin:0 auto;
}
.jobs-eyebrow{
font-size:11px;letter-spacing:.22em;text-transform:uppercase;
font-weight:500;color:var(--ink-muted);
}
.jobs-title{
margin:14px 0 0;
font-family:var(--display-stack);font-weight:800;
font-size:clamp(56px,14vw,156px);
line-height:.84;letter-spacing:-.01em;
word-spacing:.30em;
text-transform:uppercase;
}
.jobs-title em{font-style:italic;color:var(--accent);}
.jobs-sub{
margin:22px 0 0;
max-width:60ch;
font-size:17px;line-height:1.5;
color:var(--ink-muted);
}
/* Perks strip */
.perks{
list-style:none;padding:0;margin:36px 0 0;
display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
max-width:920px;margin-left:auto;margin-right:auto;
}
.perks li{
padding:18px;
border:1px solid var(--line);
border-radius:14px;
background:color-mix(in srgb, var(--ink) 4%, transparent);
}
.perks .num{
font-family:var(--display-stack);font-weight:800;
font-size:34px;line-height:1;letter-spacing:-.02em;
color:var(--accent);
}
.perks .label{
margin-top:8px;font-size:14px;font-weight:500;
}
@media (max-width:640px){
.perks{grid-template-columns:1fr;}
.jobs-hero{padding:32px 20px 40px;}
}
/* Form */
.jobs-form-wrap{
padding:48px 24px 80px;
}
.jobs-form{
max-width:680px;margin:0 auto;
display:flex;flex-direction:column;gap:22px;
}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
font-weight:500;color:var(--ink-muted);
}
.field label .req{color:var(--accent);margin-left:4px;}
.field .hint{font-size:12px;color:var(--ink-faint);margin-top:4px;}
.input, .select, .textarea, .file{
width:100%;
padding:16px 18px;
border:1.5px solid var(--line-strong);
background:transparent;
color:var(--ink);
border-radius:14px;
font-size:16px;
transition:border-color .2s var(--ease), background .2s var(--ease);
outline:none;
font-family:var(--ff-body);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-faint);}
.input:focus,.select:focus,.textarea:focus{
border-color:var(--accent);
background:color-mix(in srgb, var(--ink) 4%, transparent);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
/* Radio group */
.radio-group{display:flex;flex-direction:column;gap:8px;}
.radio-opt{
display:flex;flex-direction:column;gap:3px;
padding:14px 16px;
border:1.5px solid var(--line-strong);
border-radius:14px;
cursor:pointer;
transition:all .2s var(--ease);
}
.radio-opt input{position:absolute;opacity:0;width:0;height:0;}
.radio-opt:hover{border-color:var(--accent);background:color-mix(in srgb, var(--ink) 4%, transparent);}
.radio-opt.is-on{background:var(--accent);color:var(--bg);border-color:var(--accent);}
.radio-label{font-weight:600;font-size:14px;}
.radio-desc{font-size:12px;color:var(--ink-muted);}
.radio-opt.is-on .radio-desc{color:color-mix(in srgb, var(--bg) 70%, transparent);}
html[data-btn="brutal"] .radio-opt{border-radius:6px;border-width:2px;border-color:var(--ink);}
/* Submit */
.submit{
margin-top:8px;
display:inline-flex;align-items:center;justify-content:center;gap:12px;
padding:20px 28px;
border-radius:999px;
background:var(--accent);
color:var(--bg);
font-weight:800;font-size:15px;
letter-spacing:.06em;text-transform:uppercase;
transition:transform .2s var(--ease), filter .2s var(--ease);
align-self:flex-start;
}
.submit:hover{transform:translateY(-1px);filter:brightness(1.05);}
.submit:disabled{opacity:.5;cursor:not-allowed;}
.submit svg{width:18px;height:18px;}
/* Brutal mode adjustments for form */
html[data-btn="brutal"] .input{
border-radius:6px;border-width:2px;border-color:var(--ink);
}
html[data-btn="brutal"] .submit{
border-radius:6px;border:2px solid var(--ink);
box-shadow:6px 6px 0 0 var(--ink);
}
html[data-btn="brutal"] .submit:hover{box-shadow:8px 8px 0 0 var(--ink);}
/* ─── Success screen ────────────────────────────────────── */
.success{
flex:1;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:48px 24px;
text-align:center;
min-height:80dvh;
}
.success-stamp{
display:grid;place-items:center;
width:120px;height:120px;border-radius:50%;
background:var(--accent);color:var(--bg);
margin-bottom:24px;
animation:stamp .55s var(--ease) both;
}
@keyframes stamp{
0%{transform:scale(.4) rotate(-12deg);opacity:0;}
60%{transform:scale(1.1) rotate(4deg);opacity:1;}
100%{transform:scale(1) rotate(0);opacity:1;}
}
.success-stamp svg{width:54px;height:54px;}
.success-title{
font-family:var(--display-stack);font-weight:800;
font-size:clamp(48px,11vw,96px);line-height:.86;letter-spacing:-.01em;
word-spacing:.28em;
text-transform:uppercase;
margin:0;
}
.success-title em{font-style:italic;color:var(--accent);}
.success-actions{
margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
/* ─── Misc ─────────────────────────────────────────────── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition:none !important;}
}