/* ============================================================================ ASICO HR Portal — design system Ported from RealEstateApp-Astro's language (token layers, liquid glass, film grain, aurora canvas, AMOLED dark mode, Linear-style elevation + motion) and retuned to the brands' real Elementor palettes: ASICO navy #10325B / deep #00152C / gold #F3B966 Yardscape green #92AF4D / accent #61CE70 `.dark` on flips every token (set server-side from a cookie, so there is no flash). `data-co` on swaps the accent to the active company. ========================================================================= */ :root { --radius: 0.85rem; --r-sm: calc(var(--radius) - 4px); --r-md: calc(var(--radius) - 2px); --r-lg: var(--radius); --r-xl: 20px; --r-2xl: 24px; /* canvas sits a step below the surfaces so translucent glass visibly floats */ --background: #e9edf4; --foreground: #0d1b2a; --card: #ffffff; --card-2: #f8fafd; --primary: #10325B; /* ASICO Blue */ --primary-fg: #ffffff; --select: #00152C; /* ASICO deep navy — active/selected */ --brand: #F3B966; /* ASICO Gold — highlights */ --brand-ink: #6b4a12; --muted: #eef2f8; --muted-fg: #5a6478; --accent: #e8eef7; --accent-fg: #10325B; --success: #0e9f6e; --success-bg: #e7f6ee; --warning: #c27803; --danger: #d33241; --danger-bg: #fdeaec; --border: #e2e8f2; --field: #f4f6fb; --ring: #10325B; --glass-light: #ffffff; --bg-glow-a: rgba(16, 50, 91, .10); --bg-glow-b: rgba(243, 185, 102, .10); --tint-a: rgba(13, 27, 42, .09); --tint-b: rgba(13, 27, 42, .07); --tint-c: rgba(13, 27, 42, .16); --tint-d: rgba(13, 27, 42, .24); --shadow-btn: rgba(16, 50, 91, .38); --grain: .026; --sh-sm: 0 1px 2px -1px var(--tint-a), 0 2px 6px -2px var(--tint-b); --sh-md: 0 2px 6px -2px var(--tint-b), 0 10px 24px -8px var(--tint-c); --sh-lg: 0 18px 44px -14px var(--tint-d); --sh-btn: 0 6px 16px -6px var(--shadow-btn); --content-max: 1280px; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, monospace; } /* Yardscape accent — green, from its own kit */ :root[data-co="yardscape"] { --primary: #6f8c33; --select: #4f6524; --brand: #B9D465; --brand-ink: #3c4a19; --accent: #eef3e2; --accent-fg: #4f6524; --ring: #6f8c33; --bg-glow-a: rgba(146, 175, 77, .13); --bg-glow-b: rgba(97, 206, 112, .10); --shadow-btn: rgba(79, 101, 36, .36); } /* AMOLED dark — true-black canvas, near-black surfaces, borders carry the depth */ .dark { --background: #000000; --foreground: #e9edf6; --card: #0a0d14; --card-2: #0e121b; --primary: #4f8fd4; --primary-fg: #04121f; --select: #7db2ea; --brand: #F3B966; --brand-ink: #1a1204; --muted: #101520; --muted-fg: #98a3b8; --accent: #141c2a; --accent-fg: #a9c9ee; --success: #2fbf8f; --success-bg: #0c231b; --danger: #f0685c; --danger-bg: #2a1114; --border: #1b212e; --field: #0c1017; --ring: #7db2ea; --glass-light: rgba(255, 255, 255, .34); --bg-glow-a: rgba(79, 143, 212, .10); --bg-glow-b: rgba(243, 185, 102, .06); --tint-a: rgba(0, 0, 0, .5); --tint-b: rgba(0, 0, 0, .4); --tint-c: rgba(0, 0, 0, .6); --tint-d: rgba(0, 0, 0, .72); --shadow-btn: rgba(79, 143, 212, .28); --grain: .038; } .dark[data-co="yardscape"] { --primary: #a6c65e; --primary-fg: #101705; --select: #c2dc86; --brand: #B9D465; --accent: #161e0d; --accent-fg: #c2dc86; --ring: #a6c65e; --bg-glow-a: rgba(166, 198, 94, .11); --bg-glow-b: rgba(97, 206, 112, .07); --shadow-btn: rgba(166, 198, 94, .26); } /* ------------------------------------------------------------------ base */ * { box-sizing: border-box; border-color: var(--border); } /* The `hidden` attribute must always win. Every rule below that sets `display` on a component (.drawer, .savebar, .pv, .acaps ...) would otherwise beat the UA's [hidden] rule and leave the element permanently on screen. */ [hidden] { display: none !important; } html { color-scheme: light; scroll-behavior: smooth; } html.dark { color-scheme: dark; } body { margin: 0; min-height: 100vh; font: 15px/1.55 var(--font-sans); letter-spacing: -0.006em; color: var(--foreground); background: radial-gradient(1100px 520px at 100% -18%, var(--bg-glow-a), transparent 62%), radial-gradient(760px 400px at -8% 8%, var(--bg-glow-b), transparent 60%), var(--background); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* film grain — breaks digital flatness; pure texture, never intercepts input */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection { background: color-mix(in srgb, var(--primary) 24%, transparent); } * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--foreground) 17%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } /* Inline icons ship without width/height attributes. Give every SVG a sane default so an un-targeted one can never blow up to the SVG default size (this is what made the sign-in padlock render ~170px tall). */ svg { width: 1em; height: 1em; flex: 0 0 auto; display: inline-block; vertical-align: -0.125em; } a { color: var(--primary); text-underline-offset: 2px; } h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.022em; font-weight: 650; } h1 { font-size: 1.55rem; } h2 { font-size: 1.08rem; margin: 2rem 0 .85rem; } code { font: 12px/1.4 var(--font-mono); background: var(--muted); padding: .12rem .34rem; border-radius: 5px; } .sub { color: var(--muted-fg); margin: .3rem 0 0; font-size: .9rem; letter-spacing: 0; } .muted { color: var(--muted-fg); } .sm { font-size: .84rem; } .right { text-align: right; } .nowrap { white-space: nowrap; } .mt { margin-top: 1.1rem; } .err { color: var(--danger); } /* ---------------------------------------------------------------- motion */ @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .wrap { animation: pageIn .42s cubic-bezier(.22,.61,.36,1) both; } .rise { animation: rise .5s cubic-bezier(.22,.61,.36,1) both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } } /* ----------------------------------------------------- liquid glass layer */ /* 1 translucent saturated base · 2 inner rim light + bottom shade 3 pointer-lit specular sweep (--gx/--gy from JS) · 4 edge ring · 5 layered depth */ .glass { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 62%, transparent), color-mix(in srgb, var(--card) 80%, transparent)); backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35); border: 1px solid color-mix(in srgb, var(--foreground) 11%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-light) 70%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--foreground) 5%, transparent), 0 2px 8px -4px var(--tint-b), 0 18px 44px -18px var(--tint-d); } .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(360px circle at var(--gx, 30%) var(--gy, -20%), color-mix(in srgb, var(--glass-light) 22%, transparent), transparent 62%); opacity: 0; transition: opacity .35s ease; } .glass:hover::before { opacity: 1; } /* spotlight border — card edge illuminates under the cursor */ .spot::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), color-mix(in srgb, var(--primary) 55%, transparent), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; } .spot:hover::after { opacity: 1; } /* -------------------------------------------------------------- top bar */ .topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: var(--content-max); margin: .75rem auto 0; padding: .55rem .8rem; border-radius: var(--r-xl); width: calc(100% - 2rem); } .brand { display: flex; align-items: center; gap: .6rem; min-width: 0; } .brand img { max-height: 20px; max-width: 118px; width: auto; height: auto; display: block; } .brand .divider { width: 1px; height: 22px; background: var(--border); } .brand .pname { font-size: .82rem; font-weight: 600; color: var(--muted-fg); letter-spacing: .01em; white-space: nowrap; } .mainnav { display: flex; gap: .2rem; flex-wrap: wrap; } .mainnav a { color: var(--muted-fg); text-decoration: none; font-size: .875rem; font-weight: 500; padding: .4rem .7rem; border-radius: var(--r-md); transition: background .18s, color .18s; } .mainnav a:hover { background: var(--accent); color: var(--accent-fg); } .mainnav a[aria-current="page"] { background: var(--accent); color: var(--accent-fg); font-weight: 600; } .topright { margin-left: auto; display: flex; align-items: center; gap: .5rem; } .who { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--muted-fg); padding-right: .2rem; } .who .ava { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--primary-fg); font-size: .72rem; font-weight: 700; } .iconbtn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: var(--r-md); border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--muted-fg); cursor: pointer; transition: .18s; } .iconbtn:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 22%, transparent); } .iconbtn svg { width: 16px; height: 16px; } .dark .sun { display: none; } :root:not(.dark) .moon { display: none; } .coswitch { position: relative; display: flex; align-items: center; } .coswitch select { appearance: none; font: inherit; font-size: .84rem; font-weight: 600; padding: .38rem 1.7rem .38rem .62rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--field); color: var(--foreground); cursor: pointer; } .coswitch .chev { position: absolute; right: .5rem; pointer-events: none; color: var(--muted-fg); width: 13px; height: 13px; } .wrap { max-width: var(--content-max); margin: 0 auto; padding: 1.5rem 1rem 3.5rem; } .foot { text-align: center; color: var(--muted-fg); font-size: .78rem; padding: 0 1rem 2.2rem; } .crumb { margin-bottom: .6rem; font-size: .86rem } .crumb a { color: var(--muted-fg); text-decoration: none; } .crumb a:hover { color: var(--primary); } /* -------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: .4rem; justify-content: center; font: inherit; font-size: .875rem; font-weight: 550; cursor: pointer; text-decoration: none; padding: .5rem .9rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); color: var(--foreground); transition: transform .12s, box-shadow .18s, background .18s, border-color .18s; box-shadow: var(--sh-sm); } .btn:hover { transform: translateY(-1px); box-shadow: var(--sh-md); } .btn:active { transform: translateY(0); } .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #fff), var(--primary)); color: var(--primary-fg); border-color: transparent; box-shadow: var(--sh-btn); } .btn.ghost { background: color-mix(in srgb, var(--card) 65%, transparent); } .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, transparent); background: transparent; box-shadow: none; } .btn.danger:hover { background: var(--danger-bg); } .btn.sm { padding: .3rem .58rem; font-size: .8rem; } .btn.block { width: 100%; margin-top: .35rem; padding: .6rem; } .inline { display: inline; } .actions { margin-top: 1.2rem; display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; } .actions.col { flex-direction: column; align-items: stretch; } .headbtns { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .listhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } /* ---------------------------------------------------------------- flash */ .flash { display: flex; align-items: flex-start; gap: .5rem; padding: .7rem .9rem; border-radius: var(--r-md); margin: 0 0 1.2rem; font-size: .9rem; border: 1px solid; box-shadow: var(--sh-sm); } .flash.ok { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); } .flash.err { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); } /* ------------------------------------------------------- company picker */ .picker { max-width: 780px; margin: 5vh auto 0; text-align: center; } .picker h1 { font-size: 1.7rem; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin-top: 2rem; } .cocard { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-decoration: none; color: var(--foreground); border-radius: var(--r-2xl); padding: 2rem 1.5rem 1.6rem; transition: transform .2s cubic-bezier(.22,.61,.36,1); animation: rise .5s cubic-bezier(.22,.61,.36,1) both; } .cocard:hover { transform: translateY(-4px); } .cocard .colog { max-height: 46px; max-width: 168px; width: auto; height: auto; margin-bottom: .55rem; } .cocard strong { font-size: 1.02rem; font-weight: 650; } .cocard .host { font-size: .8rem; color: var(--muted-fg); } .cocard .go { margin-top: .5rem; font-size: .78rem; font-weight: 650; color: var(--primary); display: flex; align-items: center; gap: .3rem; } /* ----------------------------------------------------------- stat tiles */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .85rem; margin: 1.35rem 0; } .stat { border-radius: var(--r-xl); padding: .95rem 1.05rem; animation: rise .5s cubic-bezier(.22,.61,.36,1) both; } .stat .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-fg); font-weight: 650; } .stat .v { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; margin-top: .2rem; line-height: 1.1; } .stat .v.accent { color: var(--primary); } .stat .d { font-size: .74rem; color: var(--muted-fg); margin-top: .1rem; } /* --------------------------------------------------------------- tables */ .tblwrap { border-radius: var(--r-2xl); overflow: hidden; } .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .885rem; } .tbl th { background: color-mix(in srgb, var(--muted) 60%, transparent); text-align: left; font-size: .69rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-fg); font-weight: 700; padding: .62rem .8rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .tbl td { padding: .6rem .8rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 62%, transparent); vertical-align: middle; } .tbl tbody tr:last-child td { border-bottom: none; } .tbl tbody tr { transition: background .15s; } .tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 55%, transparent); } .nm { font-weight: 600; text-decoration: none; color: var(--foreground); } .nm:hover { color: var(--primary); } .av { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; display: block; background: var(--muted); box-shadow: var(--sh-sm); } .av.empty { display: grid; place-items: center; font-size: .82rem; font-weight: 700; background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--select)); color: #fff; } .pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; padding: .22rem .5rem; border-radius: 99px; white-space: nowrap; } .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .pill.on { background: var(--success-bg); color: var(--success); } .pill.off { background: var(--muted); color: var(--muted-fg); } .deptchip { font-size: .76rem; font-weight: 600; padding: .2rem .5rem; border-radius: 7px; background: var(--accent); color: var(--accent-fg); white-space: nowrap; } /* -------------------------------------------------------------- filters */ .filters { display: flex; gap: .55rem; margin: 1.15rem 0 1rem; flex-wrap: wrap; align-items: center; } .searchwrap { position: relative; flex: 1; min-width: 230px; display: flex; align-items: center; } .searchwrap svg { position: absolute; left: .65rem; width: 15px; height: 15px; color: var(--muted-fg); pointer-events: none; } .searchwrap input { width: 100%; padding-left: 2.05rem !important; } .count { color: var(--muted-fg); font-size: .82rem; margin-left: auto; } .empty-state { text-align: center; color: var(--muted-fg); padding: 3rem 1rem; } /* ---------------------------------------------------------------- forms */ .card { border-radius: var(--r-2xl); padding: 1.35rem; } input, select, textarea { font: inherit; font-size: .885rem; color: var(--foreground); padding: .52rem .68rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--field); transition: border-color .16s, box-shadow .16s, background .16s; } input:focus, select:focus, textarea:focus { outline: none; background: var(--card); border-color: color-mix(in srgb, var(--ring) 65%, transparent); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--ring) 15%, transparent); } input::placeholder, textarea::placeholder { color: var(--muted-fg); opacity: .75; } .form label { display: block; font-size: .8rem; font-weight: 600; color: var(--foreground); margin-bottom: .9rem; } .form input, .form select, .form textarea { width: 100%; margin-top: .3rem; font-weight: 400; } .form textarea { resize: vertical; min-height: 84px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; } .form fieldset { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.05rem .25rem; margin: .4rem 0 1.15rem; background: color-mix(in srgb, var(--muted) 34%, transparent); } .form legend { font-size: .69rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-fg); font-weight: 700; padding: 0 .4rem; } .chk { display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .855rem; margin-bottom: .55rem; } .chk input { width: auto; margin: 0; } .editcols { display: grid; grid-template-columns: 1fr 272px; gap: 1.7rem; } .side { border-left: 1px solid var(--border); padding-left: 1.4rem; } .photobox .lbl { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .5rem; } .pv { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-xl); background: var(--muted); display: block; margin-bottom: .7rem; box-shadow: var(--sh-md); } .pv.empty { display: grid; place-items: center; color: var(--muted-fg); font-size: .82rem; border: 1px dashed color-mix(in srgb, var(--foreground) 18%, transparent); background: color-mix(in srgb, var(--muted) 50%, transparent); } .hint { font-size: .73rem; color: var(--muted-fg); margin: .45rem 0 1.1rem; line-height: 1.45; } input[type=file] { padding: .4rem; background: var(--card); cursor: pointer; } input[type=file]::file-selector-button { font: inherit; font-size: .78rem; font-weight: 600; margin-right: .6rem; cursor: pointer; padding: .32rem .6rem; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--muted); color: var(--foreground); } /* ------------------------------------------------------------ responsive */ @media (max-width: 900px) { .grid2, .editcols { grid-template-columns: 1fr; } .side { border-left: none; border-top: 1px solid var(--border); padding: 1.4rem 0 0; margin-top: .5rem; } } /* The bar holds brand + up to 7 nav links + company switcher + theme + user + sign-out. Below ~1200px that will not fit on one line, so put the nav on its own full-width row rather than letting `topright` wrap awkwardly. */ @media (max-width: 1200px) { .topbar { row-gap: .3rem; } .mainnav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; margin-top: .1rem; border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); padding-top: .35rem; } .mainnav::-webkit-scrollbar { display: none; } .mainnav a { white-space: nowrap; } } @media (max-width: 780px) { .topbar { gap: .55rem; } .brand .pname, .brand .divider { display: none; } .who span:not(.ava) { display: none; } .tblwrap { overflow-x: auto; } .tbl { min-width: 760px; } } /* ------------------------------------------------- theme-aware logo swap */ /* .onlight = ink logo for light surfaces · .ondark = white logo for dark surfaces */ :root:not(.dark) .ondark { display: none !important; } .dark .onlight { display: none !important; } .pagehead { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .colog-inline { max-height: 26px; max-width: 118px; width: auto; height: auto; display: block; padding-right: .85rem; border-right: 1px solid var(--border); } .titleblock { min-width: 0; } /* ========================================================================== VISUAL TEAM BUILDER ======================================================================== */ .bhint { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted-fg); margin: 1.1rem 0 1rem; padding: .7rem .95rem; border-radius: var(--r-md); border: 1px dashed color-mix(in srgb, var(--foreground) 16%, transparent); background: color-mix(in srgb, var(--muted) 40%, transparent); } .bhint strong { color: var(--foreground); font-weight: 650; } .board { display: flex; gap: .9rem; align-items: flex-start; overflow-x: auto; overflow-y: visible; padding: .2rem .2rem 1.4rem; margin: 0 -.2rem; scroll-snap-type: x proximity; } .col { flex: 0 0 268px; border-radius: var(--r-xl); padding: .7rem .6rem .6rem; scroll-snap-align: start; transition: opacity .2s; } .col.dimmed { opacity: .62; } .colhead { display: flex; align-items: center; gap: .5rem; padding: 0 .35rem .6rem; margin-bottom: .35rem; border-bottom: 1px solid var(--border); } .colname { font-size: .82rem; font-weight: 700; letter-spacing: .01em; flex: 1; min-width: 0; } .cnt { font-size: .7rem; font-weight: 700; color: var(--accent-fg); background: var(--accent); border-radius: 99px; padding: .12rem .45rem; min-width: 20px; text-align: center; } .drop { display: flex; flex-direction: column; gap: .45rem; min-height: 72px; padding: .25rem; border-radius: var(--r-md); transition: background .18s, box-shadow .18s; } .drop.over { background: color-mix(in srgb, var(--primary) 9%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 38%, transparent); } .drop:empty::after { content: "Drop someone here"; display: grid; place-items: center; min-height: 64px; font-size: .76rem; color: var(--muted-fg); border: 1px dashed color-mix(in srgb, var(--foreground) 16%, transparent); border-radius: var(--r-md); } .mcard { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--border); box-shadow: var(--sh-sm); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: box-shadow .16s, border-color .16s; } .mcard:hover { box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--primary) 34%, transparent); } .mcard:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .mcard.draft { opacity: .66; border-style: dashed; } .mcard .grip { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; padding: 0 .1rem; } .mcard .grip i { width: 11px; height: 1.5px; border-radius: 2px; background: color-mix(in srgb, var(--foreground) 26%, transparent); } .mav { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; background: var(--muted); } .mav.empty { display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--select)); } .mtxt { display: flex; flex-direction: column; min-width: 0; flex: 1; } .mtxt strong { font-size: .82rem; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mtxt em { font-size: .72rem; font-style: normal; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the dragged card follows the pointer; the original stays as a ghost */ .mcard.ghost { opacity: .3; } .mcard.flying { position: fixed; z-index: 200; pointer-events: none; cursor: grabbing; width: var(--fw); box-shadow: var(--sh-lg); border-color: var(--primary); } .slot { height: 44px; border-radius: var(--r-md); flex: 0 0 auto; border: 1.5px dashed color-mix(in srgb, var(--primary) 52%, transparent); background: color-mix(in srgb, var(--primary) 7%, transparent); } /* sticky save bar */ .savebar { position: sticky; bottom: .9rem; z-index: 70; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .4rem auto 0; padding: .65rem .9rem; border-radius: var(--r-xl); background: color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent); box-shadow: var(--sh-lg); animation: rise .3s cubic-bezier(.22,.61,.36,1) both; } .sbtxt { font-size: .85rem; flex: 1; min-width: 160px; } .sbtxt strong { color: var(--primary); } /* ---- edit drawer ---- */ .scrim { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, #000 46%, transparent); backdrop-filter: blur(2px); animation: pageIn .22s ease both; } .drawer { position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; border-radius: var(--r-2xl) 0 0 var(--r-2xl); background: color-mix(in srgb, var(--card) 97%, transparent); animation: drawerIn .3s cubic-bezier(.22,.61,.36,1) both; } @keyframes drawerIn { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } } .drawer > form:first-of-type { display: flex; flex-direction: column; min-height: 0; flex: 1; } .dhead { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem .8rem; border-bottom: 1px solid var(--border); } .dhead h2 { margin: 0; font-size: 1.02rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dbody { padding: 1.1rem; overflow-y: auto; flex: 1; min-height: 0; } .dfoot { display: flex; gap: .5rem; align-items: center; padding: .85rem 1.1rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 40%, transparent); } .dfoot .btn:first-child { flex: 1; } .dphoto { margin-bottom: 1.1rem; } .dphoto .pv { aspect-ratio: 1/1; margin-bottom: .55rem; } .dremove { padding: 0 1.1rem 1rem; } .dremove .btn { width: 100%; } @media (max-width: 560px) { .drawer { width: 100vw; border-radius: 0; } .col { flex: 0 0 84vw; } } /* ========================================================================== VIEW TEAM — mirrors the website's department/card layout ======================================================================== */ .teamview { margin-top: 1.6rem; } .tsec { margin-bottom: 2.4rem; } .tsechead { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; } .tsechead h2 { margin: 0; font-size: 1.12rem; letter-spacing: -0.02em; white-space: nowrap; } .tline { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 8%, transparent)); } .tcount { font-size: .72rem; font-weight: 700; color: var(--muted-fg); } .tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 1.05rem; } .tcard { border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s cubic-bezier(.22,.61,.36,1); animation: rise .45s cubic-bezier(.22,.61,.36,1) both; } .tcard:hover { transform: translateY(-3px); } .tcard.draft { opacity: .6; } .tphoto { position: relative; aspect-ratio: 4/5; background: var(--muted); overflow: hidden; } .tphoto img { width: 100%; height: 100%; object-fit: cover; display: block; } .tinit { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.6rem; font-weight: 700; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 86%, #fff), var(--select)); } .tflag { position: absolute; top: .5rem; left: .5rem; } .tmeta { padding: .8rem .85rem .9rem; display: flex; flex-direction: column; gap: .3rem; } .tmeta h3 { margin: 0; font-size: .95rem; font-weight: 650; letter-spacing: -0.015em; } .trole { margin: 0; font-size: .82rem; color: var(--primary); font-weight: 550; } .tdept { margin: .15rem 0 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .tco { font-size: .7rem; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; } .tcontact { margin: .3rem 0 0; font-size: .76rem; color: var(--muted-fg); line-height: 1.5; word-break: break-word; } .tcontact a { color: inherit; text-decoration: none; } .tcontact a:hover { color: var(--primary); text-decoration: underline; } .tedit { margin-top: .55rem; font-size: .76rem; font-weight: 650; text-decoration: none; color: var(--primary); align-self: flex-start; } .tedit:hover { text-decoration: underline; } /* ========================================================================== SIGN-IN — split hero + form. The hero panel is always dark, so its logo is the white mark directly (not the .onlight/.ondark swap). ======================================================================== */ .authbody { margin: 0; } .auth { display: grid; grid-template-columns: 1.04fr 1fr; min-height: 100vh; } /* ------------------------------------------------------------------- hero */ .ahero { position: relative; overflow: hidden; display: flex; align-items: center; padding: 3.5rem 3rem; color: #eaf1fb; background: radial-gradient(760px 420px at 12% 8%, rgba(243,185,102,.16), transparent 62%), radial-gradient(680px 520px at 88% 92%, rgba(79,143,212,.24), transparent 60%), linear-gradient(155deg, #133a67 0%, #10325B 42%, #00152C 100%); } /* oversized watermark glyph, clipped by the panel */ .aheroart { position: absolute; inset: 0; pointer-events: none; } .aglyph { position: absolute; right: -6%; bottom: -34%; font-size: 46rem; line-height: .74; font-weight: 700; color: rgba(255,255,255,.035); letter-spacing: -0.06em; user-select: none; } .ahero::after { /* fine grid, keeps the flat gradient from looking empty */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at 30% 30%, #000, transparent 78%); -webkit-mask-image: radial-gradient(circle at 30% 30%, #000, transparent 78%); } .aheroin { position: relative; max-width: 495px; margin-left: auto; margin-right: auto; } .aherologo { max-height: 30px; max-width: 176px; width: auto; height: auto; display: block; margin-bottom: 2.4rem; animation: rise .55s cubic-bezier(.22,.61,.36,1) both; } .adisplay { font-size: clamp(1.85rem, 3vw, 2.6rem); line-height: 1.12; font-weight: 680; letter-spacing: -0.035em; color: #fff; margin: 0 0 1rem; animation: rise .55s cubic-bezier(.22,.61,.36,1) .06s both; } .alead { font-size: .95rem; line-height: 1.62; color: rgba(226,236,248,.76); margin: 0 0 2.2rem; max-width: 430px; animation: rise .55s cubic-bezier(.22,.61,.36,1) .12s both; } .apoints { list-style: none; margin: 0 0 2.6rem; padding: 0; display: grid; gap: .95rem; } .apoints li { display: flex; gap: .7rem; align-items: flex-start; animation: rise .55s cubic-bezier(.22,.61,.36,1) both; } .apoints li:nth-child(1) { animation-delay: .18s; } .apoints li:nth-child(2) { animation-delay: .24s; } .apoints li:nth-child(3) { animation-delay: .30s; } .apoints svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: .28rem; padding: 3px; box-sizing: content-box; border-radius: 50%; color: #0c2444; background: var(--brand); } .apoints span { display: flex; flex-direction: column; gap: .1rem; font-size: .86rem; line-height: 1.5; } .apoints strong { color: #fff; font-weight: 620; font-size: .89rem; } .apoints span { color: rgba(226,236,248,.66); } .amarks { display: flex; align-items: center; gap: .85rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.13); animation: rise .55s cubic-bezier(.22,.61,.36,1) .36s both; } .amarks span { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(226,236,248,.5); font-weight: 650; } .amarks img { max-height: 17px; max-width: 96px; width: auto; height: auto; opacity: .9; } .amarks i { width: 1px; height: 16px; background: rgba(255,255,255,.18); } /* ------------------------------------------------------------- form panel */ .apanel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem 2rem; background: var(--background); } .athemetoggle { position: absolute; top: 1.25rem; right: 1.25rem; } .acard { width: 100%; max-width: 372px; animation: rise .5s cubic-bezier(.22,.61,.36,1) .08s both; } .amobilemark { display: none; } .acard h2 { font-size: 1.42rem; letter-spacing: -0.025em; margin: 0; } .acard .sub { margin: .35rem 0 1.8rem; } .aform { display: grid; gap: 1.1rem; } .afield { display: block; } .alabel { display: block; font-size: .8rem; font-weight: 620; margin-bottom: .42rem; } .ainput { position: relative; display: flex; align-items: center; } .ainput > svg { position: absolute; left: .78rem; width: 15px; height: 15px; color: var(--muted-fg); pointer-events: none; } .ainput input { width: 100%; padding: .68rem .78rem .68rem 2.3rem; border-radius: var(--r-md); font-size: .9rem; } .ainput input:focus { background: var(--card); } .apeek { position: absolute; right: .35rem; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted-fg); cursor: pointer; padding: 0; } .apeek:hover { color: var(--foreground); background: var(--muted); } .apeek svg { width: 16px; height: 16px; } .apeek .eyeoff { display: none; } .apeek[aria-pressed="true"] .eyeon { display: none; } .apeek[aria-pressed="true"] .eyeoff { display: block; } .acaps { display: flex; align-items: center; gap: .35rem; margin-top: .45rem; font-size: .74rem; font-weight: 600; color: var(--warning); } .acaps svg { width: 12px; height: 12px; } .asubmit { margin-top: .5rem; gap: .45rem; } .asubmit svg { width: 15px; height: 15px; transition: transform .18s; } .asubmit:hover svg { transform: translateX(3px); } .afoot { display: flex; gap: .55rem; align-items: flex-start; margin: 1.9rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--border); font-size: .74rem; line-height: 1.5; color: var(--muted-fg); } .afoot svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: .1rem; color: var(--success); } .acopy { margin: 2.2rem 0 0; font-size: .7rem; color: var(--muted-fg); letter-spacing: .04em; } /* the sign-in flash sits inside the card */ .acard .flash { margin-bottom: 1.2rem; font-size: .85rem; align-items: center; } .acard .flash svg { width: 15px; height: 15px; flex: 0 0 auto; } /* ------------------------------------------------------------- responsive */ @media (max-width: 940px) { .auth { grid-template-columns: 1fr; } .ahero { display: none; } /* the brand moves into the card */ .apanel { min-height: 100vh; padding: 4.5rem 1.25rem 2rem; } .amobilemark { display: block; max-height: 30px; max-width: 168px; width: auto; height: auto; margin: 0 0 1.6rem; } } @media (min-width: 941px) and (max-width: 1150px) { .ahero { padding: 2.5rem 2rem; } .apoints { gap: .75rem; margin-bottom: 2rem; } .alead { margin-bottom: 1.7rem; } } /* ---- department controls on the board ---- */ .colcog { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--muted-fg); cursor: pointer; flex: 0 0 auto; transition: .16s; } .colcog:hover { color: var(--primary); background: var(--accent); border-color: var(--border); } .colcog svg { width: 14px; height: 14px; } .colnote { margin: .5rem .35rem 0; font-size: .71rem; line-height: 1.45; color: var(--muted-fg); } .col.addcol { flex: 0 0 210px; display: flex; flex-direction: column; align-items: stretch; background: transparent; border: 1px dashed color-mix(in srgb, var(--foreground) 20%, transparent); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: .8rem .7rem; } .col.addcol::before { content: none; } .addcolbtn { display: flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-size: .84rem; font-weight: 620; cursor: pointer; padding: .7rem .6rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); color: var(--primary); box-shadow: var(--sh-sm); transition: .16s; } .addcolbtn:hover { box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--primary) 40%, transparent); } .addcolbtn svg { width: 15px; height: 15px; } /* Yardscape's own portal (hr.yardscape.ae): same hero, its own palette. */ :root[data-co="yardscape"] .ahero { background: radial-gradient(760px 420px at 12% 8%, rgba(185,212,101,.18), transparent 62%), radial-gradient(680px 520px at 88% 92%, rgba(146,175,77,.26), transparent 60%), linear-gradient(155deg, #5c7829 0%, #47601e 44%, #202e0b 100%); } :root[data-co="yardscape"] .apoints svg { color: #22300c; } :root[data-co="yardscape"] .aherologo, :root[data-co="yardscape"] .amarks img { max-height: 40px; max-width: 150px; } :root[data-co="yardscape"] .amarks img { max-height: 26px; max-width: 92px; }