/* * atag-site.css — shared design system for the A-Tag web pages * (index.html, verify.html, verify_lookup.html), served by the A-Tag server. * * Mirrors the "Arctic Graphite" system of the corporate site (aermob.com, * web-repo/public/css/site.css): same color tokens, same fonts, same * dark-default + light-toggle chrome (topbar + footer + to-top). Kept as a * standalone stylesheet because these pages run on the A-Tag FastAPI origin, * not the static Astro site. Token names are kept identical to site.css so the * two stay visually in lockstep. * * Fonts (load in each page's ): * Open Sans (body) · Montserrat (eyebrows/UI) · Playfair Display (wordmark/headings) */ /* ── LIGHT THEME — "Arctic Graphite" + brass accent ── */ :root{ --sumi:#15191B; /* footer / dark panels */ --sumi-2:#1E2326; --paper:#F2F4F5; /* page surface — arctic-graphite near-white */ --paper-2:#E5EAF1; /* tinted band */ --paper-rail:#D7E0EC; /* raised panels — bluish ice */ --ink:#222A2C; /* graphite text */ --mist:#5A666A; /* secondary text */ --mist-d:#8A9498; --jade:#0A739C; /* primary accent — deep cyan (AA on near-white) */ --jade-soft:#1190C0; --cyan:#18A8E0; /* bright cyan */ --cyan-soft:#4FBEEE; --brass:#8A6A14; /* secondary accent — brass (AA for small text) */ --brass-strong:#C9A24B; --shu:#B5472B; /* vermilion seal */ --line:rgba(34,42,44,.14); --line-d:rgba(255,255,255,.10); --topbar:rgba(242,244,245,.82); --card:#ffffff; --card-line:rgba(34,42,44,.10); --scrollthumb:rgba(34,42,44,.18); --ok:#0A739C; --ok-soft:rgba(10,115,156,.10); --warn:#B0791B; --warn-soft:rgba(176,121,27,.12); --bad:#B5472B; --bad-soft:rgba(181,71,43,.10); --ease:cubic-bezier(.22,.61,.36,1); --radius:16px; --radius-sm:10px; color-scheme:light; } /* ── DARK THEME (default; toggled via [data-theme]) ── */ :root[data-theme="dark"]{ --sumi:#171B1E; --sumi-2:#23282C; --paper:#0F1315; --paper-2:#191E21; --paper-rail:#121618; --ink:#ECEDE6; --mist:#9AA39D; --mist-d:#727B76; --jade:#2C9488; --jade-soft:#42B3A4; --cyan:#3DBBEC; --cyan-soft:#6FD0F4; --brass:#C9A24B; --brass-strong:#D4AE55; --shu:#C25A3D; --line:rgba(255,255,255,.10); --line-d:rgba(255,255,255,.07); --topbar:rgba(15,19,21,.82); --card:#171B1E; --card-line:rgba(255,255,255,.08); --scrollthumb:rgba(255,255,255,.16); --ok:#42B3A4; --ok-soft:rgba(66,179,164,.12); --warn:#D4AE55; --warn-soft:rgba(212,174,85,.12); --bad:#E07A5F; --bad-soft:rgba(224,122,95,.12); color-scheme:dark; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;background:var(--paper);-webkit-text-size-adjust:100%} body{ font-family:"Open Sans",system-ui,sans-serif; background:var(--paper);color:var(--ink); font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased; min-height:100vh;display:flex;flex-direction:column; } a{color:inherit;text-decoration:none} ::selection{background:var(--jade);color:#fff} img{max-width:100%} /* ── Shared type primitives ── */ .eyebrow{font-family:"Montserrat",sans-serif;font-size:11px;letter-spacing:.34em; text-transform:uppercase;font-weight:500;color:var(--jade)} :root:not([data-theme="dark"]) .eyebrow{color:var(--brass)} h1,h2,h3,h4{font-weight:500;letter-spacing:.01em;line-height:1.2;color:var(--ink)} .serif{font-family:"Playfair Display",serif;font-weight:500} /* ── Top bar (sticky, mirrors corporate .topbar; carries brand + theme toggle) ── */ .atag-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px; height:74px;padding:0 clamp(18px,4vw,48px);background:var(--topbar); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)} .atag-brand{display:flex;align-items:center;gap:12px} .atag-brand img{height:50px;width:auto;display:block;transition:filter .2s var(--ease)} :root[data-theme="dark"] .atag-brand img{filter:brightness(1.8) saturate(1.1)} .atag-brand .crumb{font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:var(--mist);padding-left:14px;margin-left:2px; border-left:1px solid var(--line)} .atag-brand .crumb b{color:var(--ink);font-weight:600} .atag-topbar .spacer{margin-left:auto} .atag-navlink{font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.06em; color:var(--mist);transition:color .2s;text-transform:uppercase;font-weight:500} .atag-navlink:hover{color:var(--jade)} .theme-toggle{width:32px;height:32px;border:none;background:transparent;cursor:pointer; color:var(--mist);display:grid;place-items:center;transition:color .2s} .theme-toggle:hover{color:var(--jade)} .theme-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;grid-area:1/1} :root[data-theme="dark"] .theme-toggle .ic-moon{display:none} :root:not([data-theme="dark"]) .theme-toggle .ic-sun{display:none} /* ── Layout helpers ── */ main{flex:1 0 auto} .container{max-width:960px;margin:0 auto;padding:0 clamp(18px,4vw,32px)} .container-narrow{max-width:640px;margin:0 auto;padding:0 clamp(18px,4vw,24px)} .section-eyebrow{display:inline-block;margin-bottom:14px} .section-title{font-family:"Playfair Display",serif;font-weight:500; font-size:clamp(24px,3.2vw,34px);letter-spacing:.01em;color:var(--ink)} /* ── Cards / surfaces ── */ .card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius); padding:clamp(24px,4vw,36px);box-shadow:0 10px 40px -20px rgba(0,0,0,.35)} /* ── Buttons ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:"Montserrat",sans-serif;font-weight:500;font-size:14px;letter-spacing:.04em; padding:13px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer; transition:transform .15s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s} .btn svg{width:18px;height:18px} .btn-primary{background:var(--cyan);color:#10202A;border-color:var(--cyan); box-shadow:0 10px 30px -10px rgba(24,168,224,.6)} .btn-primary:hover{background:var(--brass-strong);border-color:var(--brass-strong); transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--jade);color:var(--jade)} /* ── Reveal-on-scroll ── */ .reveal{opacity:0;transform:translateY(22px); transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} /* ── Footer (verbatim structure from corporate Footer.astro / site.css .foot) ── */ .foot{background:var(--sumi);color:#C9CEC9;margin-top:auto; padding:clamp(48px,8vh,80px) clamp(20px,4vw,64px) 36px} .foot-inner{max-width:1170px;margin:0 auto} .foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:44px} .foot-brand .foot-logo{height:64px;width:auto;display:block} .foot-brand p{font-size:13.5px;line-height:1.85;color:var(--mist-d);margin-top:18px; max-width:34ch;font-weight:300} .fcol h4{font-family:"Montserrat",sans-serif;font-size:11px;letter-spacing:.24em; text-transform:uppercase;color:var(--mist-d);margin-bottom:18px;font-weight:500} .fcol a{display:block;font-size:14px;color:#C9CEC9;padding:7px 0;font-weight:300;transition:color .2s} .fcol a:hover{color:#fff} .foot-socials{display:flex;justify-content:space-between;gap:28px 56px;flex-wrap:wrap; margin-top:44px;padding-top:30px;border-top:1px solid var(--line-d)} .foot-share-label{font-family:"Montserrat",sans-serif;font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--mist-d);display:block;margin-bottom:12px} .foot-share-icons{display:flex;gap:14px} .share-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center; color:#C9CEC9;border:1px solid var(--line-d);background:transparent;cursor:pointer; transition:color .2s,border-color .2s,transform .2s} .share-ic:hover{color:#fff;border-color:var(--cyan);transform:translateY(-2px)} .share-ic svg{width:16px;height:16px;fill:currentColor} .foot-bar{display:flex;align-items:center;justify-content:space-between;gap:24px; margin-top:52px;padding-top:24px;border-top:1px solid var(--line-d); font-size:12px;color:var(--mist-d);letter-spacing:.04em;flex-wrap:wrap} .foot-bar a{color:var(--mist-d);transition:color .2s} .foot-bar a:hover{color:#fff} /* ── Jump-to-top ── */ .to-top{position:fixed;bottom:26px;right:26px;z-index:40;width:46px;height:46px; border-radius:50%;display:grid;place-items:center;cursor:pointer; background:var(--cyan);color:#10202A;border:1px solid var(--cyan); box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .25s var(--ease),transform .25s var(--ease),background .2s,border-color .2s} .to-top.show{opacity:1;visibility:visible;transform:none} .to-top:hover{background:var(--brass-strong);border-color:var(--brass-strong)} .to-top svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* ── Toast ── */ .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px); background:var(--sumi-2);color:#fff;padding:11px 24px;border-radius:10px;font-size:13px; border:1px solid var(--line-d);opacity:0;transition:opacity .3s,transform .3s; pointer-events:none;z-index:100} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} :focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:3px} /* ── Responsive ── */ @media(max-width:1080px){ .foot-grid{grid-template-columns:repeat(3,1fr)} .foot-brand{grid-column:1/-1;margin-bottom:6px} } @media(max-width:640px){ .foot-grid{grid-template-columns:1fr 1fr;gap:30px} .atag-brand .crumb{display:none} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.001ms!important} .reveal{opacity:1;transform:none} html{scroll-behavior:auto} }