223854e392
All checks were successful
Build and deploy / Validate source (push) Successful in 4s
Build and deploy / Integration suite on a real stack (push) Successful in 2m37s
Build and deploy / Secret scan and release gate (push) Successful in 5s
Build and deploy / Publish images (push) Successful in 59s
"Meus pedidos" was still the prototype's plain page. It now has the Site's stripe, header and footer, and its type, colours and cards: each order shows its status, a progress line through production (or the correction the team asked for), the items with metres and price, where it goes, and on request the history, the files to download and the correction form. Carts waiting for payment are listed with a button to pay. Sign-in and account creation are side by side. The header, stripe, menu, footer and tokens moved from index.html's inline style to site-shell.css, which both pages load. The header's search box, which did nothing, is gone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
81 lines
4.6 KiB
CSS
81 lines
4.6 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}
|