0b86fe79fc
All checks were successful
Build and deploy / Validate source (push) Successful in 7s
Build and deploy / Integration suite on a real stack (push) Successful in 2m51s
Build and deploy / Secret scan and release gate (push) Successful in 9s
Build and deploy / Publish images (push) Successful in 56s
On a short page (sign-in, an empty cart) the footer followed the content and the rest of the screen was left blank below it, more so with the Site drawn at 80%. The body is now a column at least the screen's height with the footer pushed to its end; under the 80% zoom that height is 125vh, because the zoom scales viewport units too. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
85 lines
4.7 KiB
CSS
85 lines
4.7 KiB
CSS
/* Site DTF — what every page shares: the tokens, the base type, the stripe,
|
|
header, category menu and footer. The Site (index.html) and the order page
|
|
(portal.html) both load it before their own styles. */
|
|
:root{
|
|
/* tokens do site institucional */
|
|
--font-family-base:"Roboto",sans-serif; --font-family-title:"Inter",sans-serif;
|
|
--font-color-base:#03060b; --font-color-title:#03060b;
|
|
--font-weight-base:400; --font-weight-title:700; --font-weight-subtitle:600; --font-weight-button:600;
|
|
--font-size-title:3rem; --font-size-subtitle:2rem; --font-size-button:1.4rem;
|
|
--font-size-small:1.2rem; --font-size-base:1.4rem; --font-size-medium:1.6rem; --font-size-big:1.8rem;
|
|
--line-height:1.5;
|
|
--white:#fff; --black:#03060b;
|
|
--gray-1:#f9f9f9; --gray-2:#c3c3c3; --gray-3:#707070; --gray-4:#363636;
|
|
--primary-color:#ffa81a; --secondary-color:#ff7f0a;
|
|
--white-transparency:#ffffffb3; --transition:all .4s ease;
|
|
/* apelidos usados nesta pagina, mapeados nos tokens acima */
|
|
--marinho:var(--black); --papel:var(--white); --cinza:var(--gray-1);
|
|
--tx:var(--font-color-base); --fraco:var(--gray-3); --linha:#e6e6e6;
|
|
--laranja:var(--primary-color); --laranja2:var(--secondary-color);
|
|
--vermelho:#D94A28; --verde:#2E9E5B; --verde-ml:#00A650; --verde-claro:#57D68A;
|
|
--sombra:0 1px 2px rgba(3,6,11,.05), 0 4px 14px rgba(3,6,11,.05);
|
|
--sombra-alta:0 2px 6px rgba(3,6,11,.07), 0 10px 30px rgba(3,6,11,.11)}
|
|
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
html{scroll-behavior:smooth;font-size:62.5%}
|
|
body{background:var(--white);color:var(--font-color-base);font-family:var(--font-family-base);
|
|
font-size:var(--font-size-base);font-weight:var(--font-weight-base);line-height:var(--line-height);
|
|
-webkit-font-smoothing:antialiased}
|
|
h1,h2,h3{font-family:var(--font-family-title);color:var(--font-color-title);
|
|
font-weight:var(--font-weight-title);letter-spacing:normal;line-height:1.15}
|
|
.w{max-width:1020px;margin:0 auto;padding:0 22px}
|
|
|
|
/* tarja rotativa, como no site */
|
|
.tarja{background:var(--laranja);color:#111;text-align:center;padding:8px 16px;
|
|
font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.02em}
|
|
.tarja a{color:#111;text-decoration:none}
|
|
|
|
/* topo */
|
|
.topo{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:60}
|
|
.topo .w{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px}
|
|
.logo{display:flex;align-items:center;text-decoration:none;white-space:nowrap;flex:none}
|
|
.logo img{height:26px;width:auto;display:block}
|
|
.logotexto{font-family:"Inter",sans-serif;font-weight:700;font-size:19px;color:var(--black);
|
|
letter-spacing:-.03em}
|
|
.logotexto i{font-style:normal;color:var(--laranja)}
|
|
.acts{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:15px}
|
|
.acts a{color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:6px}
|
|
.acts a:hover{color:var(--laranja)}
|
|
|
|
/* menu */
|
|
.menu{background:#fff;border-bottom:1px solid var(--linha)}
|
|
.menu .w{display:flex;gap:0;flex-wrap:wrap}
|
|
.mi{position:relative}
|
|
.mi>a{display:block;padding:13px 16px;font-family:"Inter",sans-serif;font-weight:600;
|
|
font-size:15px;color:var(--tx);text-decoration:none;white-space:nowrap}
|
|
.mi:hover>a{color:var(--laranja)}
|
|
.mi.on>a{color:var(--laranja);box-shadow:inset 0 -2px 0 var(--laranja)}
|
|
.sub{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--linha);
|
|
border-radius:0 0 9px 9px;min-width:224px;padding:7px 0;z-index:70;
|
|
box-shadow:0 10px 26px rgba(0,0,0,.09)}
|
|
.mi:hover .sub,.mi:focus-within .sub{display:block}
|
|
.sub a{display:block;padding:8px 17px;font-size:15px;color:var(--fraco);text-decoration:none}
|
|
.sub a:hover{color:var(--laranja);background:var(--cinza)}
|
|
@media(max-width:820px){
|
|
.menu .w{overflow-x:auto;flex-wrap:nowrap}
|
|
.sub{display:none!important}
|
|
}
|
|
|
|
footer{background:#000;color:#8D9AB0;padding:26px 0 20px;font-size:15px}
|
|
.frow{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;padding-bottom:18px}
|
|
.fmarca{display:flex;align-items:center;gap:9px;font-family:"Inter",sans-serif;
|
|
font-weight:700;font-size:15px;color:var(--laranja);letter-spacing:.06em;white-space:nowrap}
|
|
.fmarca img{height:22px;width:auto;display:block;filter:brightness(0) invert(1)}
|
|
footer a{color:#8D9AB0;text-decoration:none}
|
|
footer a:hover{color:var(--laranja2)}
|
|
.flinks{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
|
|
.fcont{margin-left:auto;text-align:right;font-size:15px;line-height:1.7}
|
|
@media(max-width:720px){.fcont{margin-left:0;text-align:left}}
|
|
.fbase{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex;
|
|
justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;color:#5A6570}
|
|
|
|
/* The footer sits at the bottom of the screen even when the page is short. */
|
|
body{display:flex;flex-direction:column;min-height:100vh}
|
|
body>footer{margin-top:auto}
|