/* 로그인 페이지 안에서만 쓰는 5가지 외형. 앱의 classic/calm 및 낮/밤 설정을 바꾸지 않는다. */ #loginPage { --ld-bg:#101f25; --ld-panel:#1b2e34; --ld-input:#14262c; --ld-ink:#edf6f0; --ld-muted:#afc4ba; --ld-line:#35534f; --ld-accent:#79dfb2; --ld-accent-ink:#13372b; --ld-error:#ffaba8; /* 공통 낮 테마의 !important 입력/제목 규칙도 이 페이지의 색만 사용한다. */ --field:var(--ld-input); --ink:var(--ld-ink); --ink-strong:var(--ld-ink); --ink-dim:var(--ld-muted); --ink-soft:var(--ld-muted); --line-2:var(--ld-line); --accent:var(--ld-accent); margin:0; min-height:100vh; min-height:100dvh; overflow-x:hidden; overflow-y:auto; display:block; background:var(--ld-bg); color:var(--ld-ink); font-family:'Noto Sans KR','Malgun Gothic',sans-serif; font-size:1rem; line-height:1.6; color-scheme:dark; } #loginPage *,#loginPage *::before,#loginPage *::after { box-sizing:border-box; } #loginPage [hidden] { display:none!important; } #loginPage button,#loginPage input,#loginPage select { font-family:inherit; } #loginPage button { cursor:pointer; } #loginPage .login-shell { width:100%; min-width:0; max-width:1440px; margin:0 auto; } /* 어느 디자인인지 아직 모를 때는 화면을 잠깐 감춘다. 예전에는 기본 디자인(night)의 로그인 폼이 0.4초쯤 먼저 떴다가 진짜 화면으로 바뀌었다. 색만 다른 게 아니라 화면 구성이 아예 달라서 잘못 들어온 것처럼 보였다. 기억한 값이 있으면 화면 머리에서 바로 known 을 붙이므로 감추지 않는다. 서버 값이 늦거나 안 와도 0.8초 뒤에는 반드시 보여 준다 (아래 animation). */ #loginPage:not([data-login-design-known]) .login-shell { visibility: hidden; animation: hanul-login-reveal 0s linear 0.8s forwards; } @keyframes hanul-login-reveal { to { visibility: visible; } } #loginPage .login-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:25px 38px; border-bottom:1px solid var(--ld-line); } #loginPage .login-wordmark { display:flex; align-items:center; gap:11px; font-size:1.1rem; font-weight:700; } #loginPage .login-wordmark>span { display:grid; place-items:center; height:38px; width:38px; border:1px solid var(--ld-line); border-radius:11px; background:var(--ld-panel); color:var(--ld-accent); font-size:1.25rem; } #loginPage .login-wordmark small { display:block; font-size:.75rem; font-weight:400; color:var(--ld-muted); letter-spacing:.08em; } #loginPage .time-display { display:flex; gap:13px; flex-wrap:wrap; font-size:.75rem; color:var(--ld-muted); font-variant-numeric:tabular-nums; } #loginPage .time { color:var(--ld-ink); } #loginPage .login-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:center; max-width:1080px; margin:0 auto; padding:36px 30px; } #loginPage .login-container { min-width:0; width:100%; max-width:410px; margin:0 auto; } #loginPage .login-box { border:1px solid var(--ld-line); background:var(--ld-panel); border-radius:22px; padding:29px; box-shadow:0 20px 60px rgba(0,0,0,.13); } #loginPage .logo-section { text-align:center; margin-bottom:24px; } #loginPage .logo-icon { margin:0 auto 13px; display:grid; place-items:center; width:62px; height:62px; border-radius:18px; background:var(--ld-input); border:1px solid var(--ld-line); font-size:1.75rem; } #loginPage .logo-text { margin:0 0 7px; color:var(--ld-ink); font-size:1.5rem; line-height:1.45; font-weight:700; letter-spacing:-.045em; } #loginPage .logo-subtitle { margin:0; color:var(--ld-muted); font-size:.8125rem; line-height:1.8; } #loginPage .lang-toggle { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid var(--ld-line); border-radius:10px; margin-bottom:22px; background:var(--ld-input); } /* 공통 테마의 버튼 !important보다 로그인 팔레트가 우선한다. */ #loginPage .lang-btn { min-height:42px; padding:7px 6px; font-size:.875rem; border:0!important; border-radius:7px; color:var(--ld-muted)!important; background:var(--ld-input)!important; overflow-wrap:anywhere; } #loginPage .lang-btn.active { background:var(--ld-accent)!important; color:var(--ld-accent-ink)!important; font-weight:700; } #loginPage .form-group { margin:0 0 20px; min-width:0; } #loginPage .form-label { display:block; margin:0 0 8px; color:var(--ld-muted); font-size:.875rem; font-weight:500; } #loginPage .form-select { display:block; width:100%; min-width:0; min-height:49px; padding:11px 12px; font-size:1rem; color:var(--ld-ink); background:var(--ld-input); border:1px solid var(--ld-line); border-radius:9px; } #loginPage .form-select option { color:var(--ld-ink); background:var(--ld-input); } #loginPage .pin-container { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } #loginPage .pin-input { width:100%; min-width:0; height:57px; border:1px solid var(--ld-line); border-radius:10px; background:var(--ld-input); color:var(--ld-ink); font-size:1.5rem; text-align:center; caret-color:var(--ld-accent); -webkit-text-security:disc; } #loginPage .pin-input:focus,#loginPage .form-select:focus { border-color:var(--ld-accent); outline:2px solid var(--ld-accent); outline-offset:2px; } #loginPage .pin-input.filled { border-color:var(--ld-accent); } #loginPage .pin-input.error { border-color:var(--ld-error); } #loginPage .auto-login-wrapper { display:flex; align-items:flex-start; gap:8px; margin:0 0 23px; color:var(--ld-muted); } #loginPage .auto-login-checkbox { width:17px; height:17px; margin:3px 0 0; accent-color:var(--ld-accent); flex:none; } #loginPage .auto-login-label { font-size:.8125rem; cursor:pointer; line-height:1.65; } #loginPage .login-btn { position:relative; min-height:49px; width:100%; padding:12px 16px; border:0!important; border-radius:9px; background:var(--ld-accent)!important; color:var(--ld-accent-ink)!important; font-size:1rem; font-weight:700; line-height:1.6; } #loginPage .login-btn .btn-text { color:var(--ld-accent-ink)!important; background:transparent!important; } #loginPage .login-btn:hover { filter:brightness(.96); } #loginPage .login-btn.loading { pointer-events:none; opacity:.75; } #loginPage .btn-spinner { display:none; width:20px; height:20px; position:absolute; left:calc(50% - 10px); top:calc(50% - 10px); border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:loginLoading .8s linear infinite; } #loginPage .login-btn.loading .btn-spinner { display:block; } #loginPage .login-btn.loading .btn-text { visibility:hidden; } #loginPage .error-message { display:none; color:var(--ld-error); font-size:.875rem; padding:10px 12px; border:1px solid currentColor; border-radius:8px; margin:0 0 16px; overflow-wrap:anywhere; } #loginPage .error-message.show { display:block; } #loginPage .login-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; border-top:1px solid var(--ld-line); padding:18px 38px; color:var(--ld-muted); font-size:.75rem; } #loginPage .login-story,#loginPage .login-scene { display:none; min-width:0; } #loginPage .login-scene h2 { margin:10px 0 15px; font-size:2rem; line-height:1.6; letter-spacing:-.045em; max-width:430px; word-break:keep-all; overflow-wrap:normal; white-space:pre-line; } #loginPage .login-scene p { color:var(--ld-muted); margin:0; font-size:.875rem; line-height:1.9; max-width:400px; } #loginPage .story-kicker { color:var(--ld-accent); font-size:.75rem; letter-spacing:.12em; } #loginPage .preview-notice { padding:10px 24px; margin:0; color:var(--ld-muted); background:var(--ld-input); font-size:.75rem; border-bottom:1px solid var(--ld-line); } #loginPage[data-login-preview] { min-height:0; } #loginPage .success-overlay { position:fixed; inset:0; z-index:1000; display:none; flex-direction:column; justify-content:center; align-items:center; gap:15px; padding:24px; background:var(--ld-bg); text-align:center; } #loginPage .success-overlay.show { display:flex; } /* 로그인 성공 — 한울 표시에 초록이 밑에서 차오르고, 이름이 뒤따라 뜬다. 색은 디자인마다 다른 --ld-* 만 쓰므로 13가지 로그인 디자인이 그대로 따라온다. */ #loginPage .success-say { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* 눈에는 안 보이고 읽어 주기만 한다 */ #loginPage .success-icon { position:relative; width:112px; height:112px; display:grid; place-items:center; } #loginPage .success-mark { position:relative; display:block; width:112px; height:112px; color:var(--ld-line); } #loginPage .success-mark svg { width:112px; height:112px; } #loginPage .success-mark svg.hanul-line-icon { width:112px; height:112px; } #loginPage .success-fill { position:absolute; left:0; right:0; bottom:0; height:0; overflow:hidden; color:var(--ld-accent); } #loginPage .success-fill svg { position:absolute; left:0; bottom:0; } #loginPage .success-overlay.show .success-fill { animation:hanulSuccessFill .95s cubic-bezier(.33,0,.2,1) .12s forwards; } @keyframes hanulSuccessFill { from { height:0; } to { height:112px; } } #loginPage .success-text { font-size:1.45rem; color:var(--ld-ink); font-weight:900; letter-spacing:3px; } #loginPage .success-subtext { color:var(--ld-muted); font-size:1rem; } #loginPage .success-overlay.show .success-text, #loginPage .success-overlay.show .success-subtext { animation:hanulSuccessRise .4s ease-out .75s both; } @keyframes hanulSuccessRise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } /* 움직임을 줄이도록 설정한 기기에서는 다 차오른 모습만 보여 준다 */ @media (prefers-reduced-motion: reduce) { #loginPage .success-overlay.show .success-fill { animation:none; height:112px; } #loginPage .success-overlay.show .success-text, #loginPage .success-overlay.show .success-subtext { animation:none; opacity:1; transform:none; } } /* 기존 한울 밤: 중앙 한 장과 그린 빛. */ #loginPage[data-login-design="night"] { background:radial-gradient(ellipse at 50% 85%,#224b3d,transparent 63%),#101f25; } #loginPage[data-login-design="night"] .login-layout { padding-top:44px; padding-bottom:44px; } /* AI 입체: 좌측 구체와 오른쪽 접속 패널. 실제 AI 동작이나 지표를 표시하지 않는다. */ #loginPage[data-login-design="ai"] { --ld-bg:#050d19; --ld-panel:#0c1c2d; --ld-input:#081321; --ld-ink:#e5f5ff; --ld-muted:#a0bbcf; --ld-line:#2b536e; --ld-accent:#66ddf9; --ld-accent-ink:#092c3b; background:linear-gradient(#73bde006 1px,transparent 1px),linear-gradient(90deg,#73bde006 1px,transparent 1px),#050d19; background-size:38px 38px; } #loginPage[data-login-design="ai"] .login-layout { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); padding-top:45px; padding-bottom:45px; } #loginPage[data-login-design="ai"] .login-story,#loginPage[data-login-design="ai"] .login-scene-ai { display:block; } #loginPage[data-login-design="ai"] .login-story { text-align:center; } #loginPage[data-login-design="ai"] .login-box { border-top:2px solid var(--ld-accent); border-radius:4px 4px 20px 4px; } #loginPage[data-login-design="ai"] .logo-section { text-align:left; } #loginPage[data-login-design="ai"] .logo-icon { display:none; } #loginPage[data-login-design="ai"] .login-scene h2 { font-size:1.5rem; } #loginPage .login-orb-stage { width:100%; max-width:370px; aspect-ratio:1.1; position:relative; margin:0 auto 24px; perspective:650px; } #loginPage .login-orb-glow { position:absolute; inset:15%; background:#108dea; border-radius:50%; filter:blur(50px); opacity:.28; } #loginPage .login-orb { position:absolute; width:58%; height:64%; left:21%; top:18%; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 31% 24%,#defaff,#70ddfb 6%,#276fa7 18%,#153963 44%,#081b30 71%,#020814 93%); box-shadow:inset -12px -16px 27px #000919,inset 2px 2px 8px #c7faff96,0 0 4px #65d4ff8c; } #loginPage .login-orb:before { content:""; position:absolute; inset:0; background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 14px,#8eddfa30 15px,transparent 16px 21px); border-radius:50%; transform:rotate(24deg); } #loginPage .login-orbit { position:absolute; inset:7%; border:1px solid #66d6f9a0; border-radius:50%; transform:rotateZ(-26deg) rotateX(58deg); box-shadow:0 0 9px #61d6ff19; } #loginPage .login-orbit-two { inset:1% 8%; transform:rotateZ(51deg) rotateY(61deg); border-color:#70f0ea66; } #loginPage .login-orbit-three { inset:12% 0; transform:rotateZ(-15deg) rotateX(68deg); border-style:dashed; border-color:#78beff77; } /* 농장: 크림과 올리브, 그림책 같은 농장 풍경. */ #loginPage[data-login-design="farm"] { --ld-bg:#f4f1e7; --ld-panel:#fffcf4; --ld-input:#fffefa; --ld-ink:#333e2a; --ld-muted:#667158; --ld-line:#dadccb; --ld-accent:#65784b; --ld-accent-ink:#fffdf4; --ld-error:#a13635; color-scheme:light; } #loginPage[data-login-design="farm"] .login-layout { grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr); gap:42px; } #loginPage[data-login-design="farm"] .login-story,#loginPage[data-login-design="farm"] .login-scene-farm { display:block; } #loginPage[data-login-design="farm"] .login-scene h2 { font-family:Batang,Georgia,serif; font-size:2.2rem; line-height:1.7; font-weight:500; } #loginPage[data-login-design="farm"] .login-box { border-radius:25px 25px 8px 25px; box-shadow:0 15px 40px #5a63380a; } #loginPage[data-login-design="farm"] .logo-section { text-align:left; } #loginPage[data-login-design="farm"] .logo-icon { display:none; } #loginPage[data-login-design="farm"] .login-wordmark>span { border-radius:50% 50% 50% 8px; background:var(--ld-accent); color:var(--ld-accent-ink); } #loginPage .login-farm-landscape { min-height:235px; position:relative; overflow:hidden; border-radius:100px 100px 0 0; margin:20px -12px 0; } /* 회계 프로그램: 수평 라벨과 분리된 업무 목록. */ #loginPage[data-login-design="accounting"] { --ld-bg:#f4f6fa; --ld-panel:#fff; --ld-input:#fff; --ld-ink:#172c4b; --ld-muted:#64738b; --ld-line:#d3ddea; --ld-accent:#2160bc; --ld-accent-ink:#fff; --ld-error:#b53b3c; color-scheme:light; } #loginPage[data-login-design="accounting"] .login-header { background:#fff; } #loginPage[data-login-design="accounting"] .login-wordmark>span { border-radius:3px; background:#123d78; color:#fff; } #loginPage[data-login-design="accounting"] .login-layout { grid-template-columns:minmax(0,1fr) 210px; gap:0; margin:40px auto; padding:0; max-width:840px; background:#fff; border:1px solid var(--ld-line); border-top:3px solid var(--ld-accent); align-items:stretch; } #loginPage[data-login-design="accounting"] .login-container { max-width:none; order:0; } #loginPage[data-login-design="accounting"] .login-story { display:flex; order:1; padding:32px 24px; border-left:1px solid var(--ld-line); background:#f8faff; align-items:center; } #loginPage[data-login-design="accounting"] .login-scene-accounting { display:block; } #loginPage[data-login-design="accounting"] .login-scene h2 { font-size:1rem; margin:0 0 20px; } #loginPage[data-login-design="accounting"] .login-scene ul { display:grid; gap:23px; padding:0; margin:0 0 30px; list-style:none; color:var(--ld-muted); font-size:.875rem; } #loginPage[data-login-design="accounting"] .login-scene li:before { content:""; display:inline-block; width:7px; height:7px; background:#7093c2; margin-right:10px; } #loginPage[data-login-design="accounting"] .login-box { padding:29px 30px; border:0; border-radius:0; box-shadow:none; } #loginPage[data-login-design="accounting"] .logo-icon { display:none; } #loginPage[data-login-design="accounting"] .logo-section { text-align:left; padding-bottom:20px; border-bottom:1px solid var(--ld-line); } #loginPage[data-login-design="accounting"] .form-group { display:grid; grid-template-columns:82px minmax(0,1fr); gap:12px; align-items:center; } #loginPage[data-login-design="accounting"] .form-label { margin:0; } #loginPage[data-login-design="accounting"] .form-select,#loginPage[data-login-design="accounting"] .pin-input,#loginPage[data-login-design="accounting"] .login-btn { border-radius:3px; } #loginPage[data-login-design="accounting"] .auto-login-wrapper { margin-left:94px; } /* 토탈 솔루션: 왼쪽 로그인, 오른쪽 농장 업무 지도. */ #loginPage[data-login-design="solution"] { --ld-bg:#fff; --ld-panel:#fff; --ld-input:#fff; --ld-ink:#183d2e; --ld-muted:#61766a; --ld-line:#d5e2d9; --ld-accent:#245c42; --ld-accent-ink:#fff; --ld-error:#ae3937; color-scheme:light; } #loginPage[data-login-design="solution"] .login-layout { grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr); gap:0; padding:0; max-width:1180px; align-items:stretch; } #loginPage[data-login-design="solution"] .login-container { order:0; padding:32px 26px; max-width:450px; } #loginPage[data-login-design="solution"] .login-box { padding:20px 5px; border:0; box-shadow:none; } #loginPage[data-login-design="solution"] .logo-section { text-align:left; } #loginPage[data-login-design="solution"] .logo-icon { display:none; } #loginPage[data-login-design="solution"] .login-story { display:flex; align-items:center; padding:38px; order:1; background:#e6f0e9; position:relative; overflow:hidden; } #loginPage[data-login-design="solution"] .login-scene-solution { display:block; width:100%; position:relative; } #loginPage[data-login-design="solution"] .login-story:before { content:""; position:absolute; width:430px; height:430px; top:-270px; right:-240px; border:70px solid #d5e6da; border-radius:50%; } #loginPage .solution-map { margin:27px 0 0; padding:18px; border:1px solid #cbded1; border-radius:13px; background:#fff; box-shadow:0 18px 26px #396c4a12; } #loginPage .solution-map-head { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; padding-bottom:13px; border-bottom:1px solid #e6eee8; font-size:.875rem; } #loginPage .solution-map-head span { color:#688573; font-size:.75rem; } #loginPage .solution-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:22px 0; font-size:.8125rem; color:#506f5c; text-align:center; } #loginPage .solution-flow span:before { content:""; display:block; margin:0 auto 8px; width:32px; height:32px; border-radius:10px; background:#d5e6de; border:8px solid #ecf4ee; } #loginPage .solution-flow span:nth-child(2):before { background:#d9c8e5; border-color:#f3edf7; } #loginPage .solution-flow span:nth-child(3):before { background:#bedbc7; border-color:#eaf5ee; } #loginPage .solution-flow span:nth-child(4):before { background:#e3d5b8; border-color:#f8f3e8; } #loginPage .solution-modules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } #loginPage .solution-modules span { padding:13px 10px; background:#f1f6f2; border-radius:8px; color:#4e6e59; font-size:.8125rem; } #loginPage .login-scene .solution-bottom { margin-top:22px; font-size:.8125rem; } @keyframes loginLoading { to { transform:rotate(360deg); } } @media(max-width:760px) { #loginPage .login-header { padding:18px 20px; gap:12px; } #loginPage .time-display { font-size:.75rem; gap:9px; } #loginPage .login-layout,#loginPage[data-login-design="ai"] .login-layout,#loginPage[data-login-design="farm"] .login-layout,#loginPage[data-login-design="solution"] .login-layout { grid-template-columns:1fr; padding:24px 20px; gap:22px; } #loginPage .login-container { max-width:430px; } #loginPage .login-box { padding:24px; } #loginPage .login-footer { padding:18px 20px; } #loginPage[data-login-design="ai"] .login-layout { padding-top:16px; } #loginPage[data-login-design="ai"] .login-story { order:1; } #loginPage[data-login-design="ai"] .login-scene h2 { margin-top:6px; } #loginPage .login-orb-stage { max-width:230px; margin-bottom:6px; aspect-ratio:1.15; } #loginPage[data-login-design="farm"] .login-story { order:1; } #loginPage[data-login-design="farm"] .login-scene h2 { font-size:1.65rem; } #loginPage .login-farm-landscape { min-height:185px; margin:10px 0 0; } #loginPage[data-login-design="accounting"] .login-layout { grid-template-columns:1fr; padding:0; margin:24px 18px; max-width:none; } #loginPage[data-login-design="accounting"] .login-container { max-width:none; } #loginPage[data-login-design="accounting"] .login-story { padding:23px; border-left:0; border-top:1px solid var(--ld-line); } #loginPage[data-login-design="accounting"] .login-scene-accounting { width:100%; } #loginPage[data-login-design="accounting"] .login-scene ul { grid-template-columns:1fr 1fr; gap:16px 10px; margin-bottom:0; } #loginPage[data-login-design="accounting"] .login-scene>p { display:none; } #loginPage[data-login-design="accounting"] .login-box { padding:24px; } #loginPage[data-login-design="accounting"] .form-group { grid-template-columns:1fr; gap:8px; } #loginPage[data-login-design="accounting"] .auto-login-wrapper { margin-left:0; } #loginPage[data-login-design="solution"] .login-layout { padding:0; gap:0; } #loginPage[data-login-design="solution"] .login-container { padding:24px; } #loginPage[data-login-design="solution"] .login-story { padding:30px 25px; } } @media(max-width:370px) { #loginPage .login-layout { padding-left:14px; padding-right:14px; } #loginPage .login-box,#loginPage[data-login-design="accounting"] .login-box { padding:19px; } #loginPage .pin-container { gap:7px; } #loginPage .logo-text { font-size:1.35rem; } #loginPage .solution-flow { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(prefers-reduced-motion:reduce) { #loginPage .btn-spinner { animation:none; } } #loginPage[data-login-design="farm"] .login-farm-landscape { --hb-farm-sky-top:#e8f0e7; --hb-farm-sky-bottom:#f4efe0; --hb-farm-hill-far:#c8d7b6; --hb-farm-hill-near:#a5be91; --hb-farm-field:#829e6c; --hb-farm-field-light:#adc18c; --hb-farm-earth:#b3a086; --hb-farm-tree:#638061; --hb-farm-tree-light:#7b9670; --hb-farm-trunk:#82705a; --hb-farm-roof:#536e5c; --hb-farm-roof-edge:#3f594b; --hb-farm-wall:#ece1c9; --hb-farm-wall-line:#d7c9af; --hb-farm-door:#a68e72; --hb-farm-wood:#d8c6a2; --hb-farm-window:#819487; --hb-farm-pig:#daa28f; --hb-farm-pig-light:#e5b5a0; --hb-farm-pig-dark:#b77968; --hb-farm-eye:#684c44; --hb-farm-shadow:rgba(48,69,47,.16); background:linear-gradient(180deg,var(--hb-farm-sky-top),var(--hb-farm-sky-bottom)); } #loginPage[data-login-design="farm"][data-mode="dark"] .login-farm-landscape { --hb-farm-sky-top:#172c2d; --hb-farm-sky-bottom:#29413d; --hb-farm-hill-far:#344f42; --hb-farm-hill-near:#3c5c48; --hb-farm-field:#4b674e; --hb-farm-field-light:#638261; --hb-farm-earth:#776d55; --hb-farm-tree:#365241; --hb-farm-tree-light:#4c6a4c; --hb-farm-trunk:#736951; --hb-farm-roof:#788c6b; --hb-farm-roof-edge:#586e55; --hb-farm-wall:#b4ae87; --hb-farm-wall-line:#9a9675; --hb-farm-door:#746f57; --hb-farm-wood:#a5a27a; --hb-farm-window:#e0c387; --hb-farm-pig:#bc927f; --hb-farm-pig-light:#cfaa90; --hb-farm-pig-dark:#956d5e; --hb-farm-eye:#57443a; --hb-farm-shadow:rgba(9,24,21,.3); } #loginPage[data-login-design="farm"] .login-farm-landscape .hb-farm-art { position:absolute; inset:0; overflow:hidden; pointer-events:none; container-type:inline-size; isolation:isolate; opacity:calc(.94 * var(--hb-scenery-strength,1)); } #loginPage[data-login-design="farm"] .hb-farm-art * { box-sizing:border-box; position:absolute; } #loginPage[data-login-design="farm"] .hb-farm-art { --hb-fu:clamp(.65px,.115cqw,1px); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-sun { width:38px; height:38px; top:12%; right:13%; border-radius:50%; background:#ddce9d; box-shadow:0 0 0 9px rgba(221,206,157,.10); opacity:.65; } #loginPage[data-login-design="farm"][data-mode="dark"] .hb-farm-art .hb-farm-sun { background:#c4c5a5; box-shadow:0 0 0 7px rgba(196,197,165,.05); opacity:.75; } #loginPage[data-login-design="farm"][data-mode="dark"] .hb-farm-art .hb-farm-sun:after { content:""; width:30px; height:30px; right:-5px; top:-4px; position:absolute; background:var(--hb-farm-sky-top); border-radius:50%; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-cloud { top:22%; left:12%; width:84px; height:13px; border-radius:50%; background:rgba(255,255,255,.26); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-cloud:before { content:""; position:absolute; left:17px; bottom:3px; width:37px; height:23px; background:inherit; border-radius:50%; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-cloud-two { left:65%; top:31%; width:61px; opacity:.55; } #loginPage[data-login-design="farm"][data-mode="dark"] .hb-farm-art .hb-farm-cloud { opacity:.18; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-hill { left:-12%; width:85%; bottom:calc(65 * var(--hb-fu)); height:calc(103 * var(--hb-fu)); background:var(--hb-farm-hill-far); border-radius:55% 80% 0 0; transform:rotate(-4deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-hill-two { left:41%; width:79%; height:calc(118 * var(--hb-fu)); bottom:calc(42 * var(--hb-fu)); background:var(--hb-farm-hill-near); transform:rotate(8deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-field { left:-4%; right:-4%; bottom:calc(-25 * var(--hb-fu)); height:calc(116 * var(--hb-fu)); background:var(--hb-farm-field); border-radius:48% 52% 0 0 / 26% 22% 0 0; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-field:after { content:""; position:absolute; left:-5%; width:65%; height:55%; bottom:-7%; background:var(--hb-farm-field-light); border-radius:50%; opacity:.35; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-path { width:calc(103 * var(--hb-fu)); height:calc(94 * var(--hb-fu)); bottom:calc(-27 * var(--hb-fu)); left:49%; transform:rotate(-14deg); background:var(--hb-farm-earth); border-radius:45% 30% 0 0; opacity:.55; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-barn { left:51%; bottom:calc(63 * var(--hb-fu)); width:calc(186 * var(--hb-fu)); height:calc(103 * var(--hb-fu)); transform:translateX(-50%); background:repeating-linear-gradient(90deg,var(--hb-farm-wall) 0 calc(17 * var(--hb-fu)),var(--hb-farm-wall-line) calc(17 * var(--hb-fu)) calc(18 * var(--hb-fu))); border-radius:calc(3 * var(--hb-fu)); box-shadow:0 calc(5 * var(--hb-fu)) 0 var(--hb-farm-shadow); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-roof { left:calc(-13 * var(--hb-fu)); right:calc(-13 * var(--hb-fu)); top:calc(-54 * var(--hb-fu)); height:calc(63 * var(--hb-fu)); background:var(--hb-farm-roof); clip-path:polygon(50% 0,100% 85%,100% 100%,0 100%,0 85%); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-roof:after { content:""; position:absolute; left:0; right:0; bottom:0; height:calc(7 * var(--hb-fu)); background:var(--hb-farm-roof-edge); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-vent { width:calc(24 * var(--hb-fu)); height:calc(13 * var(--hb-fu)); left:calc(81 * var(--hb-fu)); top:calc(15 * var(--hb-fu)); border-radius:calc(12 * var(--hb-fu)) calc(12 * var(--hb-fu)) 0 0; background:var(--hb-farm-window); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-door { width:calc(60 * var(--hb-fu)); height:calc(65 * var(--hb-fu)); bottom:0; left:calc(63 * var(--hb-fu)); border:calc(4 * var(--hb-fu)) solid var(--hb-farm-wall-line); border-bottom:0; background:var(--hb-farm-door); border-radius:calc(3 * var(--hb-fu)) calc(3 * var(--hb-fu)) 0 0; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-door:before,#loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-door:after { content:""; position:absolute; height:calc(3 * var(--hb-fu)); width:calc(64 * var(--hb-fu)); top:47%; left:calc(-6 * var(--hb-fu)); background:var(--hb-farm-wall-line); transform:rotate(47deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-door:after { transform:rotate(-47deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-window { width:calc(25 * var(--hb-fu)); height:calc(29 * var(--hb-fu)); left:calc(20 * var(--hb-fu)); top:calc(43 * var(--hb-fu)); border:calc(3 * var(--hb-fu)) solid var(--hb-farm-wall-line); background:var(--hb-farm-window); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-window:after { content:""; position:absolute; height:100%; width:calc(2 * var(--hb-fu)); background:var(--hb-farm-wall-line); left:45%; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-window-two { left:auto; right:calc(20 * var(--hb-fu)); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-tree { left:13%; bottom:calc(78 * var(--hb-fu)); width:calc(13 * var(--hb-fu)); height:calc(104 * var(--hb-fu)); background:var(--hb-farm-trunk); border-radius:4px 4px 0 0; transform:rotate(-3deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-tree:before { content:""; position:absolute; width:calc(67 * var(--hb-fu)); height:calc(81 * var(--hb-fu)); left:calc(-29 * var(--hb-fu)); top:calc(-27 * var(--hb-fu)); background:var(--hb-farm-tree); border-radius:55% 48% 47% 55%; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-tree:after { content:""; position:absolute; width:calc(44 * var(--hb-fu)); height:calc(64 * var(--hb-fu)); left:calc(-8 * var(--hb-fu)); top:calc(-28 * var(--hb-fu)); background:var(--hb-farm-tree-light); border-radius:50%; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-tree-two { left:86%; height:calc(76 * var(--hb-fu)); bottom:calc(80 * var(--hb-fu)); transform:rotate(4deg) scale(.76); transform-origin:bottom; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-fence { left:4%; bottom:calc(47 * var(--hb-fu)); width:29%; height:calc(32 * var(--hb-fu)); background:linear-gradient(0deg,transparent 20%,var(--hb-farm-wood) 20% 29%,transparent 29% 70%,var(--hb-farm-wood) 70% 79%,transparent 79%); transform:rotate(2deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-fence:before { content:""; position:absolute; inset:calc(-6 * var(--hb-fu)) 0 calc(-5 * var(--hb-fu)); background:repeating-linear-gradient(90deg,var(--hb-farm-wood) 0 calc(5 * var(--hb-fu)),transparent calc(5 * var(--hb-fu)) calc(38 * var(--hb-fu))); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-fence-two { left:68%; width:29%; bottom:calc(53 * var(--hb-fu)); transform:rotate(-2deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig { width:calc(72 * var(--hb-fu)); height:calc(44 * var(--hb-fu)); left:22%; bottom:calc(20 * var(--hb-fu)); transform:rotate(-3deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig:before { content:""; position:absolute; width:92%; height:calc(11 * var(--hb-fu)); bottom:calc(-3 * var(--hb-fu)); left:3%; border-radius:50%; background:var(--hb-farm-shadow); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-body { left:calc(8 * var(--hb-fu)); top:calc(5 * var(--hb-fu)); width:calc(51 * var(--hb-fu)); height:calc(30 * var(--hb-fu)); border-radius:46% 48% 42% 43%; background:var(--hb-farm-pig); box-shadow:inset 0 calc(5 * var(--hb-fu)) 0 var(--hb-farm-pig-light); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-leg { width:calc(8 * var(--hb-fu)); height:calc(14 * var(--hb-fu)); bottom:calc(2 * var(--hb-fu)); left:calc(16 * var(--hb-fu)); border-radius:0 0 3px 3px; background:var(--hb-farm-pig); border-bottom:calc(3 * var(--hb-fu)) solid var(--hb-farm-pig-dark); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-leg-two { left:calc(45 * var(--hb-fu)); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-head { right:calc(1 * var(--hb-fu)); top:calc(7 * var(--hb-fu)); width:calc(28 * var(--hb-fu)); height:calc(27 * var(--hb-fu)); border-radius:46% 43% 45% 45%; background:var(--hb-farm-pig-light); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-ear { top:calc(-6 * var(--hb-fu)); left:calc(4 * var(--hb-fu)); width:calc(10 * var(--hb-fu)); height:calc(13 * var(--hb-fu)); border-radius:2px 80% 30% 60%; background:var(--hb-farm-pig); transform:rotate(-23deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-eye { top:calc(9 * var(--hb-fu)); right:calc(8 * var(--hb-fu)); width:calc(3 * var(--hb-fu)); height:calc(3 * var(--hb-fu)); border-radius:50%; background:var(--hb-farm-eye); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-snout { right:calc(-6 * var(--hb-fu)); bottom:calc(3 * var(--hb-fu)); width:calc(16 * var(--hb-fu)); height:calc(11 * var(--hb-fu)); border-radius:45%; background:var(--hb-farm-pig); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-snout:after { content:""; position:absolute; width:calc(2 * var(--hb-fu)); height:calc(3 * var(--hb-fu)); top:calc(4 * var(--hb-fu)); right:calc(4 * var(--hb-fu)); background:var(--hb-farm-pig-dark); border-radius:50%; box-shadow:calc(-5 * var(--hb-fu)) 0 0 var(--hb-farm-pig-dark); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-tail { left:calc(1 * var(--hb-fu)); top:calc(10 * var(--hb-fu)); width:calc(11 * var(--hb-fu)); height:calc(10 * var(--hb-fu)); border:calc(3 * var(--hb-fu)) solid var(--hb-farm-pig-dark); border-bottom-color:transparent; border-radius:50%; transform:rotate(-35deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-two { left:68%; bottom:calc(17 * var(--hb-fu)); transform:scale(-.88,.88) rotate(-5deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-pig-three { left:79%; bottom:calc(34 * var(--hb-fu)); transform:scale(-.61,.61) rotate(2deg); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-grass { left:10%; bottom:calc(13 * var(--hb-fu)); width:calc(6 * var(--hb-fu)); height:calc(14 * var(--hb-fu)); background:var(--hb-farm-field-light); border-radius:80% 0 0; transform:rotate(-25deg); box-shadow:calc(9 * var(--hb-fu)) calc(2 * var(--hb-fu)) 0 var(--hb-farm-field-light); opacity:.65; } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-grass-two { left:59%; bottom:calc(38 * var(--hb-fu)); transform:rotate(20deg) scale(.8); } #loginPage[data-login-design="farm"] .hb-farm-art .hb-farm-grass-three { left:91%; bottom:calc(10 * var(--hb-fu)); transform:rotate(-20deg) scale(.7); }