/* ============================================================================ KIN HQ — editorial design system (by KinCAi) Editorial skin serving the Lush + ASTR the Label brands: · Display face : "Fraunces" (editorial serif, incl. the Kin wordmark) · Body face : "Hanken Grotesk" (UI/body) · Palette : cream canvas, ink, blush/coral #ed8380, sage #c4caa1 · Mood : fashion-magazine — big display headings, thin rules, white sheets floating on warm cream, generous air, editorial photography. (The filename stays lush.css for deploy continuity; not a user-facing name.) ========================================================================== */ /* ---- Fonts ---------------------------------------------------------------- */ @font-face { font-family: "Argue"; src: url("/static/fonts/argue.woff2") format("woff2"), url("/static/fonts/argue.woff") format("woff"); font-weight: 400 700; font-display: swap; } /* Open Sans + Playfair are loaded via a in each page — an @import after @font-face is spec-invalid and silently dropped by browsers. */ /* ---- Design tokens -------------------------------------------------------- */ :root { /* canvas + ink */ --cream: #faf6f1; /* warm paper */ --cream-deep: #f2ebe2; /* section wash */ --sheet: #ffffff; /* card / sheet */ --ink: #2b2827; /* near-black text */ --ink-soft: #6c6460; /* secondary text */ --hair: #e7ded3; /* hairline rules on cream */ --hair-sheet: #eee9e2; /* hairline rules on sheets */ /* brand accents (from Lush CSS) */ --blush: #ed8380; /* primary accent — coral/blush */ --blush-deep: #d95f5c; /* hover / emphasis */ --blush-wash: #fbeceb; /* tint fill */ --sage: #c4caa1; /* secondary accent — muted sage */ --sage-deep: #9aa273; --sage-wash: #eef1e4; /* semantic status (kept soft, editorial) */ --ok: #7f9b6b; /* delivered */ --ok-wash: #eaf0e2; --transit: #c79a5b; /* in transit */ --transit-wash:#f6eddc; --alert: #c9524f; /* exception / delayed */ --alert-wash: #f8e7e6; --idle: #9c948e; /* unknown / pending */ --idle-wash: #efeae4; /* darker foreground inks so small text-on-wash clears WCAG AA in light mode */ --ok-ink: #3f5233; --transit-ink: #7a5a24; --sage-ink: #5f6640; --idle-ink: #5b544f; /* type — Fraunces editorial serif for display + ledes/accents + Hanken Grotesk for UI/body (fashion-magazine, not generic). Kin HQ dropped Lush's proprietary "Argue" face; the @font-face below is left unreferenced. */ --display: "Fraunces", Georgia, serif; --serif: "Fraunces", Georgia, serif; --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* form */ --radius: 14px; --radius-s: 9px; --shadow: 0 1px 2px rgba(43,40,39,.04), 0 12px 34px -22px rgba(43,40,39,.28); --shadow-lift: 0 2px 6px rgba(43,40,39,.06), 0 26px 60px -30px rgba(43,40,39,.42); --shadow-3d: 0 1px 1px rgba(43,40,39,.05), 0 8px 16px -8px rgba(43,40,39,.16), 0 26px 46px -22px rgba(43,40,39,.30); --maxw: 1180px; } /* ---- Dark mode (magazine at night) --------------------------------------- */ html.dark { --cream: #171412; --cream-deep: #1e1a17; --sheet: #211d1a; --ink: #f3ece4; --ink-soft: #b3a89f; --hair: #2f2925; --hair-sheet: #322b26; --blush-wash: #34211f; --sage-wash: #232a20; --ok-wash: #1f2a1c; --transit-wash:#2c2417; --alert-wash: #331d1c; --idle-wash: #262019; /* dark mode: reset the foreground inks to the brighter tokens (legible on dark washes) */ --ok-ink: var(--ok); --transit-ink: var(--transit); --sage-ink: var(--sage-deep); --idle-ink: var(--idle); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -24px rgba(0,0,0,.7); --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.8); --shadow-3d: 0 1px 2px rgba(0,0,0,.5), 0 10px 22px -10px rgba(0,0,0,.6), 0 32px 58px -26px rgba(0,0,0,.85); } /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); background: var(--cream); color: var(--ink); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* app feel: no I-beam / caret / text-selection when clicking empty space */ cursor: default; user-select: none; -webkit-user-select: none; } /* let people actually type in / select inside form fields */ input, textarea { user-select: text; -webkit-user-select: text; cursor: text; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--blush-wash); color: var(--blush-deep); } /* no focus "frame" on mouse click; keep it for keyboard users (a11y) */ :focus:not(:focus-visible) { outline: none; } /* ---- Typography ----------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--ink); margin: 0; line-height: 1.06; letter-spacing: .002em; } h1 { font-size: clamp(2.4rem, 4.6vw, 4.1rem); } h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1rem; } .kicker { font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: var(--blush); } .subtle { color: var(--ink-soft); } .serif-italic { font-family: var(--serif); font-style: italic; } /* editorial lede — italic Fraunces, like a magazine deck */ .lede { font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.5; color: var(--ink-soft); } /* ---- Layout shell --------------------------------------------------------- */ .shell { min-height: 100vh; display: flex; flex-direction: column; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; } main { flex: 1; padding: 34px 0 72px; } .section { margin-top: 40px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 16px; } .rule { height: 1px; background: var(--hair); border: 0; margin: 0; } /* ---- Masthead / nav ------------------------------------------------------- */ .masthead { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hair); } .masthead-in { display: flex; align-items: center; gap: 26px; height: 66px; } .brand { display: flex; align-items: center; gap: 12px; user-select: none; -webkit-tap-highlight-color: transparent; } .brand:focus, .brand:focus-visible, .brand:active { outline: none !important; box-shadow: none !important; } .brand img { -webkit-user-drag: none; user-select: none; } .brand .wordmark { font-family: var(--display); font-weight: 500; font-size: 1.42rem; line-height: 1; letter-spacing: .12em; color: var(--ink); } .brand .divider { width: 1px; height: 22px; background: var(--hair); } .brand .portal-word { font-family: var(--sans); font-weight: 600; font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft); } .nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .nav a { font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-soft); padding: 9px 14px; border-radius: 999px; transition: .16s; } .nav a:hover { color: var(--ink); background: var(--cream-deep); } .nav a.active { color: var(--blush-deep); background: var(--blush-wash); } .nav .nav-dot { display: inline-grid; place-items: center; margin-left: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--blush-deep); color: #fff; font-style: normal; font-size: .6rem; font-weight: 700; vertical-align: 1px; } .nav-tools { display: flex; align-items: center; gap: 8px; margin-left: 6px; } .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--hair); background: var(--sheet); color: var(--ink-soft); cursor: pointer; transition: .16s; } .icon-btn:hover { color: var(--ink); border-color: var(--ink-soft); } /* labeled Dark/Light toggle */ .mode-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); background: var(--sheet); border: 1px solid var(--hair); border-radius: 999px; padding: 8px 13px; cursor: pointer; transition: .15s; white-space: nowrap; } .mode-btn:hover { color: var(--ink); border-color: var(--ink-soft); } .mode-btn .ico-sun { display: none; } html.dark .mode-btn .ico-moon { display: none; } html.dark .mode-btn .ico-sun { display: inline; } /* EN / ES / PT language switch */ .lang-switch { display: inline-flex; border: 1px solid var(--hair); border-radius: 999px; overflow: hidden; background: var(--sheet); } .lang-btn { font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); background: transparent; border: 0; padding: 8px 9px; cursor: pointer; transition: .15s; } .lang-btn:hover { color: var(--ink); } .lang-btn.on { color: #fff; background: var(--blush); } html.dark .lang-btn.on { background: var(--blush-deep); } .whoami { font-size: .78rem; color: var(--ink-soft); } .whoami b { color: var(--ink); font-weight: 600; } /* ---- Sub-nav (module tab bar) -------------------------------------------- */ .subnav { position: sticky; top: 65px; z-index: 30; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: saturate(1.3) blur(8px); border-bottom: 1px solid var(--hair); } .subnav-in { display: flex; align-items: center; gap: 3px; height: 46px; overflow-x: auto; } .subnav-kicker { font-family: var(--sans); font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--blush); font-weight: 700; margin-right: 16px; white-space: nowrap; } .subnav a { font-size: .82rem; font-weight: 500; color: var(--ink-soft); padding: 6px 14px; border-radius: 999px; transition: .15s; white-space: nowrap; } .subnav a:hover { color: var(--ink); background: var(--cream-deep); } .subnav a.on { color: var(--blush-deep); background: var(--blush-wash); } .subnav-search { margin-left: auto; max-width: 240px; width: 100%; flex: none; } .subnav-search input { padding: 6px 12px 6px 32px; font-size: .8rem; } .subnav-search svg { left: 11px; } /* ---- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; font-size: .82rem; letter-spacing: .02em; padding: 11px 20px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: .16s; white-space: nowrap; } .btn-primary { background: var(--ink); color: var(--cream); } .btn-primary:hover { background: #000; } html.dark .btn-primary { background: var(--blush); color: #23110f; } html.dark .btn-primary:hover { background: var(--blush-deep); color:#fff; } .btn-accent { background: var(--blush); color: #fff; } .btn-accent:hover { background: var(--blush-deep); } .btn-ghost { background: transparent; border-color: var(--hair); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); } .btn-sm { padding: 7px 14px; font-size: .76rem; } /* ---- Sheets / cards ------------------------------------------------------- */ .sheet { background: var(--sheet); border: 1px solid var(--hair-sheet); border-radius: var(--radius); box-shadow: var(--shadow); } .pad { padding: 22px 24px; } /* ---- Hero (magazine cover) ------------------------------------------------ */ .cover { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-lift); background: var(--cream-deep); display: grid; grid-template-columns: 1.1fr .9fr; min-height: 340px; } .cover-copy { padding: 40px 42px; display: flex; flex-direction: column; justify-content: center; } .cover-copy h1 { margin: 10px 0 8px; } .cover-copy .lede { color: var(--ink-soft); max-width: 40ch; } .cover-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; } .cover-strip figure { margin: 0; overflow: hidden; position: relative; background: var(--cream-deep); } /* show the WHOLE model (head-to-toe) instead of a cropped center band */ .cover-strip .kb-img { object-fit: contain; object-position: center bottom; } /* ---- Living hero (Ken Burns slideshow) ----------------------------------- */ .kb-panel { position: relative; overflow: hidden; } .kb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; /* bias toward the model's upper body / face */ opacity: 0; transition: opacity 1.3s ease; will-change: transform, opacity; backface-visibility: hidden; } .kb-img.show { opacity: 1; } /* gentle motion — barely-there zoom/pan so the model stays fully visible */ @keyframes kb-zin { from { transform: scale(1.00); } to { transform: scale(1.025); } } @keyframes kb-zout { from { transform: scale(1.025); } to { transform: scale(1.00); } } @keyframes kb-panL { from { transform: scale(1.02) translate(1%, 0); } to { transform: scale(1.02) translate(-1%, 0); } } @keyframes kb-panR { from { transform: scale(1.02) translate(-1%, 0); } to { transform: scale(1.02) translate(1%, 0); } } @keyframes kb-drift{ from { transform: scale(1.00) translate(0, 1%); } to { transform: scale(1.025) translate(-1%, -1%); } } @media (prefers-reduced-motion: reduce) { .kb-img { animation: none !important; transform: none !important; } } /* ---- KPI stat cards ------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stat { background: var(--sheet); border: 1px solid var(--hair-sheet); border-radius: var(--radius); padding: 20px 22px; position: relative; overflow: hidden; box-shadow: var(--shadow); } .stat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blush); } .stat.sage::after { background: var(--sage-deep); } .stat.ok::after { background: var(--ok); } .stat.transit::after { background: var(--transit); } .stat.alert::after { background: var(--alert); } .stat .label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; } .stat .value { font-family: var(--display); font-size: 2.5rem; line-height: 1; margin: 12px 0 4px; } .stat .value small { font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); font-weight: 500; } .stat .foot { font-size: .74rem; color: var(--ink-soft); } .trend { font-weight: 600; font-size: .74rem; } .trend.up { color: var(--ok); } .trend.down { color: var(--alert); } /* ---- Status pills --------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .9; } .pill.delivered { color: var(--ok-ink); background: var(--ok-wash); } .pill.transit { color: var(--transit-ink); background: var(--transit-wash); } .pill.exception { color: var(--alert); background: var(--alert-wash); } .pill.pending { color: var(--idle-ink); background: var(--idle-wash); } /* ---- Tables --------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--hair-sheet); border-radius: var(--radius); background: var(--sheet); } table.data { width: 100%; border-collapse: collapse; font-size: .84rem; } table.data thead th { text-align: left; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; padding: 14px 16px; border-bottom: 1px solid var(--hair-sheet); background: var(--cream); position: sticky; top: 0; } table.data tbody td { padding: 13px 16px; border-bottom: 1px solid var(--hair-sheet); vertical-align: middle; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr { transition: background .12s; } table.data tbody tr:hover { background: var(--cream); } .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82em; letter-spacing: -.01em; } .track-link { color: var(--blush-deep); font-weight: 600; } .track-link:hover { text-decoration: underline; } /* ---- Forms ---------------------------------------------------------------- */ label.field { display: block; margin-bottom: 16px; } label.field > span { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 7px; } input[type=text], input[type=search], input[type=password], input[type=date], select, textarea { width: 100%; font-family: var(--sans); font-size: .9rem; color: var(--ink); background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--radius-s); padding: 11px 13px; transition: .15s; } /* no focus box / ring on fields — the text caret is the only affordance */ input:focus, select:focus, textarea:focus { outline: 0; box-shadow: none; } .searchbar { position: relative; } .searchbar input { padding-left: 40px; } .searchbar svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); } /* ---- Dropzone ------------------------------------------------------------- */ .dropzone { border: 1.5px dashed var(--sage-deep); border-radius: var(--radius); background: var(--sage-wash); padding: 46px 28px; text-align: center; cursor: pointer; transition: .18s; } .dropzone:hover, .dropzone.drag { background: var(--blush-wash); border-color: var(--blush); } .dropzone.reject { background: var(--alert-wash); border-color: var(--alert); } .dropzone h3 { margin-bottom: 6px; } .dropzone .hint { color: var(--ink-soft); font-size: .84rem; } /* ---- Folder browser ------------------------------------------------------- */ .folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .folder { display: flex; align-items: center; gap: 13px; padding: 16px 18px; background: var(--sheet); border: 1px solid var(--hair-sheet); border-radius: var(--radius); transition: .16s; } .folder:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); } .folder .fico { width: 40px; height: 40px; border-radius: 10px; background: var(--cream-deep); display: grid; place-items: center; color: var(--sage-deep); flex: none; } .folder .fname { font-weight: 600; font-size: .9rem; } .folder .fmeta { font-size: .74rem; color: var(--ink-soft); } /* ---- Home module tiles ---------------------------------------------------- */ .module-card { display: block; background: var(--sheet); border: 1px solid var(--hair-sheet); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); transition: .16s; } a.module-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); } .module-card.ghost { background: transparent; border-style: dashed; box-shadow: none; } .module-card.ghost:hover { transform: none; box-shadow: none; } /* ---- Carrier chips -------------------------------------------------------- */ .carrier { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.7rem; letter-spacing:.06em; padding:3px 9px; border-radius:6px; } .carrier.ups { color:#4b2e13; background:#f4e3c7; } .carrier.fedex { color:#4d148c; background:#ece3f6; } .carrier.usps { color:#004b87; background:#dde7f2; } .carrier.dhl { color:#8a6d00; background:#fbf1c4; } .carrier.other, .carrier.image, .carrier.file { color: var(--ink-soft); background: var(--cream-deep); } html.dark .carrier.ups { color: #f4e3c7; background: #3f2a12; } html.dark .carrier.fedex { color: #e7d8f6; background: #361659; } html.dark .carrier.usps { color: #d3e2f2; background: #0b2f52; } html.dark .carrier.dhl { color: #fbf1c4; background: #463a00; } /* ---- Chart frame ---------------------------------------------------------- */ .chart-card { background: var(--sheet); border: 1px solid var(--hair-sheet); border-radius: var(--radius); padding: 20px 22px 12px; box-shadow: var(--shadow); } .chart-card canvas { max-height: 260px; } /* ---- Code viewer (Automation Vault) -------------------------------------- */ .code-sheet { border-radius: var(--radius); overflow: auto; border: 1px solid var(--hair-sheet); box-shadow: var(--shadow); max-height: 78vh; } .code-sheet pre { margin: 0; } .code-sheet code.hljs { padding: 22px 24px; font-size: .8rem; line-height: 1.65; font-family: ui-monospace, "SF Mono", Menlo, monospace; border-radius: var(--radius); } /* ---- 3D depth, bevel & mouse-follow tilt (executive / corporate) --------- */ .sheet, .stat, .chart-card, .module-card, .folder { box-shadow: var(--shadow-3d), inset 0 1px 0 rgba(255,255,255,.5); background-image: linear-gradient(177deg, var(--sheet), color-mix(in srgb, var(--cream-deep) 22%, var(--sheet))); } html.dark .sheet, html.dark .stat, html.dark .chart-card, html.dark .module-card, html.dark .folder { box-shadow: var(--shadow-3d), inset 0 1px 0 rgba(255,255,255,.06); background-image: linear-gradient(177deg, var(--sheet), color-mix(in srgb, #000 14%, var(--sheet))); } .stat, .chart-card, .module-card, .folder { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease; transform-style: preserve-3d; will-change: transform; } /* ---- empty state ("no data yet") ----------------------------------------- */ .nodata { text-align: center; padding: 56px 28px; margin-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 9px; } .nodata-mark { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--sage-deep); background: var(--sage-wash); margin-bottom: 2px; } .nodata h3 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; margin: 0; } .nodata p { color: var(--ink-soft); max-width: 46ch; margin: 0; font-size: .9rem; line-height: 1.55; } .stat:hover, .chart-card:hover, .folder:hover, .module-card:hover { box-shadow: var(--shadow-lift); } #usMapSvg { filter: drop-shadow(0 10px 18px rgba(43,40,39,.16)); } html.dark #usMapSvg { filter: drop-shadow(0 12px 22px rgba(0,0,0,.6)); } @media (prefers-reduced-motion: reduce) { .stat, .chart-card, .module-card, .folder { transition: none; } } /* ---- Flash messages ------------------------------------------------------- */ .flash { padding: 12px 16px; border-radius: var(--radius-s); font-size: .85rem; margin-bottom: 14px; border: 1px solid; } .flash.ok { background: var(--ok-wash); border-color: var(--ok); color: var(--ok-ink); } .flash.error { background: var(--alert-wash); border-color: var(--alert); color: var(--alert); } .flash.info { background: var(--sage-wash); border-color: var(--sage-deep); color: var(--sage-ink); } /* ---- Login (centered card over full-bleed rotating imagery) -------------- */ .login-full { position: relative; min-height: 100vh; overflow: hidden; } .login-bg { position: absolute; inset: 0; z-index: 0; } .login-veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 50% 30%, rgba(20,17,14,.42), rgba(20,17,14,.72)); } .login-center { position: relative; z-index: 2; min-height: 100vh; display: grid; place-items: center; padding: 28px; } .login-stack { width: 100%; max-width: 402px; } .login-card { background: color-mix(in srgb, var(--sheet) 88%, transparent); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 20px; padding: 40px 36px; box-shadow: var(--shadow-lift); } .login-card .lush-word { font-family: var(--display); font-size: 1.75rem; font-weight: 500; letter-spacing: .2em; padding-left: .2em; color: var(--ink); } .login-tagline { text-align: center; color: #fff; font-family: var(--serif); font-style: italic; font-size: 1rem; margin-top: 22px; opacity: .92; text-shadow: 0 1px 16px rgba(0,0,0,.55); } /* ---- Entrance reveal (luxury transition after sign-in) ------------------- */ .hq-intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(130% 130% at 50% 38%, #221d1a 0%, #14110e 72%); animation: hqLift 2.5s ease forwards; will-change: opacity; } .hq-intro .in { text-align: center; animation: hqIn 1s ease both; } .hq-intro .mark { font-family: var(--display); font-size: 1.8rem; letter-spacing: .55em; color: #efe6da; padding-left: .55em; } .hq-intro .line { height: 1px; width: 0; margin: 20px auto 0; background: linear-gradient(90deg, transparent, var(--blush), transparent); animation: hqLine 1.4s .35s cubic-bezier(.2,.7,.2,1) forwards; } .hq-intro .word { font-family: var(--sans); font-size: .62rem; letter-spacing: .42em; text-transform: uppercase; color: #cdbfb0; margin-top: 16px; opacity: 0; animation: hqWord 1s .6s ease forwards; } @keyframes hqIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes hqLine { to { width: 240px; } } @keyframes hqWord { to { opacity: 1; } } @keyframes hqLift { 0%, 55% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .hq-intro { animation: hqFade .6s ease forwards; } .hq-intro .in, .hq-intro .line, .hq-intro .word { animation: none; } } @keyframes hqFade { to { opacity: 0; visibility: hidden; } } /* ---- Footer --------------------------------------------------------------- */ .foot { border-top: 1px solid var(--hair); padding: 26px 0; color: var(--ink-soft); font-size: .78rem; } .foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ---- Utilities ------------------------------------------------------------ */ .row { display: flex; gap: 12px; align-items: center; } .between { justify-content: space-between; } .wrap-gap { flex-wrap: wrap; } .grow { flex: 1; } .right { text-align: right; } .center { text-align: center; } .muted { color: var(--ink-soft); } .mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px} .mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px} .chiprow { display: flex; gap: 8px; flex-wrap: wrap; } .tag-filter { font-size:.78rem; font-weight:600; color:var(--ink-soft); padding:7px 13px; border-radius:999px; border:1px solid var(--hair); background:var(--sheet); cursor:pointer; } .tag-filter.on { color:var(--blush-deep); background:var(--blush-wash); border-color:var(--blush); } /* ---- Split grids (responsive two-up) ------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .split.wide { grid-template-columns: 1.5fr 1fr; } /* ---- Responsive ----------------------------------------------------------- */ @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .split, .split.wide { grid-template-columns: 1fr; } .cover { grid-template-columns: 1fr; } .cover-strip { grid-template-columns: repeat(2,1fr); height: 200px; } .login-page { grid-template-columns: 1fr; } .login-art { display: none; } .nav a.hide-sm { display: none; } } @media (max-width: 640px) { .masthead-in { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 12px; } .nav { flex-wrap: wrap; } } @media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } .wrap { padding: 0 16px; } }