ef95dcc327
All checks were successful
Build and deploy / Validate source (push) Successful in 5s
Build and deploy / Integration suite on a real stack (push) Successful in 2m44s
Build and deploy / Secret scan and release gate (push) Successful in 6s
Build and deploy / Publish images (push) Successful in 1m2s
Making the body a column to keep the footer at the bottom shrank every block centred with auto margins (the account area, and two of the Site's sections) to the width of its content. They take the full width again, up to their max-width, exactly as before. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
88 lines
4.9 KiB
CSS
88 lines
4.9 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}
|
|
/* In a column, auto side margins shrink a box to its content: the page's
|
|
centred blocks keep their full width, up to their max-width, as before. */
|
|
body>.w{width:100%}
|