/* * IMK Apartments — Tenant Portal Theme * Extracted from new-theme-imk-v5.html * DM Sans + DM Mono · Forest Green · Light & Dark * Dark mode: add class "dk" to */ /* ═══════════════════════════════════════ LIGHT THEME TOKENS (Default) ═══════════════════════════════════════ */ :root { /* Brand greens */ --t900:#0C1912;--t800:#163522;--t700:#1D4A2E;--t600:#255E3A;--t500:#2D7347;--t400:#3C9460;--t300:#56B87A; /* Emerald accents */ --g500:#10B981;--g400:#34D399;--g300:#6EE7B7;--g200:#A7F3D0;--g100:#D1FAE5;--g50:#ECFDF5; /* Surfaces */ --s0:#FFFFFF;--s1:#F6F9F7;--s2:#EDF2EF;--s3:#E1EAE4; /* Text */ --tx1:#0C1912;--tx2:#3A5443;--tx3:#7E9E8B;--tx4:#B5CBB0; /* Borders */ --b0:rgba(12,25,18,.04);--b1:rgba(12,25,18,.07);--b2:rgba(12,25,18,.12);--b3:rgba(12,25,18,.20); /* Semantic */ --err:#EF4444;--warn:#F59E0B;--info:#3B82F6; --err-bg:#FEF2F2;--warn-bg:#FFFBEB;--info-bg:#EFF6FF; /* Chip text colours */ --chip-b-txt:#1E40AF;--chip-a-txt:#92400E;--chip-g-txt:#065F46;--chip-r-txt:#991B1B; /* Canvas bg */ --canvas-bg:#D8E2DC; /* Shadows */ --sh-xs:0 1px 2px rgba(0,0,0,.04); --sh-sm:0 1px 3px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.06); --sh-md:0 2px 8px rgba(0,0,0,.07),0 8px 28px rgba(0,0,0,.08); --sh-xl:0 8px 32px rgba(0,0,0,.10),0 32px 72px rgba(0,0,0,.14); /* Radii */ --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;--r-f:9999px; } /* ═══════════════════════════════════════ DARK THEME TOKENS — .dk on ═══════════════════════════════════════ */ .dk { --s0:#060E0A; --s1:#0D2118; --s2:#163524; --s3:#1E4A30; --tx1:#F0FDF4; --tx2:#A7F3D0; --tx3:#6EE7B7; /* WCAG AA fix: 5.1:1 contrast */ --tx4:#2D7347; --b0:rgba(255,255,255,.04); --b1:rgba(255,255,255,.08); --b2:rgba(255,255,255,.13); --b3:rgba(255,255,255,.20); --err-bg:rgba(239,68,68,.12); --warn-bg:rgba(245,158,11,.12); --info-bg:rgba(59,130,246,.12); --g50:rgba(16,185,129,.10); --g100:rgba(16,185,129,.16); --g200:rgba(16,185,129,.26); --chip-b-txt:#60A5FA;--chip-a-txt:#FBBF24;--chip-g-txt:#34D399;--chip-r-txt:#F87171; --canvas-bg:#040A06; --sh-xs:0 1px 2px rgba(0,0,0,.20); --sh-sm:0 1px 3px rgba(0,0,0,.20),0 4px 14px rgba(0,0,0,.22); --sh-xl:0 8px 32px rgba(0,0,0,.35),0 32px 72px rgba(0,0,0,.45); } /* ═══════════════════════════════════════ BASE RESET ═══════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} html{scroll-behavior:smooth} body{ font-family:"DM Sans",sans-serif; background:var(--canvas-bg); color:var(--tx1); min-height:100vh; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; transition:background .35s,color .35s; display:flex; flex-direction:column; } .mono{font-family:"DM Mono",monospace;font-feature-settings:"tnum" 1;letter-spacing:-.02em} svg{display:block;flex-shrink:0} a{color:inherit;text-decoration:none} [x-cloak]{display:none!important} /* ═══════════════════════════════════════ TRANSITION — all theme-sensitive elements ═══════════════════════════════════════ */ .card,.inp,.bnav,.chip,.ic,.fp,.ro, .ni-i,body,.badge-n,.tgl.off, .inp-field,.btn-outline,.bk{ transition:background .3s,background-color .3s,color .3s,border-color .3s,box-shadow .3s; } /* ═══════════════════════════════════════ APP SHELL — full-screen mobile layout ═══════════════════════════════════════ */ .app-shell{ display:flex; flex-direction:column; height:100vh; max-width:480px; margin:0 auto; background:var(--s1); position:relative; overflow:hidden; } /* Guest pages (auth) — no bottom nav */ .guest-shell{ display:flex; flex-direction:column; height:100vh; max-width:480px; margin:0 auto; background:var(--s0); overflow:hidden; } /* ═══════════════════════════════════════ SCROLLER — main content area ═══════════════════════════════════════ */ .scr{ flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none; position:relative; -webkit-overflow-scrolling:touch; } .scr::-webkit-scrollbar{display:none} /* ═══════════════════════════════════════ BOTTOM NAV ═══════════════════════════════════════ */ .bnav{ background:var(--s0); border-top:1px solid var(--b0); display:grid; grid-template-columns:repeat(5,1fr); padding:8px 2px 18px; flex-shrink:0; z-index:10; transition:background .3s,border-color .3s; } .ni{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;background:none;border:none;outline:none;font:inherit;color:inherit;text-decoration:none} .ni-i{width:42px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-f);position:relative} .ni-i svg{width:20px;height:20px;color:var(--tx3)} .ni-dot{width:5px;height:5px;background:var(--g400);border-radius:50%;position:absolute;top:1px;right:5px;border:1.5px solid var(--s0)} .ni span{font-size:10px;font-weight:500;color:var(--tx3)} .ni.on .ni-i{background:var(--g100)} .ni.on .ni-i svg{color:var(--t600)} .ni.on span{color:var(--t600);font-weight:700} /* ═══════════════════════════════════════ CARDS ═══════════════════════════════════════ */ .card{background:var(--s0);border-radius:var(--r-lg);border:1px solid var(--b1);box-shadow:var(--sh-sm)} .card.interactive{cursor:pointer} .card.interactive:active{transform:scale(.97);background:var(--s2)} .hit-card{cursor:pointer} .hit-card:active{transform:scale(.97);background:var(--s2)} .div{height:1px;background:var(--b0);border:none;margin:0} /* ═══════════════════════════════════════ HIT AREAS ═══════════════════════════════════════ */ .hit-area{padding:12px;margin:-12px;cursor:pointer;position:relative;z-index:2;transition:opacity .2s;border:none;background:transparent;color:inherit;font:inherit;display:inline-flex;align-items:center;justify-content:center} .hit-area:active{opacity:.65} .row-btn{width:100%;display:flex;align-items:center;background:none;border:none;font:inherit;color:inherit;cursor:pointer;transition:background .15s} .row-btn:active{background:var(--s2)} /* ═══════════════════════════════════════ HERO CARD ═══════════════════════════════════════ */ .hcard{background:linear-gradient(145deg,var(--t700),var(--t900));border-radius:var(--r-xl);padding:18px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.06)} .hcard::before{content:"";position:absolute;top:-70px;right:-55px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(60,148,96,.20),transparent 65%);pointer-events:none} .hcard::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");opacity:.04;pointer-events:none;border-radius:inherit;mix-blend-mode:overlay} /* ═══════════════════════════════════════ AVATAR ═══════════════════════════════════════ */ .ava{border-radius:50%;background:linear-gradient(135deg,var(--t400),var(--t700));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.22)} /* ═══════════════════════════════════════ ICON CIRCLES ═══════════════════════════════════════ */ .ic{border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} .ic svg{width:15px;height:15px} .ic-g{background:var(--g100);color:var(--t600)} .ic-a{background:rgba(245,158,11,.12);color:var(--chip-a-txt)} .ic-b{background:rgba(59,130,246,.10);color:var(--chip-b-txt)} .ic-r{background:rgba(239,68,68,.10);color:var(--chip-r-txt)} .ic-n{background:var(--s2);color:var(--tx2)} /* ═══════════════════════════════════════ CHIPS / STATUS BADGES ═══════════════════════════════════════ */ .chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-f);font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase} .chip-g{background:var(--g100);color:var(--chip-g-txt)} .chip-b{background:rgba(59,130,246,.12);color:var(--chip-b-txt)} .chip-a{background:rgba(245,158,11,.12);color:var(--chip-a-txt)} .chip-n{background:var(--s2);color:var(--tx2)} .chip-r{background:rgba(239,68,68,.10);color:var(--chip-r-txt)} /* ═══════════════════════════════════════ BUTTONS ═══════════════════════════════════════ */ .btn{ width:100%;padding:13px;border:none;border-radius:var(--r-md); font-family:"DM Sans",sans-serif;font-size:14px;font-weight:700; cursor:pointer;letter-spacing:-.01em; transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .3s,color .3s; display:flex;align-items:center;justify-content:center;gap:8px;outline:none; } .btn:active{transform:scale(.96)} .btn-p{background:var(--g500);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.28),0 8px 24px rgba(16,185,129,.16)} .btn-p:hover{box-shadow:0 4px 16px rgba(16,185,129,.38),0 12px 36px rgba(16,185,129,.22)} .btn-ghost{background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.22);color:#fff} .btn-outline{background:var(--s0);border:1.5px solid var(--b2);color:var(--tx1)} .btn-sm{padding:9px 15px;font-size:12px;border-radius:var(--r-sm);width:auto} /* Button loading states */ .btn-loading{pointer-events:none;opacity:.88} .btn-loading .btn-txt{display:none} .btn-loading .btn-spin{display:flex} .btn-done{pointer-events:none} .btn-done .btn-txt{display:none} .btn-done .btn-done-txt{display:flex} .btn-spin{display:none;align-items:center;gap:9px} .btn-done-txt{display:none;align-items:center;gap:7px} @keyframes spin{to{transform:rotate(360deg)}} .ring{width:16px;height:16px;border:2px solid rgba(255,255,255,.30);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0} /* ═══════════════════════════════════════ INPUTS ═══════════════════════════════════════ */ .inp-lbl{font-size:10px;font-weight:700;color:var(--tx2);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;display:block} .inp{width:100%;padding:12px 15px;background:var(--s2);border:1.5px solid var(--b1);border-radius:var(--r-md);font-family:"DM Sans",sans-serif;font-size:14px;color:var(--tx1);outline:none} .inp::placeholder{color:var(--tx3)} .inp:focus{border-color:var(--t500);background:var(--s0);box-shadow:0 0 0 3px rgba(45,115,71,.12)} .inp-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none} .inp-ico svg{width:15px;height:15px} .inp-has-ico{padding-left:40px} .inp-wrap{position:relative} /* Validation states */ .inp-err{border-color:var(--err)!important;background:var(--err-bg)!important;box-shadow:0 0 0 3px rgba(239,68,68,.10)!important} .inp-ok{border-color:var(--g500)!important;box-shadow:0 0 0 3px rgba(16,185,129,.10)!important} .inp-hint{font-size:11px;margin-top:5px;display:flex;align-items:center;gap:4px;font-weight:500} .hint-err{color:var(--err)}.hint-ok{color:var(--g500)}.hint-info{color:var(--tx3)} /* Dark — focused input */ .dk .inp:focus{background:var(--s3)} /* ═══════════════════════════════════════ RADIO OPTIONS ═══════════════════════════════════════ */ .ro{border:1.5px solid var(--b2);border-radius:var(--r-md);padding:12px 14px;display:flex;align-items:flex-start;gap:10px;background:var(--s0);cursor:pointer;width:100%;outline:none;font:inherit;color:inherit;text-align:left} .ro.sel{border-color:var(--g500);background:var(--g50)} .rd{width:18px;height:18px;border-radius:50%;border:2px solid var(--b3);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all .15s} .rd.on{border-color:var(--g500);background:var(--g500)} .rd.on::after{content:"";width:6px;height:6px;background:#fff;border-radius:50%} /* ═══════════════════════════════════════ TOGGLES ═══════════════════════════════════════ */ .tgl{width:42px;height:23px;border-radius:var(--r-f);position:relative;cursor:pointer;flex-shrink:0;border:none;outline:none} .tgl.on{background:var(--g500)}.tgl.off{background:var(--s3)} .tgl::after{content:"";position:absolute;top:3px;width:17px;height:17px;background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:left .25s cubic-bezier(.34,1.56,.64,1)} .tgl.on::after{left:22px}.tgl.off::after{left:3px} /* ═══════════════════════════════════════ OTP INPUTS ═══════════════════════════════════════ */ .otp-grid{display:flex;gap:7px;justify-content:center} .otp-box{width:44px;height:54px;border:1.5px solid var(--b2);border-radius:var(--r-md);font-family:"DM Mono",monospace;font-size:22px;font-weight:500;text-align:center;color:var(--tx1);background:var(--s2);outline:none;transition:border-color .18s,background .3s,color .3s} .otp-box:focus{border-color:var(--t500);background:var(--s0);box-shadow:0 0 0 3px rgba(45,115,71,.12)} .otp-box.filled{border-color:var(--g500);background:var(--g50);color:var(--t800)} .dk .otp-box.filled{color:var(--tx1)} /* ═══════════════════════════════════════ FILTER PILLS ═══════════════════════════════════════ */ .fp{padding:6px 13px;border-radius:var(--r-f);font-size:12px;font-weight:600;border:1.5px solid var(--b2);background:var(--s0);color:var(--tx2);cursor:pointer;white-space:nowrap;flex-shrink:0} .fp.on{background:var(--t800);border-color:var(--t800);color:#fff} /* ═══════════════════════════════════════ FAB ═══════════════════════════════════════ */ .fab{ width:48px;height:48px;background:var(--g500);border-radius:50%; box-shadow:0 4px 16px rgba(16,185,129,.35),0 8px 32px rgba(16,185,129,.20); display:flex;align-items:center;justify-content:center; position:fixed;bottom:82px;right:max(14px, calc(50vw - 226px)); z-index:20;cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1); border:none;color:#fff; } .fab:hover{transform:scale(1.10)} .fab:active{transform:scale(.95)} /* ═══════════════════════════════════════ STEPPER ═══════════════════════════════════════ */ .stepper{display:flex;align-items:center;padding:14px 20px 0} .s-item{display:flex;flex-direction:column;align-items:center;gap:4px} .s-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--tx3);background:var(--s0);transition:all .25s,background .3s,color .3s;flex-shrink:0} .s-dot.done{background:var(--g500);border-color:var(--g500);color:#fff} .s-dot.act{border-color:var(--t600);color:var(--t600);box-shadow:0 0 0 3px rgba(45,115,71,.12)} .s-lbl{font-size:9px;font-weight:700;color:var(--tx3);letter-spacing:.03em;white-space:nowrap} .s-lbl.act{color:var(--t600)}.s-lbl.done{color:var(--g500)} .s-line{flex:1;height:1.5px;background:var(--b2);margin:0 3px;margin-bottom:14px} .s-line.done{background:var(--g500)} .dk .s-dot{background:var(--s2)} /* ═══════════════════════════════════════ BACK BUTTON ═══════════════════════════════════════ */ .bk{width:32px;height:32px;border-radius:50%;background:var(--s2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;border:1px solid var(--b1);outline:none} .bk svg{width:15px;height:15px;color:var(--tx1)} /* ═══════════════════════════════════════ SKELETON LOADER ═══════════════════════════════════════ */ .skel{background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-xs)} .skel-h{height:14px;border-radius:var(--r-xs)}.skel-h-lg{height:22px;border-radius:var(--r-sm)} .skel-circle{border-radius:50%!important}.skel-card{padding:16px;display:flex;flex-direction:column;gap:10px} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* ═══════════════════════════════════════ EMPTY STATE ═══════════════════════════════════════ */ .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 28px;text-align:center} .empty-icon{animation:float 3s ease-in-out infinite;margin-bottom:18px} /* ═══════════════════════════════════════ SUCCESS / ERROR STATES ═══════════════════════════════════════ */ .success-ring{width:76px;height:76px;border-radius:50%;background:var(--g100);display:flex;align-items:center;justify-content:center;position:relative;animation:popIn .5s .1s cubic-bezier(.34,1.56,.64,1) both} .success-ring::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:var(--g200);animation:ringPulse 1.8s ease-out infinite} @keyframes ringPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.1);opacity:0}} .confetti-wrap{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;overflow:hidden} .conf{position:absolute;width:7px;height:7px;border-radius:2px;animation:confettiFall 2.8s ease-in infinite} @keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(220px) rotate(720deg);opacity:0}} /* ═══════════════════════════════════════ PROFILE ROW ═══════════════════════════════════════ */ .prow{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:none;border:none;font:inherit;color:inherit;cursor:pointer;transition:background .15s;text-align:left} .prow:active{background:var(--s2)} .prow svg{color:var(--tx3)} /* ═══════════════════════════════════════ CHAT MESSAGES ═══════════════════════════════════════ */ .msg-in{background:var(--s2)!important;border-color:var(--b2)!important} /* ═══════════════════════════════════════ MoMo badge dark fix ═══════════════════════════════════════ */ .dk .momo-badge{background:rgba(252,211,77,.16)!important} .dk .momo-badge span{color:#FDE68A!important} /* ═══════════════════════════════════════ TOAST / SNACKBAR ═══════════════════════════════════════ */ .toast-stack{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;min-width:260px} .toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r-md);font-family:"DM Sans",sans-serif;font-size:13px;font-weight:600;box-shadow:0 8px 32px rgba(0,0,0,.22);pointer-events:all;animation:toastIn .32s cubic-bezier(.34,1.56,.64,1) both;white-space:nowrap;backdrop-filter:blur(8px)} .toast.out{animation:toastOut .22s ease forwards} .toast-ok{background:rgba(16,185,129,.95);color:#fff} .toast-err{background:rgba(239,68,68,.95);color:#fff} .toast-info{background:rgba(22,53,34,.96);color:#A7F3D0;border:1px solid rgba(167,243,208,.20)} .toast-warn{background:rgba(245,158,11,.95);color:#fff} .toast svg{flex-shrink:0} @keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.95)}} /* ═══════════════════════════════════════ OFFLINE SCREEN ═══════════════════════════════════════ */ .offline-glow{animation:offlinePulse 2s ease-in-out infinite} @keyframes offlinePulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}} /* ═══════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════ */ @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}} @keyframes popIn{0%{transform:scale(0);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}} @keyframes drawCheck{from{stroke-dashoffset:100}to{stroke-dashoffset:0}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes splashLoad{from{width:0}to{width:100%}} /* ═══════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════ */ .f{display:flex}.fc{display:flex;flex-direction:column}.ac{align-items:center}.as{align-items:flex-start}.jb{justify-content:space-between}.jc{justify-content:center} .g2{gap:6px}.g3{gap:10px}.g4{gap:14px}.g5{gap:18px} .px{padding-left:20px;padding-right:20px} .fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700} .fs10{font-size:10px}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs18{font-size:18px}.fs22{font-size:22px}.fs26{font-size:26px}.fs30{font-size:30px} .ct{color:var(--tx1)}.c2{color:var(--tx2)}.c3{color:var(--tx3)}.cw{color:#fff}.cg{color:var(--g500)}.cteal{color:var(--t600)} .ls-t{letter-spacing:-.03em}.ls-n{letter-spacing:-.01em}.ls-p{letter-spacing:.04em}.ls-pp{letter-spacing:.08em} .lh12{line-height:1.2}.lh15{line-height:1.5}.lh16{line-height:1.6} .mt1{margin-top:4px}.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}.mt5{margin-top:20px}.mt6{margin-top:24px} .mb1{margin-bottom:4px}.mb2{margin-bottom:8px}.mb3{margin-bottom:12px}.mb4{margin-bottom:16px} .ml-a{margin-left:auto}.w100{width:100%}.rel{position:relative}.oh{overflow:hidden} .clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .clamp1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .up{text-transform:uppercase} .spark{width:100%;height:50px}